How to put a custom image or icon loader during ajax loading

Anonymous

#87250

Hello,

When you set the ajax mode, and make a search an opacity background appears for some seconds.

Is it possible to replace it with an image or an icon loader, to inform the user that the search is processing?

Thanks for your help,

Best Regards,

Trevor

#87323

Hi

When S&F is updating, I think the results container has its opacity set by javascript. This is hard coded into the plugin, so it would need to be an additional feature for us to add. It may well already be on our request list for V3, but, just in case, do you want me to move this thread into that forum?

Anonymous

#87510

Ok,

do you know how I can code it quickly and easily to integrate it into the existing code?

I found the 2 lines to modify in “search-filter-build.js” :

self.$ajax_results_container.animate({ opacity: 0.5 }, “fast”); //loading
self.$ajax_results_container.stop(true,true).animate({ opacity: 1}, “fast”); //finished loading

How can I code javascript from there to put css code for displaying an icon loader?

Thanks for your help?

Best

Trevor

#87634

Hi

I have no idea. Hacking the core files is not a good idea, as updates will simply wipe the changes. I can add this general topic to the feature request list, if you want, for consideration for V3, but, other than what I have already given, I am out of ideas.

Trevor

#87644

Hi.

Ross tells me it can be done. Rather than repeat what he has said before, I think these two threads might help:

https://support.searchandfilter.com/forums/topic/loading-message/

https://support.searchandfilter.com/forums/topic/display-a-loading-icon/

Anonymous

#87759

This reply has been marked as private.

Anonymous

#87762

This reply has been marked as private.

Trevor

#87790

Is the spw_loader class attached to something?

Anonymous

#87872

This reply has been marked as private.

Trevor

#87882

You would need to add a div to the page that has that class attached, where by default it is set to display: none in CSS. You could do this on every page by adding it to the footer.php file of your theme, as a PHP echo command, and add the css in whichever way your theme allows you to.

[Author]

Posts