Lookup Filter Blocks Javascript Execution

By: John Langlois | Asked: 09/19/2022
ForumsCategory: Code SnippetsLookup Filter Blocks Javascript Execution
John Langlois asked 2 years ago
I have a payment form that looks up the division, school and students to enable a coach to pay fees.
The students are listed with checkboxes.  I need to count the selected checkboxes, in case not everyone presented is chosen. I am using the javascript suggested at https://formidableforms.com/knowledgebase/javascript-examples/
It works until the last filter is applied.  Then it stops counting. Has anyone had this experience?
1 Answers
Victor Font answered 2 years ago
I don't know what you mean by "last filter" in this context. jQuery doesn't use filters. Filters are part of the WordPress hooks API. If any jQuery script stops working because of a coding problem, it stops all jQuery scripts from working. The fatal error is recorded in the browser's console. Open the inspection tool to see the error. It could be coming from anywhere and may not even be related to Formidable.
John Langlois replied 2 years ago

Thank you for your insight. Filter is an unfortunate choice of words by Formidable because it does confuse the matter with the WordPress API. Nevertheless, their "Look-up" fields provide a way pre-fill values based upon a previously filled field. In our case our first look-up field provides a list of schools with "high-school" as a defining moment. The list of high schools produces students. The form works really well at delineating the students, complete with checkboxes that the Javascript code will count.

However, we don't want to show all 300 + students. Therefore, we use another lookup filter to whittle them down to the students under the supervision of a selected coach. They then appear in a list of checkboxes.
When we had all 300 student checboxes visible, the Javascript would count the number of boxes the user checked.
When we apply the last filter, the counter stops working. The console does not show an error.
I would be willing hide a field to keep up with the count, but I hate not knowing why the code just quit.

Victor Font replied 2 years ago

It sounds like you might be running into an Ajax issue. Ajax is complicated and difficult to troubleshoot. If the lookup fields are cascading correctly and they are using Ajax to populate the drop downs, it's likely that the data in the final dropdown field is not being recognized by the Document Object Model (DOM). The DOM is constructed when the page is loaded. For any jQuery snippet that interacts with form data, all the form data it interacts with needs to be loaded when the page is initialized otherwise the jQuery fails to "see" new data added through Ajax. If that's the case, jQuery needs to reinitialized when the Ajax.complete() event fires. I don't know for certain if this is what's happening in your case, but from the symptoms you describe, it sounds like it. You may want to take a look at this article to get an in depth look at what I'm talking about: https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community