Hi Ross

Further to my previous post, I have investigated the problem further and there is almost certainly an issue using $(“.searchandfilter”).searchAndFilter() and multiple instances of S&F.

I have one outside the body in a sliding panel and one in a regular sidebar. When my page ajax refreshes, I call your $(“.searchandfilter”).searchAndFilter() on the page load to re-init the forms

After some further reading, I decide to check history state on sf:init as below…

$(document).on("sf:init", '.searchandfilter', function() {
	var currentState = history.state;
	console.log(currentState);
});

and behold two url entries in the console originating from the above code (eg. line 99) after my ajax page reload.

My s&f forms obviously need to be re-initialised after an ajax page load but I don’t know how to prevent the duplicate entries. I am assuming anyone using a similar configuration to mine (i.e ajax page refreshing etc.) will experiencing the same or similar issue? I am not sure this should be happening as you indicated in your first post.

Would you be able to provide a resolution to this?

Many thanks for your time

Sarah Richardson

Thank you again Ross for your response.

I just thought I would let you know that I have now found the culprit but it wasn’t easy to find. If you hadn’t helped me learn the debugging methods I never would have found it.

Originally I was doing this….

$(document).on("sf:ajaxfinish", '.searchandfilter', function(e, data) {
		/***Update body classes after filtering***/
		$.get(window.location.href, function(data) {
			data = data.replace(/(<\/?)body( .+?)?>/gi, '$1NOTBODY$2>', data);
			var nobodyClass = $(data).filter('notbody').attr("class");
			$('body').attr("class", nobodyClass);			
		});
		/***Add djax to links after filtering***/
		$('html').djax('#content', ['#', 'delete', 'wp-login', '?cart-item'], transition);
		init_scripts();
		get_scripts();
		ajax_loader.fadeOut("slow");
	});

but it appears that using $(‘html’).djax(‘#content’, [‘#’, ‘delete’, ‘wp-login’, ‘?cart-item’],transition); in sf:ajaxfinish was actually causing the problem. So after lot’s of trial and error I came up with a solution that was more focused on the s&f target rather than applying the djax links to the whole site again which had already been initialised earlier in my script. The below is the result….

$(document).on("sf:ajaxfinish", '.searchandfilter', function(e, data) {
		/***Update body classes after filtering***/
		$.get(data.targetSelector, function(data) {
			data = data.replace(/(<\/?)body( .+?)?>/gi, '$1NOTBODY$2>', data);
			var nobodyClass = $(data).filter('notbody').attr("class");
			$('body').attr("class", nobodyClass);			
		});
		/***Add djax to links after filtering***/
		$(data.targetSelector).djax('#content', ['#', 'delete', 'wp-login', '?cart-item'], transition);
		init_scripts();
		get_scripts();
		ajax_loader.fadeOut("slow");
	});

Again I never would have found it without your help so I can’t thank you enough for your time. 🙂