SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem in onclick function

    Hi,

    I have a table in which rows are dynamically created. I have declared a onclick function dynamically which has arguments in it. And the arguments changes correspondingly as a result of xmlhttprequest.

    How to assign a onclick function with arguments for a dynamically created element?

    The problem is dynamically declared onclick function doesn't take the arguments.

    My code is below:

    Code:
    tr=document.createElement('tr');
    for(j=1;j<=3;j++)	
    {
    td=document.createElement('td');
    img = document.createElement('img');
    img.id = "status" + (i+1);
    img.src = '<?php echo $SG_ROOT_PATH; ?>' + /images/latest.gif;
    img.onClick = function() { ViewCurrentState(studentName, Id, age);
    td.appendChild(img);
    tr.appendChild(td);					document.getElementById('retrieveBkupsTable').appendChild(tr);
    
    function ViewCurrentState(studentName, Id, age)
    {
         alert(studentName);
         alert(Id);
         alert(age);
    }
    Im getting undefined alert for all studentName, Id and age.

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What i would do in your case to make things eassier is use the Function() object, like this:

    Code:
    arg1 = "some argument";
    arg2 = "another arg";
    arg3 = "0"; //you should put them all in "" to avoid problems with types.
    img.onClick = Function('ViewCurrentState('you can put args here, but onClick doesnt have args!', "' + arg1 + '", "' + arg2 + '", "' + arg3 + '")');
    I find that using it like that saves alot of time... if you get problems with using it like that try adding "new" infront of it like this:

    Code:
    img.onClick = new Function('', 'ViewCurrentState("' + arg1 + '", "' + arg2 + '", "' + arg3 + '")');
    Hope that helps,
    -ALL
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for ur quick response.

    I have tried this. Onclick event itself is not fired!

    Any other way?

    Regards,
    Viji.

  4. #4
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    oops didnt check it all the way... as you may know javascript IS case sensitive... so it would be:

    Code:
    arg1 = "some argument";
    arg2 = "another arg";
    arg3 = "0"; //you should put them all in "" to avoid problems with types.
    img.onclick = Function('ViewCurrentState('you can put args here, but onClick doesnt have args!', "' + arg1 + '", "' + arg2 + '", "' + arg3 + '")');
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  5. #5
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vijiruba,

    The problem with your original syntax is that to assign a named function to an event you simply assign the function's name, like:

    element_object.onclick = ViewCurrentState;

    This must be done after the element has been created, usually after the page load process. This is commonly accomplished with window.onload.

    Whether using a Function() constructor to create an anonymous function on the fly, as ALL has demonstrated, or doing the assignment of a defined function as in your original (or assigning an anonymous function with a function literal, as a third possibility), your parameters will not be intrinsic to the event. In other words, they have to come from somewhere outside the event handler.

    Your parameters, then must either be variables (global variables in the case of the Function() constructor, as the function it creates only exists in the global scope) or attributes of the element object (accessible through 'this').


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •