Deleting dynamically added rows.

nickbpd

I am dynamically adding columns for an application I'm building:

var oTable;

$(document).ready(function() {

oTable = $('#quoteDisplay').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );

function fnClickAddRow() {
oTable.fnAddData( [
"",
document.getElementById('qty').value,
document.getElementById('product').value,
document.getElementById('description').value,
(document.getElementById('qty').value * document.getElementById('price').value) ] );
}

-----

I have a delete icon on the right side of each row. I've figured out how to make it so it deletes the row when the icon is clicked but it only works on rows that haven't been dynamically created that session. Below is my code to delete:

function deleteTableRows() {
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition( this );
aPosTwo = aPos.toString()

if(aPosTwo.substring(2,3) == 0) {
if (IsNumeric(aPosTwo.substring(0,1))) {
var applesauce = aPosTwo.substring(0,1)
oTable.fnDeleteRow( applesauce );
}
}

if(aPosTwo.substring(3,4) == 0) {
if (IsNumeric(aPosTwo.substring(0,2))) {
var applesauce = aPosTwo.substring(0,2)
oTable.fnDeleteRow( applesauce );
}
}
}


Is there a way to delete dynamically created rows?

allan

Hi nickbpd,

Dynamically created rows should be able to be deleted just as any other row (there isn't anything special about them in DataTables). Looking at your deleteTableRows function, it looks a little bit complicated for what is needed I think (although I like the variable naming!). Try this one, which gets the TR node of interest and then removes it:

[code]
function deleteTableRows ()
{
var nTr = this;
while ( nTr )
{
if ( nTr.nodeName == "TR" )
break;
nTr = nTr.parentNode;
}

var iPos = oTable.fnGetPosition( nTr );
fnDeleteRow( iPos );
}
[/code]

Allan

ipublicis

I use this code abover but it doesn't seem to work. Clicking on the icons do nothing ;(

PHP/HTML Code
[code]



<?php _e('List Name','shorten2list'); ?>
<?php _e('From Address','shorten2list'); ?>
<?php _e('To Address','shorten2list'); ?>
<?php _e('Triggers','shorten2list'); ?>




<?php

if(empty($emsg)) $s2l_maillists_for_user = s2l_get_lists_user($user_ID);

if(empty($s2l_maillists_for_user)) {
if($s2l_trap_maillists) {
$s2l_maillists_for_user = $s2l_trap_maillists;
}
} else {
$s2l_maillists_for_user[] = array( 'name' => '', 'from' => '', 'to' => '', 'triggers' => '' );
}


foreach ($s2l_maillists_for_user as $ml) {
// mlname[] - mlfrom[] - mlto[] - mltrigger[]
?>







<?php
}
?>



<?php _e('Click icon to add new maillist row', 'shorten2list'); ?>



[/code]

Javascript Code
[code]
var oTable;

$(document).ready(function() {
oTable = $('#maillists').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false } );
} );

/* Add a new row */
function fnClickAddRow() {
oTable.fnAddData( [
'',
'',
'',
'',
'',] );
}

/* Delete current row */
function deleteTableRows()
{
var nTr = this;
while ( nTr )
{
if ( nTr.nodeName == "TR" )
break;
nTr = nTr.parentNode;
}

var iPos = oTable.fnGetPosition( nTr );
fnDeleteRow( iPos );
}
[/code]

What am I doing wrong?

ipublicis

Significant code is in PHP/HTML code at lines 33 and 42 and the Javascript code.

Thanks in advance for your kind help.

ipublicis

Bump! This is fadding in the mist. Can someone give an hand, pleeeaaaseeee!

allan

Time to do a little debugging I think. Does deleteTableRows() actually get run. If so, does it correctly find the TR needed. And if that is the case does fnGetPosition give something sensible? (note in 1.6.x you can actually just pass fnDeleteRow( nTr ); rather than calculating the position).

A few 'alert()'s or console.log()s would help here.

Allan

ipublicis

Hi Allan,

I'll go back to this tool of yours soon. I manage to solve the issue yesterday at 3am with the help of the guys/gals (we never know) at #jquery

The code that is working is rather simple and does not use some fancy stuff I would like to have but...

[code]
jQuery(document).ready(function () {
jQuery('#maillists td img.delete').click(function(){
jQuery(this).closest('tr').remove();
});

jQuery('#maillists img.addit').click(function(){
jQuery('#maillists tbody>tr:last').clone(true).insertAfter('#maillists tbody>tr:last');
});
});
[/code]

Also, I had a very stupid error in my HTML sintax. The tag is and not . Hours lost until someone point me this stupid error :(

Thanks anyway. Next version of my Spread Wordpress plugin will have for sure DataTables because it is much more complex than the current Shorten2PingNG and Shorten2List.

Best,
Lopo

ipublicis

Ah! Just to mention. Wordpress *requires* that you have jQuery in the functions and not just plain $ or it won't run anything. This may be one of the errors.