SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 44 of 44
  1. #26
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand this is a parameter issue and that they cannot be sent over

    for a little example I have done this:

    var display;
    function Hi()
    {
    alert(display);
    }


    var buttonnode= document.createElement('input');
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name','button'+iteration);
    buttonnode.setAttribute('value','sal');
    //removerow.a =iteration;
    buttonnode.attachEvent('onclick',Hi);//require this particular row to be deleted
    buttonnode.onclick = function(){Hi(this, iteration)};
    cell1.appendChild(buttonnode);


    but when I click on the button and the alert jus outputs undefined and not the value of iteration....

  2. #27
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code I tested under FireFox 1
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <title>IE Bug ?</title>
      <script>
      
      function showit(){
      alert('ok')
      }
     
      // Cherche l'élément 'bug' et insère un lien qui affiche 'ok' quand on clique
      // Fonctionne sous Mozilla et Opera mais pas sous IE 6
      function testIE(){
        var elem = document.getElementById("bug");
        var newtag = document.createElement("a");
        newtag.setAttribute("id","lien")
        newtag.setAttribute("onclick",function(){alert('coucou')})
        newtag.onclick=function(){alert('coucou')};
        newtag.setAttribute("style","cursor:pointer")
        newtag.appendChild(document.createTextNode("click"));
        elem.appendChild(newtag);
      
        document.getElementById('lien').style.cursor='hand, pointer'
    
      }
      </script>
      </head>
    
    
      <body>
     
      <input type="button" value="test!" OnClick="testIE()"/>
     
      <div id="bug"></div>
     
      </body>
    </html>
    onclik attribution is doubled to ensure compatibility with IE and FFX

  3. #28
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onclik attribution is doubled to ensure compatibility with IE and FFX
    Hmmm...let me review: you claimed setAttribute() worked in FF1.0 with event handlers:

    newtag.setAttribute("onclick",function(){alert('coucou')});

    but your code really has another line of code that assigns the function to the the onclick event in FF1.0:

    newtag.onclick=function(){alert('coucou')};

    Furthermore, since the last line works in IE too, you don't need the first line at all.

  4. #29
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm confused...

  5. #30
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but when I click on the button and the alert jus outputs undefined and not the value of iteration....
    Where did you define interation anywhere in your example:
    Code:
    var display;
    function Hi()
    {
    alert(display);
    }
    
    
    var buttonnode= document.createElement('input');
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name','button'+iteration);
    buttonnode.setAttribute('value','sal');
    //removerow.a =iteration;
    buttonnode.attachEvent('onclick',Hi);//require this particular row to be deleted
    buttonnode.onclick = function(){Hi(this, iteration)};
    cell1.appendChild(buttonnode);

  6. #31
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, get rid of any line with attachEvent() and get rid of any setAttribute() line that tries to set an onclick event because they are both not crossbrowser. To set an event handler all you need is a line like this:

    buttonnode.onclick = some_function;

    Finally, since you seem to be having a lot of trouble with that concept, I suggest you put your event handlers inline in the html:

    <input type="button" onclick="some_function(arg1)" />

    and see if that makes things clearer for you.

  7. #32
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok think I have come up with the solution of sending the parameter across but the thing is now it just removes the last row and not the button row any suggestions as to how I can retrieve the row of the button I have created...as the row is added at the end of the table I assumed that its index would be last row but this does not seem to be the case

    function remove1()
    {
    var num=remove1.a;
    document.getElementById('secondtable').deleteRow(num);
    }






    var tbl = document.getElementById('secondtable');
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;


    var buttonnode= document.createElement('input');
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name','button'+iteration);
    buttonnode.setAttribute('value','sal');
    remove1.a =iteration;
    buttonnode.attachEvent('onclick',remove1);//require this particular row to be deleted

  8. #33
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Array index values start at 0, so if you have an array with length 3 the index values are:

    0, 1, 2

    Notice there is no index value of 3 = array.length. In an array, there can never bee anything at position array.length in the array.

  9. #34
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by humaira
    but the thing is now it just removes the last row and not the button row
    This is because your "remove1.a" value gets overwritten by this line
    Code:
     remove1.a =iteration;
    and this code
    Code:
    var num=remove1.a;
    uses the last value of "remove1.a".

    This is the way how closures work, and you have to create extra scope to work around this. The good news are that there is actually no need to pass "iteration" to event hanlder, because you can use row's "rowIndex" property instead.

    http://msdn.microsoft.com/workshop/a...s/rowindex.asp

  10. #35
    SitePoint Evangelist SpaceFrog's Avatar
    Join Date
    Jan 2005
    Location
    Outerspace
    Posts
    511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The example is an old code I digged up from my library, probably in more recent version of browsers last line is sufficient ...
    For setAttrib I did not claim anything I just rememberedr I havd a code somewhere that got me out of a similar problem I encountererd e few years ago ...

  11. #36
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://msdn.microsoft.com/workshop/a...s/rowindex.asp[/QUOTE]


    hi once again...
    erm I have had a look at the above site but I dont see them using rowIndex within their example:


    function formatTable(oTable)
    {
    var rows=oTable.rows;
    for(var i=0;i<rows.length;i++)
    {
    if(i%2==0) {
    rows[i].style.backgroundColor = "black";
    rows[i].style.color = "white";
    } else {
    rows[i].style.backgroundColor = "white";
    rows[i].style.color = "black";
    }
    }

  12. #37
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just to clarify the matter i have a button associated with each row when clicking upon the button it should delete the corresponding row. I would appreciate if you could demonstrate how I would use rowIndex to find the index to the row....

  13. #38
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually you dont even need rowIndex. Just an element itself.
    Code:
    <table border=1>
    	<tr><td>1</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>2</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>3</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>4</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>5</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>6</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>7</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>8</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    	<tr><td>9</td><td><button onclick="deleteRow(this)">x</button></td></tr>
    </table>
    <script language="JavaScript" type="text/javascript">
    function deleteRow(o) {
    	while(o && o.tagName != "TR")
    		o = o.parentNode;
    	if(o)
    		o.parentNode.removeChild(o);
    }
    </script>

  14. #39
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but I am actually creating the row in javascript then trying to delete the row:

    here is the code that I have tried but I think this.rowIndex is just deleting the first row:


    function remove1()
    {
    var num=remove1.a;

    var mytable= document.getElementById('secondtable');
    document.getElementById('secondtable').deleteRow(this.rowIndex);
    }


    function addRowToTable()
    {
    var tbl = document.getElementById('secondtable');
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow-1;
    alert(iteration);
    var row = tbl.insertRow(lastRow);
    // left cell
    var cell1 = row.insertCell(0);
    alert(lastRow +"hello");
    var cell2=row.insertCell(1);
    var cell3=row.insertCell();
    var cell4=row.insertCell();


    var e1= document.createElement('input');
    e1.setAttribute('type','text');
    e1.setAttribute('name','field'+4);
    cell2.appendChild(e1);

    var buttonnode= document.createElement('input');
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name','button'+iteration);
    buttonnode.setAttribute('value','sal');
    remove1.a =iteration;
    buttonnode.attachEvent('onclick',remove1);//require this particular row to be deleted

    //buttonnode.attachEvent('onclick',removerow);//require this particular row to be deleted
    //buttonnode.onclick = function(){Hi(this, iteration)};
    cell1.appendChild(buttonnode);
    //buttonnode.onclick = Hi;

    }

  15. #40
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    buttonnode.attachEvent('onclick',remove1);//require this particular row to be deleted


    because of the above line I am unable to add parameters to the as it does not allow to do so

  16. #41
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, humaira, what you're trying to do is pretty much advanced... and you seem to need to learn some basic stuff first. I'd suggest you try finding some reading / examples / tutorials in google or in your bookstore. Good luck!

  17. #42
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    birmingham, uk
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for ur help guys much appreciated......

  18. #43
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the ways of sending arguments to a function are roughly equivalent. The easiest way to send an argument to a function is to just declare the argument as a global variable and use it inside the function. Try this simple example:
    Code:
    var interation = 10;
    
    function my_func()
    {
        alert(interation);
    }
    
    my_func();
    Also, get rid of any line with attachEvent() and get rid of any setAttribute() line that tries to set an onclick event because they are both not crossbrowser. To set an event handler all you need is a line like this:

    buttonnode.onclick = some_function;
    Last edited by 7stud; Jan 31, 2005 at 19:45.

  19. #44
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by humaira
    I understand this is a parameter issue and that they cannot be sent over

    for a little example I have done this:

    var display;
    function Hi()
    {
    alert(display);
    }


    var buttonnode= document.createElement('input');
    buttonnode.setAttribute('type','button');
    buttonnode.setAttribute('name','button'+iteration);
    buttonnode.setAttribute('value','sal');
    //removerow.a =iteration;
    buttonnode.attachEvent('onclick',Hi);//require this particular row to be deleted
    buttonnode.onclick = function(){Hi(this, iteration)};
    cell1.appendChild(buttonnode);


    but when I click on the button and the alert jus outputs undefined and not the value of iteration....
    It's been a year, but I found this tread via Google search when looking into attachEvent with the error 'type mismatch'. I had (operative word-- "had") a similar problem.

    I wanted to do something like
    Code:
    var iteration = 0;
    . . .
    
    function addRow() {
    
    iteration++;
    . . .
    
    var cell4 = row.insertCell(4);
    var print = document.createElement('input');
    print.setAttribute('id', PRINT_PREFIX + iteration);
    print.setAttribute('name', PRINT_PREFIX + iteration);
    print.setAttribute('type', 'button');
    print.setAttribute('value', 'Print');
    print.attachEvent('onclick', printBoxLabels(this.parentElement));
    cell4.appendChild(print);
    }
    where printBoxLabels() printed a label using data from the row in question and replaces the print button with text (via InnerHTML).

    What I discovered is IE's (at least in IE 6) attachEvent only accepts the function name as the second argument additionally executing said function immediately. Furthermore, the event, itself, is passed as the first argument to the function whenever the event is fired.

    So just use arguments[0].srcElement to get the referring element in the function you want to call (in my case: printBoxLabels). . . and through an appropriate number of [element].parentElement you can get from the input element to the td element to the tr element.

    To keep the function from firing upon the attachEvent call, I use an assertion at the beginning of printBoxLabels(), that simply returns to addRow() upon failure.

    I hope this helps some one out there.


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
  •