How does making a simple loader work in SFP

Anonymous

#34098

Hi,

I was wondering, is there anymore documentation on how to make a simple loading message appear when you do a request? I have read this article (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/) but I don’t know what to do and where to place this code:

//detects the start of an ajax request being made
$(document).on(“sf:ajaxstart”, “.searchandfilter”, function(){
console.log(“ajax start”);
});

//detects when the ajax request has finished and the content has been updated
// – add scripts that apply to your results here
$(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
console.log(“ajax complete”);
//so load your lightbox or JS scripts here again
});

//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on(“sf:init”, “.searchandfilter”, function(){
console.log(“S&F JS initialised”);
});

Can anyone help me?

Ross Moderator

#34160

Hey Edward

Ok, this is more a developer feature for now until I add something via the UI to make this easier.

Essentially, what you want to do is the following:

1) Create your loader and add it to your page / site.

So as a really basic example (by no means comprehensive or complete) – edit your themes “footer.php”.

Before the closing </body> tag add the following html code:

<div class="sf-loader" style="display:none">
Loading...
</div>

This will add an element to your page to use as a loader. This will need to be customised via CSS, such as centering it on the page etc but for now thats not important.

2) Add the loader code.

In your themes main JavaScript file, scroll the to very end, and after everything else add:

jQuery(document).ready(function($) {
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		$('.sf-loader').hide();
	});

	$(document).on("sf:ajaxstart", ".searchandfilter", function(){
		$('.sf-loader').show();
	});
});

now you will see an element on your site being shown/hidden when being loaded. As mentioned you will need to style it up.

Hope that helps!

Thanks

Anonymous

#34215

Hi Ross,

Thanks for the reply. Can I add the JAVA code to the header.php file or do I need to make a new .js file and have the script load from the header.php file?

Cheers.

Ross Moderator

#34256

This code should go inside a script file (JS file).

Normally you would add this code into an already existing script file in your theme (it differs from theme to theme, so can’t advise) – but creating a whole new file and loading it in is also fine.

Just make sure when loading the script you have jquery as a dependency.

Thanks

Anonymous

#34353

This reply has been marked as private.

Ross Moderator

#34395

This reply has been marked as private.

Anonymous

#34624

This reply has been marked as private.

Anonymous

#34678

Hi Ross,

I’ve fiddled around a bit with the code. And when I load the js in the footer it all works fine.
Thanks for pointing me in the right direction.

Cheers!

Ross Moderator

#34727

🙂

[Author]

Posts