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.

Expand|Select|Wrap|Line Numbers

 // 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

Expand|Select|Wrap|Line Numbers

 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

Expand|Select|Wrap|Line Numbers

 // 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

Quote:

Originally Posted by 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?

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

Quote:

Originally Posted by cleary1981

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

Quote:

Originally Posted by RamananKalirajan

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

Quote:

Originally Posted by acoder

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

Quote:

Originally Posted by cleary1981

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

in loops it should look like the following example:

Expand|Select|Wrap|Line Numbers

 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;

Expand|Select|Wrap|Line Numbers

 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:

Expand|Select|Wrap|Line Numbers

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:

Expand|Select|Wrap|Line Numbers

 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

adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

re: adding an event handler

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about