Run javaScript function when delete row is clicked

asked on July 10, 2018 • Show version history

I need a hand figuring this one out. I have tried every combination of selector, but can't seem to run a function on click of .form-del-field.

What is weird is that even if I select the entire row, it won't run on click of the delete 'X'.

Here are combination I have tried:

  $('#q34').on('click', 'a', checkPCardCheck);
  $('#q34').on('click', 'tr td:last-child a', checkPCardCheck);
  $('#q34').on('click', '.cf-delete-field', checkPCardCheck);
  
  //the ones below works the first few then stops working
  $('#q34 .form-del-field').on('click', checkPCardCheck);      
  $('.registrationTable .form-del-field').on('click', checkPCardCheck);

checkPCardCheck if a variable that is a function. It works fine on click of Add Row (.cf-table-add-row). There is only one of them and it exists outside of the body of the table, so it is a little different:

$("a.cf-table-add-row:contains('Add Row')").on('click', checkPCardCheck);

I have reached the limit of my javaScript troubleshooting.

Thank you in advance!

Chris

EDIT: I found this post that has helped:

https://answers.laserfiche.com/questions/115543/Forms--run-javascript-when-row-is-deleted

0 0

SELECTED ANSWER

replied on July 10, 2018

Chris,

The problem you are probably having is that the event handlers are being assigned when the document first loads, and at that point only some of the rows exist.

When you add new rows, they do not have the event handler. In order to do what you are attempting, you would also need to assign a handler to the "Add" row button to assign handlers to the new rows.

Alternatively, you could assign the click event to a parent element and catch it when it bubbles up from your target objects.

For example, add a custom CSS class to your table like "myTable" then add the following code.

  $('.myTable table').on('click','.cf-table-delete',function(){
    alert('row deleted');
  });

This assigns the event handler to the table instead of the button itself, but it only triggers when the event bubbles up from the delete button so you get the behavior you want without having to reassign everything each time a user adds a new row.

4 0

View 3 previous replies

replied on July 10, 2018 • Show version history

Thanks for the clarification Jason. I assigned a class to all the tables I needed it to run on. I ended up with this in case it can help someone:

  $('.optionTable').on('click', '.form-del-field, input[type="checkbox"], .cf-table-add-row:contains("Add Row")',  function(){
    eachLoadLast();
    eachTablesOnLoad(); 
  });

An interesting thing was if .cf-table-add-row (add a row) is clicked, only match it if the text is "Add Row". I had another .cf-table-add-row somewhere else for a collection. This omits the collection.

Thanks again.

0 0

replied on July 10, 2018 • Show version history

Something to note in case you are using a mix of both is that Tables and Collections use different classes for their buttons.

Tables use

cf-table-add-row
form-del-field AND cf-table-delete

Collections use

cf-collection-append
cf-collection-delete

1 0

replied on July 11, 2018

Great reference Jason. I am sure that will be helpful to someone in the future.

I am running 10.2 and the classes on my collection for add a new item to the collection are:

cf-table-add-row
form-q

I don't see:

cf-collection-append
cf-collection-delete

What do you think is going on there?

0 0

replied on July 11, 2018

It is possible that they were changed in 10.3 (the version we're running), but are you sure it is a Collection and not a Table? I could have sworn that those were the same in the previous version as I have a form that relies on functionality similar to what you required.

0 0

replied on July 11, 2018

No, you are 100% correct. My error. I thought the field I checked with was a collection. Surprise! - it is just a table. Sorry for the confusion.

Thanks

0 0

replied on August 13, 2021

Thanks, that was exactly what I was looking for, works for me!

1 0

Question

Question

Run javaScript function when delete row is clicked

Answer

Replies

Sign in to reply to this post.