Widget on homepage/EDD and ajax?

Anonymous

#29924

Hi Ross,

I am having an issue when using a S&F sidebar widget in the homepage that points to my EDD shortcode.

The page redirects with ajax as expected and displays results in the assigned container but the sf:ajaxfinish function never seems to happen and my loader keeps spinning/scripts don’t seem to finish reloading? It’s like it doesn’t know that the form has finished?

I have a S&F form in a header menu that is never reloaded, as I am ajax page refreshing, and that works just fine so I am a bit confused.

Any ideas how I can get round this? I know it is something to do with the way I am trying to do it rather than a bug but I cannot seem to find a way round it?

Kind Regards

Sarah Richardson

Ross Moderator

#29994

Hey Sarah

Do you have a link I could look at?

Thanks

Anonymous

#30002

This reply has been marked as private.

Ross Moderator

#30081

Hi Sarah

Ok I see the issue.

Basically, your theme uses Ajax to load its different pages.

Now, the issue with this is, when you load the homepage, everything is fine.

It recognises S&F, and also knows that the current page is not the search results page. So the initial interaction is fine, the page redirects (which is then actually handled by your theme and forced into an ajax request).

Then you have a couple of issues.

The first interaction with S&F from the homepage is not actually an ajax request (yes your theme makes it ajax, but S&F doesn’t, so S&F doesn’t fire any ajax related events). Its a standard redirect. So you would be better off listening for the S&F “sf:init” event.

However this leads on to the next problem. While doing its own special kind of Ajax request, yourtheme just destroyed the instance of S&F that was on the page, loaded the next page (and loaded the next instance of S&F), but the scripts for Search & Filter didn’t reinitialise automatically on the next page – so there is no JS loaded and the form will not work correctly.

You must re-initialise the S&F JS when your theme changes the page – and lands on the filter screen.

Now I have no idea how your theme is doing the loading, so its something you’ll have to get from them (they should have Ajax Events for something like this), but the code to reinitalise S&F when the page has reloaded (via your themes ajax) would be:

$('.searchandfilter').searchAndFilter();

Hope that helps.

Anonymous

#30091

This reply has been marked as private.

Ross Moderator

#30258

Hey Sarah

I’m afraid I’m not sure where to put it in your theme.

Search & Filter JS is created as a jQuery plugin and then is initialised via:

jQuery('.searchandfilter').searchAndFilter();

You can do this on any form or html loaded independently from the JS – so as long as you are calling this function after the new html/ajax content has been loaded and rendered, it should work.

I’m afraid thats about all I can suggest – and check for any JS errors in the console.

Thanks

[Author]

Posts