onclick -- dynamic definition 1

[gerases]

I have an html table with each row having a button that has its onclick defined as follows:

onclick=edit(parm1,parm2,event) // this is generated from php

Then, I have the edit function defined as something like this:

function edit (parm1, parm2, event)

Well, then in "edit" I need to redefine the onclick definition for the button that called "edit" because parm1 and parm2 have changed. So, I find the button in question and say something like:

str = parm1 + "," + parm2 + "," + "event";
button.onclick = new Function("", str);

After these actions, I click on the button and this time "event" is not defined in "edit". How do I redefine the function so that "event" is passed correctly on subsequent calls to "edit"?

I tried this too:
str = parm1 + "," + parm2 + "," + "event";
button.onclick = new Function("event", str);

 

[gerases]

Sorry, I meant to say

... new Function("", "edit(" + parms + ")")

and

... new Function("event", "edit(" + parms + ")")

 

[gerases]

Sorry once again, I meant to say

... new Function("", "edit(" + str + ")")

and

... new Function("event", "edit(" + str + ")")

 

[tsuji]

[tt]button.onclick = new Function("", "edit('"+parm1+"','"+parm2+"',event)");[/tt]

 

[gerases]

Nope, didn't do it. What I'm going to do for now is use innerHTML to just replace the button definition. Not very subtle, but it will do for now.

 

[theniteowl]

tsuji's line works for me.
How are you identifying the button in order to redefine it's onclick event?

Your original lines did not include quotes around the parameter values you want the onclick function call to pass.
Also, the original function call did not have quotes.
I am assuming that the values to pass are literal values and not references to a variable object except for event.
So your actual string would start something like this:
<input type="button" value="Go" onclick="edit('firstvalue','secondvalue',event)">

If your parm1 and parm2 values really are references and not literal values then your function would work something like this:
button.onclick = new Function("", "edit("+parm1+","+parm2+",event)");
so the parm1 and parm2 have no quotes in the resultant function call.



It's hard to think outside the box when I'm trapped in a cubicle.

 

[gerases]

Yes, the parameters are variables, not literals. I forgot to mention that it wasn't working in Firefox.

So, here's how I had it:

function edit(parm1, parm2, parm3, event) {
var parms = "'" + parm1 + "'" + ",";
parms += "'" + parm2 + "'" + ",";
parms += "'" + parm3 + "'";

// Let's assume I have the reference for the button
btn.onclick=new Function ("", "edit(" + parms + ", event)");
}

That was it. And it didn't work for my Firefox 0.8 at work. Then, I removed the event part, and it started working for 0.8. Then, I tried it for 1.5 and it didn't work without the event piece. With the event piece, Javascript Console said that "event" was undefined after the button has been reassigned the onclick function.What browser are you using?

 

[BillyRayPreachersSon]

"event" is an IE-only global, which might explain why it is not working in Fx...

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

So your solution above is the same as I suggested when not using literal values.

When you originally pass in event from the function it passes in an object for the page event and in your edit function the object is also called event. Putting event within quotes in the new function piece should pass it as literal text but perhaps it is still treating it as the object in FF?

Maybe try changing the parameter event in your edit function to e instead so there is no chance for object confusion?

When javascript interprets the btn.onclick line I think it might be evaluating the new function call, sees event and tries inserting the object rather than just the text. So if the object is referenced as e rather than event you might not have the problem.

Or try building the text for event in pieces so when the line is evaluated it just puts the pieces together rather than trying to evaluate event as an object. Like this:
btn.onclick=new Function ("", "edit(" + parms + ", eve" + "nt)");

I am just guessing of course but it may be the difference between how Javascript parses out the line in FF vs IE.
I would say first try renaming the event parameter to e in the edit function. Still pass it in under event, just receive and use it as e in the function.



It's hard to think outside the box when I'm trapped in a cubicle.

 

[theniteowl]

Spend all your time thinking too deeply and someone will come along and make you look silly.

Dan is right, events are a pain cross-browser.

Here is the code I use in another app to set the object for the event cross-browser.

    // Get the object based on browser implementation.
    if (!e) var e = window.event;
    if (e.target) var obj = e.target;
    else if (e.srcElement) var obj = e.srcElement;
    if (obj.nodeType == 3) var obj = obj.parentNode; // for Safari bug

Or if you really do not need the event reference you could just pass in the ID of the button in it's onclick event and save all the event trouble.


It's hard to think outside the box when I'm trapped in a cubicle.

 

[gerases]

First about event being IE a global variable in IE. It is true, but in Netscape-like browsers, the event needs to be passed to each event handler function.

I do need the event object because I need mouse coordinates...

Niteowl, thanks for the suggestions. I'm going to try them a little later today. The thing is, I already recoded it with innerHTML, so I need to set up a test scenario.

 

[tsuji]

Modifications for cross-browser along the same construction using new Function().

[1] For parm1 and parm2 as literal string (like "abc", "def")---as I supposed in my previous posting, do this.
[tt]
if (document.all && !window.opera) {
button.onclick = new Function("", "edit('"+parm1+"','"+parm2+"',event)");
} else {
button.onclick = new Function("event", "edit('"+parm1+"','"+parm2+"',event)");
}
[/tt]
[2] If parm1 and parm2 are expressions (like document.getElementById("so-and-so").value), do this.
[tt]
if (document.all && !window.opera) {
button.onclick = new Function("", "edit("+parm1+","+parm2+",event)");
} else {
button.onclick = new Function("event", "edit("+parm1+","+parm2+",event)");
}
[/tt]