adding an event handler

[cleary1981]

hi,

I am dynamically generating a table in my application depending on what records exist in the database. The problem I am having is when I try to assign an event handler to each record. I am including an image at the end o each row that when clicked should run a function. Heres my code but the onClick doesn't work.

// view icon
              var cellview = row.insertCell(3);
              var view = document.createElement("img");
              view.src="view.gif";
              view.onClick=function(){go();}
              view.alt = "View";
              cellview.appendChild(view);

Heres the full code for the table just to make things a little clearer

function updateProjects() {
    if (request.readyState == 4) {
        var returned = request.responseText;
        // alert(returned);
        var splitResult = returned.split("^");
            for (var i=0;i<splitResult.length-1;i++) {
            var record = splitResult[i];
            // alert(record);
            var splitRecord = record.split("$");
            var tbl = document.getElementById('incomplete');
            var lastRow = tbl.rows.length;
            var iteration = lastRow;
              var row = tbl.insertRow(lastRow);
 
              // cell number
              var cellLeft = row.insertCell(0);
              var textNode = document.createTextNode(iteration);
              cellLeft.appendChild(textNode);
 
              // company
              var cellcomp = row.insertCell(1);
              var t_comp = document.createTextNode(splitRecord[0]);
              cellcomp.appendChild(t_comp);
 
              // project
              var cellproj = row.insertCell(2);
              var t_proj = document.createTextNode(splitRecord[1]);
              cellproj.appendChild(t_proj);
 
              // view icon
              var cellview = row.insertCell(3);
              var view = document.createElement("img");
              view.src="view.gif";
              view.onClick=function(){go();}
              view.alt = "View";
              cellview.appendChild(view);
 
        }
    }
}

[RamananKalirajan]

Just try this code, after the cellview.appendChild(view); just insert a line

[HTML] view icon
var cellview = row.insertCell(3);
var view = document.createElement("img");
view.src="view.gif";
view.onClick=function(){go();}
view.alt = "View";
cellview.appendChild(view);
cellview.innerHTML = cellview.innerHTML
[/HTML]

hope it will work. If any prob post back it to the forum

Regards
Ramanan Kalirajan

[cleary1981]

I have managed to add the event handler by appending the image to a div and adding the event handler to the div. The problem I now face is that the variable I assign needs to be different for each record. Heres my code

// view icon
              var cellview = row.insertCell(3);
              var newObject = document.createElement('div');
            var proj = splitRecord[2];
            // alert (proj);
            var view = document.createElement("img");
              view.src="view.gif";
            newObject.appendChild(view);
            newObject.onmousedown=function(){document.location.href = "/PanelView.php?proj=" + escape(proj);}
              view.alt = "View";
              cellview.appendChild(newObject);

[acoder]

The problem with the code in the first post was that "onClick" needed to be "onclick". JavaScript is case-sensitive. Which variable needs to be different?

[RamananKalirajan]

I am glad that u got the solution.


Regards
Ramanan Kalirajan

[cleary1981]

proj is the variable that needs to be different. I keep getting the value of proj for the last record.

[RamananKalirajan]

The problem with the code in the first post was that "onClick" needed to be "onclick". JavaScript is case-sensitive. Which variable needs to be different?

I am having a question to u Mr. Acoder while I am developing some dynamic object in HTML with Javascripts I used to get the same kind of problem, there will be no error in the code, but my script wont work. when i asked about this prob my mentor told that your container needs to refreshed. So i used myContianer.innerHTML = myContainer.innerHTML. I got my scripting work. Wether this is the reason for the problem.

Regards
Ramanan Kalirajan

[acoder]

proj is the variable that needs to be different. I keep getting the value of proj for the last record.

This is a common mistake when using closures in loops. To solve it, create another closure as described here.

[acoder]

I am having a question to u Mr. Acoder while I am developing some dynamic object in HTML with Javascripts I used to get the same kind of problem, there will be no error in the code, but my script wont work. when i asked about this prob my mentor told that your container needs to refreshed. So i used myContianer.innerHTML = myContainer.innerHTML. I got my scripting work. Wether this is the reason for the problem.

That looks like a terrible hack. I'd say look at the root of the problem and try to solve that rather than use a hack like this.

[cleary1981]

Im even more confused now than I was before. Thanks lol.

[gits]

confused by what specifically? :)

kind regards

[cleary1981]

Trying to implement the closures in the loop as suggested in acoders last post

[RamananKalirajan]

That looks like a terrible hack. I'd say look at the root of the problem and try to solve that rather than use a hack like this.

Thank You Mr.Acode I will try to solve the problem instead of using the hack.

Regards
Ramanan Kalirajan

[gits]

Trying to implement the closures in the loop as suggested in acoders last post

in loops it should look like the following example:

var ele = document.getElementsByTagName('*');
 
for (var i = 0; i < ele.length; i++) {
    ele[i].onclick = function(val) {
        return function() { alert(ele[val].tagName) };
    }(i);
}

this closures the value of i and so assigns the correct handler ... without that outer function around the inner one you will always get the tagName of the last ele alerted - the explaination is found in the link that acoder showed you ...

kind regards

[cleary1981]

I have tried implementing the function as suggested but the problems I am facing are that it assigns the onclick to the very first div and the value assigned is the value of the last record. The first div is the price icon and the function is supposed to be for the view icon Heres my code;

function updateCompleteProjects() {
    //alert(request.readyState);
    if (request.readyState == 4) {
        //alert("");
        var returned = request.responseText;
        //alert("");
        var splitResult = returned.split("^");
            for (var i=0;i<splitResult.length-1;i++) {
            var record = splitResult[i];
            // alert(record);
            var splitRecord = record.split("$");
            var tbl = document.getElementById('panels');
            var lastRow = tbl.rows.length;
            var iteration = lastRow;
              var row = tbl.insertRow(lastRow);
 
              // cell number
              var cellLeft = row.insertCell(0);
              var textNode = document.createTextNode(iteration);
              cellLeft.appendChild(textNode);
 
              // company
              var cellcomp = row.insertCell(1);
              var t_comp = document.createTextNode(splitRecord[0]);
              cellcomp.appendChild(t_comp);
 
              // project
              var cellproj = row.insertCell(2);
              var t_proj = document.createTextNode(splitRecord[1]);
              cellproj.appendChild(t_proj);
 
              // project id
              var cellprojid = row.insertCell(3);
              var t_projid = document.createTextNode(splitRecord[2]);
              cellprojid.appendChild(t_projid);
 
              // price icon
              var cellprice = row.insertCell(4);
              var newObject1 = document.createElement('div');
            var price = document.createElement("img");
              price.src="price.png";
            newObject1.appendChild(price);
            price.alt = "Price";
              cellprice.appendChild(newObject1);
 
              // view icon
              var cellview = row.insertCell(5);
              var newObject = document.createElement('div');
              newObject.Class ="view";
              var ele = document.getElementsByTagName('div');
              var view = document.createElement("img");
              view.src="view.gif";
              view.alt = "View";
            newObject.appendChild(view);
            for (var i = 0; i < ele.length; i++) {
            ele[i].onclick = function(proj) {
                var proj = splitRecord[2];
                //alert(proj);
                   return function() { document.location.href = "/PanelView.php?proj=" + escape(proj); };
                }(i);
            }
              cellview.appendChild(newObject);
 
        }
        getIncompleteProjects();
    }
 
}

[acoder]

With the code on line 57:

var proj = splitRecord[2];

you're using a local variable, not the passed i value as the parameter proj.

[cleary1981]

how do I use the i value of it?

[gits]

have a close look at what you are doing:

ele[i].onclick = function(proj) {
    var proj = splitRecord[2];
 
    // ...
}(i);

you instantly call a function and pass i to it ... as parameter proj. now inside this function you declare a new variable with the same name and this just drops you the passed parameter ... and you loose it here. the strict-warning you would get is: var proj hides argument ... and that gives you the hint that you drop an argument here. what should be done with the argument in your case? something should be splitted? so the argument just passes the value of i to the inner function and there you should know what to do with it?

kind regards