[Resolved] Ajax loader on result view

[Author]

Posts

[stephaneB-5]

Hello,
is it possible to put a loader (like for filters) in the result view when it is generated in ajax ?

Thanks in advance,
have a good day

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Hello and thank you for contacting the Toolset support.

Well, that's possible, but it is not an option that you can select on the view's setting. It will require custom Javascript code.

We add the AJAX loader during the search as an indication for the user that a search is in progress, and also to block him from choosing another filter while the search is still in progress.

Toolset Views trigger different Javascript events during their lifecycle. You can start your AJAX loader when the search starts and stop it when the search completes. You can read about it in this article https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

If you are using Blocks to build the view, the events button does not exist there yet. These are all the views events that you can use:

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 ).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
	*/
	
});

I hope this helps. Let me know if you have any questions.

[stephaneB-5]

Hello,

I don't understand how this code works or in which part I should put it.
Indeed to make the loader, I had created a div in fixed but I can't display it when the search is launched.

Can you help me ?

Thanks in advance

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Let's say the div that you created for the loader has an id="my-loader", you can display it and hide it using jQuery's .hide() and .show(). You will show it when the search starts, and hide it when the search completes.

jQuery( document ).on( 'js_event_wpv_parametric_search_started', function( event, data ) {
     jQuery('#my-loader').show();
});

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
     jQuery('#my-loader').hide();
});

You may also want to use it for pagination too:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
   jQuery('#my-loader').hide(); 
});

Does it makes sense?

Otherwise, please provide more details. A URL where we can see the view? The div that you have created? What you have performed so far?

[stephaneB-5]

Thank you !
It works.
Have a nice day

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+01:00)]

Thank you for your feedback. I am glad I could be of any help.