CODEWITHSUNDEEP
javascriptjqueryajax
user1825668
user1825668

Reputation: 37

jQuery $.ajax always delete the first row on dynamic table

i have a problem in a dynamic table, adding new line work perfectly but remove line not.

this is my code:

<script type="text/javascript">
  $(document).ready(function(){
   $(document).on("click", ".trash", function(e){
    e.preventDefault();
    var $ligneParent = $(this).parent().parent();
    trash($ligneParent);
   });
  });

function trash(aLigneToTrash) {
 if (confirm("Vous allez supprimer définitivement cette ligne !")) {
 var maincourante =  $('table td.textemc').html();
 var data = 'maincourante=' + maincourante;

console.log(maincourante);

$.ajax({
  type: "POST",
  url: "form/delete/deletemc.php",
  data: data,
  cache: false,
  success: function() {
    aLigneToTrash.fadeOut('slow', function() {
      aLigneToTrash.remove();
    });
  }
});
return false;      
}
}
</script>

my problem is the variable "maincourante" who return the first entry all the time. this variable should return the value of the line i want to delete.

this is my new line code:

var nouvelle_ligne = $('<tr><td class="thtime">'+hours+'h'+minutes+'</td><td class="textemc">'+texte+'</td><td class="button"><button><i class="icon-pencil"></i></button></td><td class="button"><button class="trash"><i class="icon-trash"></i></button></td></tr>').fadeIn('fast');
          $('#tablemc').append(nouvelle_ligne);

Upvotes: 0

Views: 344

Answers (4)

Mrigesh Raj Shrestha
Mrigesh Raj Shrestha

Reputation: 620

try updating your ajax call to this:

....
$.ajax({
  type: "POST",
  url: "form/delete/deletemc.php",
  data: data,
  cache: false,
  success: function() {
     aLigneToTrash.fadeOut('slow', function() {
     aLigneToTrash.remove();
  $('#tablemc').append(' ');/*add a space to let browser know that there is a change*/
});
  }
});
return false;      
}
}
</script>

I had similar issue so it seems browsers (esp. IE ) dont detect much of changes on tables so; this hack worked for me. I hope it does to you. (assuming #tablemc is the base table)

Upvotes: 0

user1825668
user1825668

Reputation: 37

i will do this and this work perfectly

var data = 'maincourante=' + aLigneToTrash.children('.textemc').html();

thanks again for your help

Upvotes: 0

user1825668
user1825668

Reputation: 37

thanks for your help. i try this:

function trash(aLigneToTrash) {
 if (confirm("Vous allez supprimer définitivement cette ligne !")) {
  var data = 'maincourante=' + aLigneToTrash.html();

console.log(data);

$.ajax({
  type: "POST",
  url: "form/delete/deletemc.php",
  data: data,
  cache: false,
  success: function() {
    aLigneToTrash.fadeOut('slow', function() {
      aLigneToTrash.remove();
    });
  }
});
return false;      
}
}

and console.log return to me : 

maincourante=<td class="thtime">09h28</td><td class="textemc">ryhjzreyjryjryjr54654</td><td class="button"><button><i class="icon-pencil"></i></button></td><td class="button"><button class="trash"><i class="icon-trash"></i></button></td>

i want the value of the "td class="textemc" like this maincourante=ryhjzreyjryjryjr54654

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

It's a bit hard to tell without seeing the actual DOM, but you don't ever actually remove this:

aLigneToTrash

I think you probably want to do:

var data = 'maincourante=' + aLigneToTrash.html();

$('table td.textemc').html() will always select the first td.textemc in the DOM (this is just how jQuery works).

Upvotes: 1

Related Questions