[Resolved] Prevent Search from being triggered

[Author]

Posts

[nicholasM]

I added the following on my custom filter to make a selection required, the alert works, but inside the if statement I need to prevent the results from refreshing/updating?

[code]
jQuery( document ).on( 'js_event_wpv_parametric_search_started', function( event, data ) {

var inc = 0;
jQuery('[name="wpv-payment"]').each(function () {
if (jQuery(this).is(':checked')) inc++;
});
if (inc == 0) {
alert('Please Choose a payment type');
}

});
[/code]

[Luo Yang]

Dear nicholas,

Since it is a custom JS codes question, I need to duplicate same problem and debug the codes in my localhost:
How do you setup the custom field "wpv-payment"? is it a custom checkboxes field?
How do you setup the custom search form of the view? Are you using the setting "AJAX results update when visitors click on the search button"?

[nicholasM]

wpv-payment is a Radio button filter with no default option added. Yes I am using "AJAX results update when visitors click on the search button"? So I just need to add a bit of code to that script that will prevent the AJAX from reloading.

[Luo Yang]

Please try to modify your JS codes as below:

jQuery( "input.wpv-submit-trigger" ).click(function(e) {
  
	var inc = 0;
	jQuery('[name="wpv-payment"]').each(function () {
		if (jQuery(this).is(':checked')) inc++;
	});
	if (inc == 0) {
		alert('Please Choose a payment type');
		return false;
	}
  	return;
});

More help:
hidden link
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

[nicholasM]

This appears to do the same thing, the alert is fired on click of submit button, after hitting ok your results still update. I need to prevent the Ajax search results from updating on submit I need to break the "js_event_wpv_parametric_search_triggered" function if the select isn't checked.

[nicholasM]

one thought I had was to create my own submit button shortcode that runs my check function and triggers the ajax function if is :checked ?

[Luo Yang]

I tested above JS codes in my localhost, it works fine, since it is a custom JS codes question, please provide a test site with same problem, also point out the problem page URl and View form URL, I need to test and debug it in a live website, thanks

[nicholasM]

I can send you login credentials to a dev server, how do I send that hidden to public?

[Luo Yang]

I have enabled the "private detail box", please please provide a test site with same problem, also point out the problem page URl and View form URL, I need to test and debug it in a live website, thanks

[Luo Yang]

Thanks for the details, I am checking it in your website, will feedback if there is anything found

[Luo Yang]

You are right, the JS codes does not work in your website, but "js_event_wpv_parametric_search_triggered" works like an action, it will not be able to prevent the Ajax search results from updating on submit.

I tried the thought you mentioned above:
https://toolset.com/forums/topic/prevent-search-from-being-triggered/#post-564418
thought I had was to create my own submit button shortcode that runs my check function and triggers the ajax function if is :checked ?

Here is detail steps
1) Edit the view, in section "Filter Editor", display another button, and hide the submit button:

<div class="FilterSubmit"><button class="my-submit-trigger" name="wpv_filter_submit1">Submit</button><span style="display:none;">[wpv-filter-submit]</span></div>

2) Modify the JS codes as below:

  jQuery(document).on('click', 'button.my-submit-trigger', function(e){
  
  
    var inc = 0;
    jQuery('[name="wpv-payment"]').each(function () {
      if (jQuery(this).is(':checked')) inc++;
    });
  
    if (inc == 0) {
      alert('Please Choose a payment type');
      e.preventDefault();
    }
  
   jQuery('input.my-submit-trigger').click();
  
  });

Please test again, check if it is what you want. and you will need to style the button manually.

[nicholasM]

Ok, this works great and I am able to expand it for what I need as a final solution, however I have one issue this has caused. I have some scripts running inside the js_event_wpv_parametric_search_results_updated function, and these are not triggered with the new button. I added a simple Alert in the view inside this function for you to see, it will run on reset but not on the new button. How can we make sure this function runs with our new button?

[Luo Yang]

You will need to enable the AJAX parameter search feature of the view, for example, edit the view "Care Assist", in section "Custom Search Settings", change the option "When to update the Views results" from:
Reload the page to update the View results
To:
Update the Views results without reloading the page

It will trigger the event "js_event_wpv_parametric_search_results_updated "

[nicholasM]

This is what the setting is set at, If you login you will see this and the js alert I added in the view, however the event is only running on reset not using our new submit button.

[Luo Yang]

I have modified the JS codes to below:

jQuery(document).on('click', 'button.my-submit-trigger', function(e){
    var inc = 0;
    jQuery('[name="wpv-payment"]').each(function () {
      if (jQuery(this).is(':checked')) inc++;
    });
  
    if (inc == 0) {
      alert('Please Choose a payment type');
      //e.preventDefault();
      return false; // added this line
    }
  
   jQuery('input.wpv-submit-trigger').click();
  }); 

Please test again, check if it is fixed or not, thanks