IE incompatability with window.location.href

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.

Dauphin

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?)

Widen

strange. location.assign("/step2.php"); is not working on IE either, but does work on FF/Safari/Chrome. My original attempt at using it as a function was based on the documentation that I read (that @Hexxagonal referred to also). – Dauphin

I take your point about the async - I've removed it. Thanks for the advice. – Dauphin

Never is a strong word. It is sometimes necessary and useful for synchronous ajax. However, your point is well taken. And in cases where blocking is necessary, developers should take care to visibly show that something is still happening, i.e. an ajax loader gif. – Harmattan

@peter: This is a case where I'm comfortable with the word never. The point is that if you use synchronous XHR, you can't show a loader gif because the XHR request blocks your page from rendering. I honestly think there's no situation where async XHR can't be used; and there are too many downsides to sync XHR to justify using it over async. – Widen

I used it in mix with window.location.href...thought of it as a fallback for ie, and it made my issue go away. It redirects properly now, instead of fumbling through other scripts – Laureen

Answer 2

window.location.href = "/step2.php" is just fine.

Weddle

hmmm, it's fine on everything except IE! Do you have any thoughts on why it does not work on this browser? – Dauphin

Answer 3

IE only like full url.

var fullURL = 'http://www.your_site.com/step2.php';

$.ajax({ 
    type: "POST",
    url: phpUrl,  
    data: data,  
    async: false, 
    success: function() {

        window.location.href(fullURL);

    },  
    dataType:'json'         
}); 

Downpipe

Answer 4

';

$.ajax({ type: "POST", url: phpUrl,
data: data,
async: false, success: function() {

    window.location.href(fullURL);

},  
dataType:'json'         

});

Kwh

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Plano