Geek Answers Handbook

Statechange load causes multiple loads of the same page

It looks like this line in the statechange event:

$('#content').load(State.data.home_page);

... causes the same page to load at the same time, which leads to crashes on my site. What can I do to fix this?

enter image description here

 (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);

Update

So, I found out that .pushState actually calls statechange .

So basically, I think this is what happens:

  • User clicks .site-title a
  • pushState() is called, which calls statechange , which loads part of the page.
  • At the same time, it is also called loadHome() , which loads the same thing.

I see, so I get multiple instances of the same page. I thought that statechange is only called when the user clicks the back button in the browser. Such things clear, but I still do not understand how to move on. I am not sure what to replace this .load line in the .load event, assuming the culprit.

+7
jquery ajax browser-history html5-history
source share
1 answer

When you click on a link, the following happens:

  • You push a new state onto the stack
  • Status change event is triggered
  • The event triggers the loading of data.home_page
  • loadHome is called
  • loadHome initiates loading

As you can see, steps 3 and 5 are redundant.

Can you bind to a popstate event popstate ?

+1
source share

More articles:


All Articles