javascript ('.table').on('change', 'input', function) should only trigger when the value of the field changes

replied on July 26, 2017

Without seeing your process, I can guess that you have 2 different things going on.

1. I'll bet you have a lookup rule that fills in 5 values within your table. Each of these values will fill in an input element, and then trigger a change event for it. This would explain 5 of the change events.

2. If you added the "table" CSS class to your table, it actually gets added to the DOM in 2 places. As the change events are triggered, they "bubble up" the DOM and trigger change events at each level. The event handler you created is a delegated event handler which gets attached to both of these elements, and then each change event gets processed twice. So 5x2 events = 10 total.

The way I see it, you have 2 choices. You can make your event handler selectors more specific, or you can try to implement the new custom javascript events used in Forms 10.2 or newer.

To do the first option, I would recommend adding a class to a single field within your lookup rule, and then modify your statement to be something like $('.table tbody').on('change', '.triggerfield input', function). The tbody addresses problem #2, and the .triggerfield class addresses problem #1.

To do the second option, check this post for the syntax of the custom event handler events...

1 0

View 3 previous replies

replied on July 26, 2017

There is 5 columns, which is interesting. But my lookup is only changing 2. So even if I specify those columns I get the same issue.

Should I not be using the custom class name of "table"? I added that class as a custom class instead of using the default that forms assigns to all tables, this way the function would not effect other tables added to the form.

I got it back to just running twice by finding that the function itself was not finishing (I wish java would tell me this!). I put an alert both at the start and at the end of the function, what I found was that I got the start alert 10 times and no end alert.

When I fixed the problem that was not allowing it to end, then it started repeating less. Almost like it has a built in re-try function.

0 0

replied on July 27, 2017

Can you post a snippet of the relevant code?

0 0

replied on July 27, 2017

Agreed. Code would be helpful at this point.

Regarding the CSS Class, I don't know of a problem with the word "table" itself, just that I've found that whatever class you use actually gets added to the DOM twice (on the <li> element and the <table> element) rather than once (just on the <li> element) like it does for other types of form elements. So your event handler actually gets attached to 2 things unless you make the selector specific enough to narrow that down. That's why Laserfiche's examples of looping over table elements are usually $('.MyCustomTableClass tbody').each('tr') or something... the tbody selects out a single unique element and only adds 1 event handler.

Although it is possible to accidentally re-use class names for which Laserfiche does have pre-built styles or behavior.

1 0

replied on July 27, 2017

Ok, it turns out I was trying to figure out this same issue once before and found my easy example code.

With this code, where .input1 and .input2 are in a table with class name .table you get the alert twice. There is no reason for the function to run twice when it clearly says on any input1 change, run this function. It is like something is wrong with the definition of what a change is.

//***WHEN INPUT1 is ENTERED

$('.table').on('change', '.input1 input', function(){

  var input2 = $(this).find('.input2 input').val();
  alert(input2);
     
         
	});

1 0

SELECTED ANSWER

replied on July 27, 2017

Scott is correct: the CSS name configured on table field is actually applied to two elements, the li element and the table element. $('.table') returns two elements, that's why the function runs twice.

Use $('li.table') to avoid this for now. This looks like a bug and I'll check if this should be fixed. Sorry for the inconvenience.

1 0

replied on August 3, 2017

Thanks! I will use li.table.

0 0

Question

Question

javascript ('.table').on('change', 'input', function) should only trigger when the value of the field changes

Answer

Replies

Sign in to reply to this post.