Search code examples
jqueryajaxasp.net-mvchtmlbrowser-history

Duplicate Calls When Calling History.pushState


We use Ajax to POST updates to a form, the server takes that POST, applies the changes to the DB, and then redirects the client browser to the next form page (think of a wizard).

The 302 & GET for that page is handled by Ajax automatically so we send back a Json response from the server which includes not only the HTML for the new page (the form) but also the location/URL to the new page. In the ajaxSuccess callback we then call history.pushState to update the URL and the browser history. Now, all of this works just great BUT there is one issue. Using Fiddler and Chrome (latest) and IE (latest) dev tools we can see that whenever we call history.pushState that actually causes another request to the same page to be executed. We do not see this on FireFox (latest).

Here is the code. that.ajaxSuccess = function(data, status, xhr) { history.pushState(null, '', data.Location.toLowerCase());

<>

I was not expecting history.pushState to ever force the browser to do a refresh/request to the server so this really caught me off guard.

Has anyone seen this before or know what is going on here. I am thinking we must be doing something wrong here as I am sure this would be a huge issue for others and frankly I have not see anything on the web that would indicate this issue is common.

I would really appreciate some help here. This is obviously a huge deal for a number of reasons...


Solution

  • We located a code path in our javascript that was causing the request to occur so it was not the history API itself however we were seeing an event get raised from this history api on Chrome and IE which was causing our event handler to be called which is where our request was being sourced. The event handler's purpose was to deal with the back/forward button being selected in the browser and then executing the request via ajax.