Question

I’m using a callback from an AJAX post request to navigate to a new page, but it is not working on Internet Explorer. My code is as follows:

$.ajax({ 
    type: "POST",
    url: phpUrl,  
    data: data,  
    async: false, 
    success: function() {       
         if (navigator.appName == 'Microsoft Internet Explorer'){   window.location.href("/step2.php")}
         else{ window.location.href = "/step2.php"}             
    },  
    dataType:'json'         

}); 

This works fine on FF/Safari/Chrome but when I test it on IE it does not work. Is there a better way of redirecting to a new page? I’m using async:false as my data was not loading on Chrome/Safari if I did not use a callback as the page would just change before the POST request was complete.

Answer 1

It’s the parentheses. href is not a function, so trying to invoke it—window.location.href("/step2.php")—is a TypeError.

Assign to href like you do on the next line, or better, use location.assign():

location.assign('/step2.php');

While you can directly assign to location‘s properties (location.href='...';) to cause the browser to navigate, I recommend against this.

Internally, doing so is just calling location.assign() anyway, and assigning to properties does not always behave the same in all browsers.

---

Regarding, async:false, never do that. If you make a synchronous XHR request, you’re doing it wrong. 8.4% of reported IE9 hangs were due to synchronous XHR blocking the browser.

Given that you have it in a callback, the assignment to location won’t happen until the POST completes, so I’m not sure what you mean by “the page would change before the POST completes.” (Did you forget to cancel a form’s submit?)