Question

Clicking the X in a table

Forms

Updated June 2, 2020

asked on June 2, 2020 • Show version history

I have seen the other posts and have a simple piece of code that works when clicking the add but not when clicking delete.

$(document).ready(function() { 

rowcount(); 

$('.mytable').on('click', '.form-del.field', function () { 
alert("I clicked delete"); 
rowcount(); 

}); 

$('.mytable').on('click', '.cf-table-add-row', function () { 
alert("I clicked add"); 
rowcount(); 
$('#q9 input').trigger('change'); 

}); 

function rowcount() { $('.myrows input').val($('.mytable tr').length-1); } });

I have alerts in there so it tells me when I click add and delete. Add works, delete does not . I have tired both cf-table-delete-row and the other various delete syntax I can find. Anyone know what the delete row click is?

What I am doing is populating a field with the number of rows. Everytime add or delete is clicked it runs the function. Adding works great but deleting never triggers the function.

-Chris

0 0

Answer

SELECTED ANSWER

replied on June 2, 2020

Alright well after thinking on it I may have solved my own problem. Posting it on here for others to see if it works for them.

1. Add a column to the table that will be hidden with a value of =ROW(). This will put the row number into that field.

2. Have a filed outside the table and set that forumla to =MAX(table.hiddenfield). This seems to show me the max number and always seems to update correctly when adding or removing field. Even works with lookups.

0 0

replied on June 2, 2020 • Show version history

Hi Chris,

There seems to be something about the built-in delete button events that is preventing the event filtering to work like it does for the add button.

The calculation/formula approach is a valid one. Another item to be aware of is that there is a hidden "propCount" field associated with each table that tracks the rows.

I wouldn't say this is a better solution than the calculations, but another way you could do it is by tracking all clicks within the table and updating your row count based on the hidden propCount value.

$(document).ready(function(){
  $('.myrows input').val($('.propCount').val());

  $('.myTable').on('click', function(){
    $('.myrows input').val($('.propCount').val());
  });
});

1 0

replied on June 2, 2020

Thats good to know Jason, thank you. I'll keep that in mind. We like to keep JS to a minimum if possible is a solution but if we need it it seems we have it in a few ways.

0 0

replied on June 2, 2020

Glad you got something working.

0 0

Replies

replied on June 2, 2020 • Show version history

Hi Chris-

Looks like you have a typo in your delete call. Should be hyphens between the parts, not that period before "field" Should look like .form-del-field

0 0

replied on June 2, 2020

Thanks Pieter, so like the below? I updated and saved it but still wont throw the alert when clicking that x.

0 0

You are not allowed to follow up in this post.

Question

Question

Clicking the X in a table

Answer

Replies

Sign in to reply to this post.