[Resolved] Reset Button – jQuery

[Author]

Posts

[abrahamL]

Tell us what you are trying to do? Using jQuery, show the result when the user click submits/reset.

I have multiple views on one page.
On one of the views [Global - States] - State Action, I use a basic jQuery to hide/show the result. I use frontend events: "js_event_wpv_parametric_search_form_updated", so when the form is Submitted or Resetted it will show the results. This function works just fine.

The problem occurs when I click reset on other views [Legislation - state] - Recent Legislation, the result on the previous view [Global - States] is unhiding.

Both views are utilizing AJAX.

Here's the screen recording
hidden link
---

Is there any documentation that you are following?
https://toolset.com/forums/topic/toggle-is-open-only-after-submitting-form-reset-button-fails/
https://toolset.com/forums/topic/keep-showhide-div-open-after-ajax-search-update/#post-569660
---

Is there a similar example that we can see?
---

What is the link to your site? hidden link

Global States (view# 47151)
Legislation - State (view# 17743)

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand:
- I see there is two search form available using the two different views on the following page you shared:
=> hidden link

You mean, when you click on the Reset button, you want to hide/reset the top view results as well?

[abrahamL]

Hello Minesh,

On page load, I hide the result on the top view using display: none.
When users click submits/reset on the top view, it triggers the jQuery to show the result.
--- so far it's working just fine ---

When users click reset on the bottom view, the result on the top view did not suppose to show/display.
For some reason, the reset button on the bottom view; triggers the top view to show/display the result.

hidden link
hidden link

Below is the script that I'm using on the top view:

function hide_result() {
jQuery("#global-states").hide();
jQuery("#hide-section").hide();
jQuery("#pagination-global-states").hide();
};

function show_result() {
jQuery("#global-states").show();
jQuery("#hide-section").show();
jQuery("#pagination-global-states").show();
};

jQuery(document).ready(function() {
jQuery("#btn-hide").click(function() {
hide_result();
});
});

jQuery(document).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
show_result();
});

Thank you in advance.

[Luo Yang]

Hello,

Since it is a custom codes problem, please provide a test site with the same problem, fill below private message box with test site credentials, I need to test it in a live website. Thanks

[Luo Yang]

I assume you are going to not trigger you custom JS function show_result() when user click on "Reset" button of view Legislation - State (view# 17743).

If it is, I have done below modifications in your website:
Edit view "Global - States" ID:47151, in the "JS Editor", line 20, add below JS codes:

if(data.view_unique_id == '17743-TCPID17684')return;

Please test again, check if it is fixed.

[abrahamL]

Yes, it's working like what I wanted.
May I know where you get the value 'TCPID17684'? Is it site-specific? Can I use the same info to exclude more views from triggering the jQuery?
The other views are 44304 (Statute) & 17741 (Litigation - State)

I tried with this code

 if(data.view_unique_id == '17743-TCPID17684' || data.view_unique_id == '44304-TCPID17684' || data.view_unique_id == '17741-TCPID17684')return;

With the code above, the views 17741 (Litigation - State) - tab "Key Litigation" is working.
But the views 44304 (Statute) - tab "Enacted Laws" didn't work. It still triggers the jQuery to shows results.

Thank you in advance, Luo!

[Luo Yang]

That ID is specific by View's search form, different view in different page will be different value. You can get it by edit your JS codes, from:

jQuery(document).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
...
});

jQuery(document).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
console.log(data);
...
});

Then goto front-end, for example:
hidden link
click the button "Reset", you will be able to see the values of data in your browser console window, and find the specific IDs.
see screenshot console-log.JPG

More help:
hidden link

[abrahamL]

Excellent, it's working exactly like what I wanted now.

Thank you so much for your help, Luo! I appreciate your time in helping me with this issue. I learned something new today. 👍