Databases
StackOverflow2013
Postsdbo
POJquery and dynamic row creation issues
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery and dynamic row creation issues
    text
    copied!<p>I'm a jquery newbie... still learning the framework.... and here goes my query...</p> <p>The overview of this query is as follows...</p> <ol> <li><p>I got a table which is created with values from the DB using PHP.</p></li> <li><p>We can dynamically add new rows.... remove necessary rows.. and edit the row items and i use jquery for this purpose...</p></li> <li><p>In each row there are two cells each containing a link on whose click event i call the necessary jquery function to either edit or remove the row... i use the class name of the link to refer to that item, like... $(.class_name).click();</p></li> <li><p>For adding a new row too i use a link on whose click event i call a modal window, get and validate a string, create a new row containing the string,and the links to edit or remove the row with the appropriate class name....</p></li> <li><p>The problem i get here is, after i've added the new row, jquery seems not able to identify the element when the link is clicked... it's like the newly added element does not exist within the page..</p></li> </ol> <p>I will also post the code here... and here it goes...</p> <pre><code> // The initial table creation using php &lt;table&gt; &lt;tr&gt; &lt;td&gt; **&lt;a href="#" class = "addDept"&gt; ADD &lt;/a&gt; // Link to add a new row** &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table class="style1" width="100%" align="center" id="deptTable"&gt; &lt;tr&gt; Header Row &lt;/tr&gt; &lt;!-- BEGIN LOOP TO PRINT THE TABLE WITH DEPARTMENT NAMES --&gt; &lt;?php $bg1 = "#d0d0d0"; $bg2 = "#ffffff"; $dept_name_i = 1; foreach($dept_names as $names) { $same = strtoupper($names); if($dept_name_i % 2) { $bgcolor = $bg1; } else { $bgcolor = $bg2; } ?&gt; &lt;tr bgcolor="&lt;?php echo "$bgcolor";?&gt;" align="center" id="dataRow&lt;?php echo $dept_name_i;?&gt;" class ="dataRow"&gt; &lt;td&gt; &lt;?php echo $dept_name_i; ?&gt; &lt;/td&gt; &lt;td class="deptName1"&gt; &lt;?php echo strtoupper($names); ?&gt; &lt;/td&gt; &lt;td&gt; **&lt;a href="#" class="editDept"&gt; // Link to Edit the Row EDIT &lt;/a&gt;** &lt;/td&gt; &lt;td&gt; **&lt;a href="#" class="removeDept"&gt; // Link to Remove the Row REMOVE &lt;/a&gt;** &lt;/td&gt; &lt;/tr&gt; &lt;tr style="display:none" class="editRow" id="editRow"&gt; &lt;td align="center"&gt; &lt;?php echo $dept_name_i; ?&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;input type="text" name="deptName" class="deptName" value = "&lt;?php echo $same; ?&gt;" /&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;a href="#" class="saveDept"&gt; Save &lt;/a&gt; &lt;b&gt; &amp;nbsp; || &amp;nbsp; &lt;/b&gt; &lt;a href="#" class="cancelDept"&gt; Cancel &lt;/a&gt; &lt;/td&gt; &lt;td&gt; &lt;/td&gt; &lt;/tr&gt; &lt;?php // increment the iterator $dept_name_i++; }// end of foreach ?&gt; &lt;!-- END OF LOOP TO PRINT THE TABLE --&gt; &lt;/table&gt; &lt;/td&gt; &lt;/tr&gt; Now to the jquery part.. i'll just show the function to add a new row.... $(document).ready(function(){ $('.addDept').click(function() { $('#dialog').dialog('open'); }); // please note that there's some code at this point, that i have not included here, //to get a string through a jquery modal window.. // now the part where we add a row... var newRow = "&lt;tr class = 'dataRow' style = 'background-color:"+newRowcolor+"' align = 'center'&gt;\n\ &lt;td&gt;\n\ "+serialNo+"\ // this is a variable &lt;/td&gt;\n\ &lt;td&gt;\n\ "+ nameN +" \n\ // this is a variable too &lt;/td&gt;\n\ &lt;td&gt;\n\ &lt;a href='#' class =\"editDept\"&gt; \n\ EDIT &lt;/a&gt; \n\ &lt;/td&gt;\n\ &lt;td&gt;\n\ &lt;a href='#' class =\"removeDept\"&gt; \n\ REMOVE &lt;/a&gt; \n\ &lt;/td&gt; \n\ &lt;/tr&gt;"; var newRow1 = " &lt;tr style='display:none ; background-color:"+newRowcolor+"' class='editRow' id='editRow'&gt; \n\ &lt;td align='center'&gt; \n\ &lt;/td&gt;\n\ &lt;td align='center'&gt;\n\ &lt;input type='text' \n\ name='deptName' \n\ class='deptName' \n\ value = "+ nameN+" /&gt;\n\ &lt;/td&gt;\n\ &lt;td align='center'&gt;\n\ &lt;a href='#' class=\"saveDept\"&gt; \n\ Save \n\ &lt;/a&gt; \n\ &lt;b&gt; &amp;nbsp; || &amp;nbsp; &lt;/b&gt; \n\ &lt;a href='#' class='cancelDept'&gt; \n\ Cancel \n\ &lt;/a&gt;\n\ &lt;/td&gt;\n\ &lt;td&gt; \n\ &lt;/td&gt;\n\ &lt;/tr&gt;"; $("#deptTable tbody").append(newRow); $("#deptTable tbody").append(newRow1); // code for editing the row.... just in case... $(".editDept").click(function(){ var data = $(this).parent().parent().prevAll().length; var edit = data + 1; deptName_b4Edit = $("#deptTable tr:eq("+data+") td:eq(1)").text();; $("#deptTable tr:eq("+ edit +")").show(); $("#deptTable tr:eq("+ data +")").hide(); }); }); </code></pre> <p>I just can't get why the newly added row's element's classes are not visible to jquery... Hope i've been clear... it will really helpful if somebody explains how to clear this up.... thanks a lot in advance..</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload