History API – Duplicate entries when ajax refreshing page?

Anonymous

#34218

Hi Ross

I have hit a problem with s&f js and my djax.js (ajax page refreshing)

Both your js script and djax.js use history api and unfortunately it appears that both scripts are trying to add an entry to the browser history at different points as the page changes.

Before I use s&f within the site, my ajax page refreshing js just creates the normal singular entry when navigating between pages. Perfect.

However after I use any filter in my site, s&f adds an entry to the browser history (obviously) but then I change page and my ajax page refresh also adds an entry for the current url. Not good.

Also, after using the filter, any page I navigate to using normal nav menus etc. ends up with two history entries in the browser. It’s like s&f is still actively adding history, even though the action has not come from a s&f filter?

I will mention that I am using

if ($(‘.searchandfilter’).length) {
$(“.searchandfilter”).searchAndFilter();
}

during my ajax page reload to re-init any s&f instances in my page. I am thinking this probably isn’t helping but I can’t see another way round to re-init the filters.

Any ideas? I really need this one fixed and I am really confused. 🙂

Many thanks for your time

Sarah

Ross Moderator

#34259

Hi Sarah

I’m not sure the exact issue, but I guess I would disable “enable bookmarkable URLs” – as this is the option which controls the URL updating.

If you disable it I’m sure there will be no issues.

I’ll have to also double check to see if anything strange is happening when using $(“.searchandfilter”).searchAndFilter(); multiple times, in case multiple events are being added by mistake

Thanks

Anonymous

#34270

Funnily enough, I’ve already tried enable disabling “enable bookmarkable URLs” and unfortunately it doesn’t resolve the issue and I’ve just tried it again to be sure and same problem. It does look like the issue is when loading $(“.searchandfilter”).searchAndFilter(); multiple times

I’m not 100% sure but I don’t remember having this issue in the previous version of s&f. However I was using $.getScript instead of $(“.searchandfilter”).searchAndFilter(); when my pages reloaded

I only had to change to $(“.searchandfilter”).searchAndFilter(); because the $.getScript didn’t work with the latest version of s&f. One of my s&f forms, which is outside the body, kept loading multiple times if I used $.getScript but $(“.searchandfilter”).searchAndFilter(); seemed to solve that. Unfortunately, I then discovered the issue with the history.

Please let me know if you want access to my site.

Anonymous

#34355

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

Ross Moderator

#34406

Hi Sarah

I’ll be looking into this over the weekend.

Thanks

Ross Moderator

#34527

Hi Sarah

Ok so I did some testing (and double checking).

If, on both your search forms, you have ajax enabled, and “update results URL” disabled – then there is no way that the window.history object is updated.

The fact you are logging the object, on sf:init doesn’t mean its Search & Filter thats updating the URL.

I imagine, when your ajax completes, and you run .searchAndFilter, that you see the init log twice for each of the two search forms on your page?

Just to show some additional usage in case it helps with debugging:

$(document).on("sf:init", '.searchandfilter', function(e, data) {
	
	var currentState = history.state;
	
	console.log("Search Form with ID "+data.sfid+" was init, this was the state:");
	console.log(currentState);
	
	/*if(data.sfid==12403)
	{
		//do stuff for thsi search form, or check things
		console.log("Doing stuff for search form 12403");
	}*/
	
});

Now if you check your logs, does the history state change between each init for each search form?

If it doesn’t (which I’m thinking), then S&F isn’t doing anything to your history when it sets up a search form.

…

I did some additional testing – simply running $('.searchandfilter').searchAndFilter();, when S&F is already loaded will never update the results URL. I have a button in my test environment, which when clicked runs the searchAndFilter() function.

No matter how many times its add S&F, nothing every happens with the history.

Now one thing I’m not sure about from what you’ve written above, which sounds incorrect to me is that you mention you have one search form outside of the body?

If you mean outside of the <body> tags, then you shouldn’t be doing this – everything should be inside the body tags, and shown/hidden with css & javascript.

Do you have a link I could look at to see this issue?

Thanks

Ross Moderator

#34528

PS, the event "sf:init" should only fired once, when the page loads or .searchAndFilter() is called, in the current version of S&F, it is also incorrectly firing whenever S&F does an ajax request – this will be fixed and removed in the next version.

Thanks

Anonymous

#34534

This reply has been marked as private.

Ross Moderator

#34571

This reply has been marked as private.

Anonymous

#34647

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. 🙂

[Author]

Posts