[Resolved] Reset button event when the results are updated

[Author]

Posts

[abdullahA-6]

Hi,

I have a search form that has multiple selects, submit button and reset button, since I am customising which dropdown is shown based on other one is selected, when a reset button is clicked is not working as expected.

there are couple of event listener included like :

<script>
jQuery( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.form (object) The jQuery object for the View form
* data.update_form (bool) Whether the custom search form will be updated
* data.update_results (bool) Whether the custom search results will be updated
*/

});
jQuery( document ).on( 'js_event_wpv_parametric_search_started', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
*/

});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.view_changed_form (object) The jQuery object for the View form after being updated
* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
*/

});
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/

});

but I need to trigger when the reset button is clicked and results are "updated", so I can run a custom JS.

it does not work this way either :

$(function() {
$(".resetButton").click( function()
{
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {

$(function() {
// my_custom_js
});
});

});

</script>
not asking for help on the JS code.

thanks !

[abdullahA-6]

I am using : AJAX results update when visitors change any filter values

[Luo Yang]

Dear Abdullah,

I suggest you setup your custom JS codes like this:

jQuery(document).ready(function($) {
// my_custom_js
});

And test again, more help:
hidden link

[abdullahA-6]

Hi Luo,

thank you for the reply, I have something like this :

 jQuery(document).ready(function($) {
  
	window.alert("1");

});
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/

   jQuery(document).ready(function($) {
  
	window.alert("2");
       });

  });

  jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
    
        jQuery(document).ready(function($) {
  
	    window.alert("3");
      });
});

but I can only get the 1 alert, so I went and removed the whole JS code, and still won't go through the pagination at all, the pagination and the filter will only work with the refresh page option.

[Luo Yang]

I think there is a misunderstanding,
if you want to trigger custom JS codes when user enter your webpage, you can try like this:

jQuery(document).ready(function($) {
    window.alert("1");
});

if you want to trigger custom JS codes after user click AJAX pagination links of Views, you try with "js_event_wpv_pagination_completed", like this:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
    window.alert("2");
});

If you want to trigger custom JS codes after user do AJAX search of Views, you try with "js_event_wpv_parametric_search_results_updated", like this:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
    window.alert("3");
});

[abdullahA-6]

Hi Luo,

thank you that's clear now.

but I am having issue with the filter, I am not using any custom js codes for now all HTML and CSS, and I am setting it up like this :

Pagination and Sliders Settings :
Pagination enabled with manual transition and AJAX
Display the query in pages, which visitors will switch without reloading the page.

How do you want to update the results?
Let me choose individual settings manually
Update the View results only when clicking on the search button
Update the Views results without reloading the page

Which options to display in the form inputs
Always show all values for inputs

I am trying to make either the pagination or the filter works without reloading the page, I don't want the page to reload, but it keeps spinning all the time and won't refresh the results.

thanks

[Luo Yang]

For the new problem:
but it keeps spinning all the time and won't refresh the results.

That is abnormal, in case there in case there is any compatibility problem, please try this:
1) deactivate other plugins and switch to wordpress default theme, remove your custom JS codes, and test again
2) If the problem still persists, please provide a database dump file (ZIP file) of your website in below private detail box, I need to test and debug it in my localhost, thanks

[abdullahA-6]

Hi Luo, very thankful for the help, the problem was HTTP, HTTPS, since I just purchased the SSL.

this issue is resolved.

[Luo Yang]

You are welcome, and thanks for share the solutions