How to add a loading gif?

Bernard R

#1455

Hey Ross.

I have everything working great.
I just need help with adding a loading gif when somebody hits the search button when using the ajax configuration. What’s the best approach for this?

Thanks again,

Bernard

Add New Note to this Reply

Ross Moderator

#1457

Hey Bernard

I’m going to hold fire on replying to this because I am hoping to do an update today which should help make this a bit easier..!

Will update you later on.

Thanks

Add New Note to this Reply

Bernard R

#1463

Awesome Ross!

Thanks…

Add New Note to this Reply

Ross Moderator

#1485

Hey Bernard

Unfortunately this did not make the cut for todays update – right now you can’t customise what happens when loading (only content fades out) but I will be adding in JS events soon so you can detect when loading starts/stops so you can apply your own styles/loaders etc..

Does this sound like something that would work?

Then you would just do something like this in your themes JS file:

$('.searchandfilter').on('beginajax', function(){

    //show custom loader

});

$('.searchandfilter').on('endajax', function(){

    //hide custom loader

});

Add New Note to this Reply

Ross Moderator

#1851

Hey Bernard, the latest update also addressed this issue, you can now hook in to two events, to find out when loading begins, and when loading finishes, so you can add any custom JS to these events to show and hide your own loader:

jQuery(".searchandfilter").on("sf:ajaxstart",function(){
	//display my custom loader!
        alert("loading start");
});
jQuery(".searchandfilter").on("sf:ajaxfinish",function(){
	//hide my custom loader!
	alert("loading finish");
});

Add New Note to this Reply

[Author]

Posts