You are viewing limited content. For full access, please sign in.

Question

Question

JQuery code not updating Total-count on Table-Row-Delete.

asked on July 7, 2022

I used the code below to build a table (tablejq). When adding rows, the total-field (totalInTable) gets updated perfectly, but when a row is deleted using the 'x', the total-field remains the same.  Can someone please help. Thank you.

My code is:

$(document).ready(function() {

  rowcount();

  $('.tablejq').on('click', '.form-del-field', function () {
    rowcount();
  });
  
  $('.tablejq').on('click', '.cf-table-add-row', function () {
    rowcount();
  });
  
  function rowcount() {
    $('.totalInTable input').val($('.tablejq tr').length-1);
  }
});
 

0 0

Answer

SELECTED ANSWER
replied on July 7, 2022

There is something about the table delete functionality that prevents the event triggers from working the same way they do with the click on the add, I'm not certain what it is.  However, there is a fairly simple way we can get around this, we'll just run the code anytime the table is clicked at all.  That means we can use the same event trigger for both adding and deleting.

Additionally, a couple tips:

  • If you have an event trigger that is just calling a function, you can just put the function into the code instead of doing a function() { //code } command.  Instead of: $('.tablejq').on('click', '.form-del-field', function () { rowcount(); }); you can do $('.tablejq').on('click', '.form-del-field', rowcount});
  • JQuery has a steamlined way to handle click event, you'll see that in the updated code I shared below.
  • LFAnswers has a functionality for posting code in posts or comments that makes them much easier to read (see the "{...} code" button).

All of that together is combined, and here's some streamlined code that should work for you: 

01$(document).ready(function() {
02 
03  rowcount();
04  $('.tablejq').click(rowcount);
05   
06  function rowcount() {
07    $('.totalInTable input').val($('.propCount').val());
08  }
09   
10});

 

1 0
replied on July 7, 2022 Show version history

If I remember right, I think the reason this happens is because your running the function on click, but when the user clicks delete, the data is still there, they are just beginning to ask it to be deleted and we are not ready to re-calc yet until it is finished being deleted. It is not removed until after they click delete.

You have asked your function to also run after they click delete but not gauranteed to be after the row is finished being deleted.

I think my workaround was to run my function on any change to the table IE: $('.table').change since deletion of a row should be a change to the table.

1 0
replied on July 7, 2022

That's not my experience.  Because you can do multiple deletes in a row and it doesn't seem to get triggered on any of them.  If you have 5 rows, and delete 3, it'll keep saying 5, even after the 2nd and 3rd delete.  Same thing when trying to trigger on table change.  But it does work from table click - at least in my testing.

0 0
replied on July 7, 2022

I guess the question comes down to if the OP is saying their function is not running at all or that it is running too soon, it was not clear from their post.

If what your saying is that the function does not run at all unless you state table click, instead of delete button click, that could be a different issue.

1 0
replied on July 7, 2022 Show version history

Works perfectly Matthew, thank you!

Also noted the code {...} button for future questions.

1 0
replied on July 7, 2022

Glad to hear it worked.

Please consider marking your question as answered, and have a great day!

0 0

Replies

replied on July 7, 2022

I appreciate the valuable input guys. I will give this a shot. Thank you to you both!

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.