Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old June 25th, 2007, 05:10 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default PROBLEM with passing 'this' pointer

I want to add/delete rows dynamically. But i dont seem to be able to delete them properly. The ones inserted dyanamically can't be deleted
Can some one come up witha solution....

Any help would be appreciated :

------------------------------------------------

<html>
<head>
<script type="text/javascript">
function insRow()
  {
  var tbl=document.getElementById('myTable');
  var lastRow = tbl.rows.length;

  var row = tbl.insertRow(lastRow);

  var imgCell = row.insertCell(0);
  var img = document.createElement("img");

  img.setAttribute("alt", "delete");
  img.setAttribute("id", "del");
  img.setAttribute("src", "trash.gif");
  img.onclick = removeRow('this');
  imgCell.appendChild(img);

  }
</script>
<script type="text/javascript">
function removeRow(r)
  {
  var i=r.parentNode.parentNode.rowIndex;
  document.getElementById("myTable").deleteRow(i);
  }
</script>

</head>

<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td><img src="trash.gif" border=0 onclick="removeRow(this);"></td>

</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td><img src="trash.gif" border=0 onclick="removeRow(this);"></td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td><img src="trash.gif" border=0 onclick="removeRow(this);"></td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="Insert row">

</body>
</html>



Reply With Quote
  #2 (permalink)  
Old June 26th, 2007, 12:06 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Dear smokey_gun

When browser reaches "img.onclick = removeRow('this');" statement, tries to run "removeRow" method and pass it a string argument ("this"), and then assign it's return value to "onclick" property of "img" element.

You can't assign an event handler to an element using 'name=value' syntax. You should use an special method of your element (in this case your 'img' element) named 'attachEvent'. It takes two parameters, the first one is string that contains name of event (like "onclick" or "onmousedown") and the latter is name of function that you like to assign to that event.

Note : Remember that second parameter is not a string, it's a function pointer. For example your statement will be changed to :

img.attachEvent("onclick",removeRow);

Bye bye


Ehsan Zaery Moghaddam
Reply With Quote
  #3 (permalink)  
Old June 26th, 2007, 07:27 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

doesnt work properly... did you try ti yourself

Reply With Quote
  #4 (permalink)  
Old June 27th, 2007, 12:16 AM
Authorized User
 
Join Date: Jun 2007
Location: Tehran, Tehran, Iran.
Posts: 39
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Sorry smokey_gun

When you attach an event to element, you pass a function pointer to 'attachEvent' and no parameter could be passed to such functions (when they are called in this way).

When user clicks on a remove button that has been added dynamically, 'removeRow' method would be called and will have an argument that is an 'event' object. 'event' object is a global object that you can access it on any event handler function and contains some useful information about currently happening event (like mouse position, key code and etc.).

This object have a property named 'srcElement' that is a reference to an element that has raised this event. You can use this property to access your 'img' element and do what ever you want. So you should change your 'removeRow' method to :

function removeRow(r)
{
    var i = -1;
    if(r.parentNode != null)
    {
        // This method has been called from static rows
        i = r.parentNode.parentNode.rowIndex;
    }
    else if(r.srcElement != null)
    {
        // This method has been called from dynamic rows
        i = r.srcElement.parentNode.parentNode.rowIndex;
    }
    document.getElementById("myTable").deleteRow(i);
}


Ehsan Zaery Moghaddam
Reply With Quote
  #5 (permalink)  
Old June 27th, 2007, 04:45 PM
Registered User
 
Join Date: Jun 2007
Location: , , .
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanx for your help...it worked!!!
But now i'm posed with new problem.
1. the Initial row that I display contains Select boxes which are popolated froma database like this:
  <tr>
        <td>
            <html:select styleClass="Font5" property="model">
            <html:options styleClass="Font5" collection="modList" property="model" labelProperty="model"/>
            </html:select>
        </td>
        <td>
            <html:select styleClass="Font5" property="source">
            <html:options styleClass="Font5" collection="srcList" property="source" labelProperty="source"/>
            </html:select>
        </td>
        <td>
              <select styleClass="Font5" name="freq">
                 <option styleClass="Font5" value="0">M</option>
                  <option styleClass="Font5" value="1">Q</option>
                <option styleClass="Font5" value="2">D</option>
            </select>
        </td>
        <td align="center">
            <input size ="5" type="text" styleClass="Font5" name="F">
        </td>
        <td align="center">
            <input size ="5" type="text" styleClass="Font5" name="T">
        </td>
        <td align="center">
            <input size ="5" type="checkbox" styleClass="Font5" name="G">
        </td>
</tr>

So basically Model & Source get populated by mList & sList collection.
I'm able to add new rows & delete them....But if i delete my Original Row then I'm not able to add new rows.
I think its related to population as the List gets populated only once & if that row is deleted I guess the Collection is lost.
Any solutions???

Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Constant pointer and pointer to a constant amit_mande@yahoo.com C++ Programming 2 June 5th, 2007 01:39 AM
Pointer fReqZz C++ Programming 5 June 5th, 2007 01:09 AM
Pointer reference perstam C++ Programming 5 April 29th, 2006 08:51 AM
passing an integer pointer to a C++ DLL Bill_Thompson Beginning VB 6 1 February 3rd, 2006 06:11 PM
pointer-to-function in C++ jacob C++ Programming 2 October 23rd, 2004 05:20 AM



All times are GMT -4. The time now is 10:05 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.