Sort not working after first results

Anonymous

#32259

Likewise the masonry script doesn’t load.
I’m not sure how to fix this with the provided instructions.

Ross Moderator

#32296

Hi Stephanie

The reason you are having layout / masonry issues is because you are using ajax.

If you disable ajax, I’m assuming the rest works well?

When using JS to control layouts with Ajax, the issue is that all the scripts that would normally get triggered on a regular page load don’t occur when an ajax request is performed.

If you take a look at this JS event (first question):
http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

You’ll notice there is an event for detecting when ajax content has loaded.

You must use this event to reload any scripts like your masonry script.

Thanks

Anonymous

#32394

$(document).on(“sf:ajaxfinish”, “.searchandfilter”, function(){
console.log(“ajax complete”);
//so load your lightbox or JS scripts here again
});

does not write to the console.

This is where you want to load scripts, correct?

Of the 3, only:
$(document).on(“sf:init”, “.searchandfilter”, function(){
console.log(“S&F JS initialised”);
});
writes to the console…

I’m not sure where to go from here…
-Steph

Ross Moderator

#32454

Hey Steph

That odd – I’m looking into the events now and will patch the plugin if there is a bug here.

Thanks

Ross Moderator

#33071

Hi Steph

I double checked this and no errors my side.

This is the code copied from my JS file:

$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	//so load your lightbox or JS scripts here again
});

$(document).on("sf:ajaxstart", ".searchandfilter", function(){
	console.log("ajax start");
});

Depending on where you put this code though it might not work.

Make sure that it is being places properly inside a jQuery ready function or something similar like:

( function( $ ) {

	$( document ).ready( function() {
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log("ajax complete");
			//so load your lightbox or JS scripts here again
		});
		
		
		$(document).on("sf:ajaxstart", ".searchandfilter", function(){
			console.log("ajax start");
		});
		
	} );

} )( jQuery );

Let me know how you get on.

PS just had another idea, why don’t you test with the 2015 theme? Maybe your theme is not doing something in the regular way, or the code might be added at the wrong point.

If you try the 2015 theme, pasting the above code at the very end of twentyfifteen/js/functions.js seems to work fine and the events are always fired.

Thanks

Anonymous

#33113

I cannot mimic this in the 2015 theme. The resources post type and the ajax functionality is part of the theme that I’m using. It’s not an equal comparison.
Obviously there is something in the way of this working and I need to figure it out on THIS site.

I have this exact code written into the end of the template file (near the footer of the document…I tried moving it into the head too, to no avail):

jQuery(document).ready(function($) {
		
		
		
		console.log('this is 1');
		
		$(document).on("sf:init", ".searchandfilter", function(){
			console.log("ajax init");
			//so load your lightbox or JS scripts here again
		});
		
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log("ajax complete");
			//so load your lightbox or JS scripts here again
		});
		
		console.log('this is 2');
		
		
		$(document).on("sf:ajaxstart", ".searchandfilter", function(){
			console.log("ajax start");
		});
		
		console.log('this is 3');
		
	});

I get:
this is 1
this is 2
this is 3
ajax init

…in the console. I am not having script error or none of it would work. And the sf:init event works but not the ajax ones.

Could you please look at the particular website and see if you can see what the problem might be?

http://befirst.wpengine.com/resources/
user: demo
pw: ecbef15

http://betest.wpengine.com/ is also a fresh copy of the site as a few minutes ago and still has your user if you want to go poke around…
user: demo
pw: ecbef15

Thanks.

Anonymous

#33114

This reply has been marked as private.

Anonymous

#33115

This reply has been marked as private.

Ross Moderator

#33344

Hi Stephanie

The point of testing in 2015 is to identify if there is an issue in your theme.

Perhaps you can create a test search form, that searches only posts, and uses regular categories and tags.

Test this on your current theme.

Then test this on 2015 – and add the code in I provided to the file mentioned above.

As I mentioned already, I’ve done some tests here, and the events are firing fine on all themes I’ve tested.

So if the above works in 2015 for you, then either, you are not placing the JS code in the correct place for your theme (perhaps you can ask them where to do so) or there is a conflict in the way the theme uses its JS – perhaps there is some JS that removes events from Search & Filter – preventing you from receiving those events.

Anyway, its important to test in 2015 to make this clarification.

If its still not working in 2015, then I would suggest a plugin is causing you issues – so then try to disable your other plugins and re-enable 1 by 1 to identify where the issue is coming from.

Thanks

Anonymous

#33413

Ok.

This is twentyfifteen, all plugins but S&F Pro are disabled, this is a new search form, the shortcode for the search is placed in the editor, and the jquery test code is just above the footer in page.php:
http://betest.wpengine.com/search-test/
(please see above posts for credentials on this site)

Only “ajax init” shows in the console on initial load of the page. I do see “ajax start” on the results page but not “ajax complete,” which is the function that I need to work to reload javascript.

Please look around and see if you can tell me what the problem might be. I took out variables one by one to get to this. I’ve tried everything that I can do at this moment.

Thanks for your continued support.
-Stephanie

[Author]

Posts