It appears that this line in the statechange
event:
$('#content').load(State.data.home_page);
...is causing the same page to load multiple times which is resulting in glitches on my site. What can I do to fix this?
(function($) {
function loadHome() {
$('#content').load(site.url + '/ #primary', function() {
$(this).fadeIn(50);
});
}
// User event
$('.site-title a').on('click', function(e) {
e.preventDefault();
var newData = { home_page: site.url + '/ #primary' };
History.pushState(newData, site.title, site.url);
loadHome();
});
// History event
History.Adapter.bind(window, 'statechange', function(){
var State = History.getState();
$('#content').load(State.data.home_page);
});
})(jQuery);
Ok, so I learned that .pushState
actually calls statechange
.
So basically, I'm thinking this is what's happening:
.site-title a
pushState()
is called which calls statechange
which loads the part of the page.loadHome()
is also called which loads the same.I can see that is why I am getting multiple instances of the same page. I thought statechange
is only called when the user clicks the back button on the browser. That kind of clears things up, but I'm still at a loss as to how to move forward with this. I'm not sure what to replace that .load
line with in the statechange
event, assuming that's the culprit.
When you click the link the following happens, in order:
data.home_page
loadHome
is calledloadHome
initiates a loadAs you can see, steps 3 and 5 are redundant.
Can you instead bind to the popstate
event?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With