Need help registering an onclick event 1

[jsteph]

Hi all,
I've got a table to which I'm adding rows. (this site is targeted to mainly IE7). I'm using the DOM cloneNode on an existing row, then the appendChild method to append it to the table's body object.

Now, when the table is first loaded, an asp page loops through a database and builds a row for each record, with an input element inside the td element. Then the user clicks a button to add a row, and it's important for me to know which row the mouse was last clicked on.

So my current method of knowing which row is clicked on is hardcoding the onclick event of the input element as:

onclick="g_currentRow='5';"

...where g_currentRow is a global variable, and 5 is the row number. This works just fine...I test it with a button that just displays the variable g_currentRow correctly.

However, for the new rows, prior to me appending the row, I do the following:

tnewrow.setAttribute('onclick',"g_currentRow=\'" + strnewrow + "\';")

...where strnewrow is a variable holding the incremented row number. This does not work, yet if I display the rendered html after the appendRow, the new row is there and so is the onclick event, exactly as the pre-existing rows.

Now, I've seen the syntax:
tnewrow.onclick=someFunction
...but I can't figure out how to put an argment in that function because setting it that way is not accepting "someFuncion" (or any script for that matter) as a *string* for which I can parse in variable values.

Can anyone tell me how I would assign a function to an event where that function takes arguments? Thanks,
--Jim

 

[tsuji]

[0] First off, one shouldn't set event handler via setAttribute() method. I say "shouldn't" not because of any irrational partisan concern and disregard of a browser software as a piece of tool of its own right worthy of respect, it is because it is an unwarranted amalgame of concepts, supported or not, that would be misleading in the long run and fire back any time.

[1] As to the setting a new row's onclick handling, one can do this.
[tt] tnewRow.onclick=function() {g_currentRow=this.rowIndex;};
[/tt]

 

[jsteph]

tsuji,
Thanks, but I'm also sort of asking in the broader academic sense (although I think your suggestion will work for one particular instance):

In my example I wasn't calling a function--I was just running script setting one variable to a concatenated *value* of another variable that changes with each iteration of a loop (though I suppose whether it's wrapped in a function is irrelevant here).

In my realworld lets say I'm adding 10 rows and g_currentRow is instead some other variable and it's being set to a value from array that has no relation to rowIndex, so I need to hardcode a value into this onclick function as I creat the rows.

So...for academic purposes (i'm asking more of a 'correct syntax' question--not 'what's the best way to accomplish this'), suppose I wanted to have that variable set in an onclick event--either in a function or just in the straight-up script as in the example--to a value of a variable. How would I do that?

What I'm getting at is that in the setAttribute, the 'attribute' is a string value in which you can concatenate a value of a variable, for example:

//{assume declarations and initializations were done)
for (i=0;i<totalrows;i++){
trow[i}.setAttribute('onclick',"function(){"g_someglobalvariable=\'" + someArray[i] + "\';}"
//but below, the 'onclick' is *not* set as a string, 
//so how does one concatenate into the function a hardcoded
//value that is stored in, say, and array?
tnewRow.onclick=function(){g_someglobalvariable=[how dow i put in the array variable *value* here?]}
}

In the second example, I can't figure out how to escape out the quotes, etc, in order to hardcode the array's current value into the function itself.
Thanks for any help.
--JIm

 

[tsuji]

>trow[i}.setAttribute('onclick',"function(){"g_someglobalvariable=\'" + someArray[[ignore]i[/ignore]] + "\';}"
You keep mentioning setAttribute(). Does any one of the above line work (apart from perhaps some typos that I can tolerate) on IE7?

>tnewRow.onclick=function(){g_someglobalvariable=[how dow i put in the array variable *value* here?]}
As long as someArray is in-scope when this line is executed, it is this.
[tt] tnewRow.onclick=function(){g_someglobalvariable=someArray};[/tt]

 

[jsteph]

tsuji,
Thanks very much, that second syntax worked out. I don't know *why* it worked, becuase it would appear that both g_someglobalvariable and someArray are both in scope, so if the global had a value of 'X' and the array='Y', I would think the function would say:

function(){X=Y}
//instead of:
function(){g_someglobalvariable=Y}

The bottom example seems to be what is happening, which is good of course. It just is unclear to me how the javascript engine knows to do that.


As far as the setAttribute--it would definitely put the code in the element--when I used a codespy to see the generated code, the onclick 'existed' in the code--but it did not work.

The onclick only worked in the rows that were generated by asp at the server and sent to the browser as the original page--but when the javascript ran to generate new rows--the rows *looked* identical in the codespy to the asp-generated html, but the javascript-added rows just didn't fire the click event even though it was syntactically identical in the html.

--Jim

 

[tsuji]

>The bottom example seems to be what is happening, which is good of course. It just is unclear to me how the javascript engine knows to do that.
I can understand the feeling. It is not a straightforward or intuitive paradigm the function constructor in js, coupled with the event listening model. If you prefer this variation is also correct which might inspire you to grap the concept.
[tt]
var hdl=new Function("w","g_someglobalvariable=w;")
tnewRow.onclick=function(){hdl(someArray);};
[/tt]
I think i give enough keywords for you to search and read tutorial material of varying depth out there.