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.

josh3736 · Accepted Answer · 2012-04-18T02:19:08.030

5

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

edited Apr 18 '12 at 02:19

answered Apr 18 '12 at 02:11

josh3736

139,160
33
216
263

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). – djq Apr 18 '12 at 02:16
I take your point about the `async` - I've removed it. Thanks for the advice. – djq Apr 18 '12 at 02:39
2

_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. – peter Mar 15 '13 at 17:51
2

@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. – josh3736 Mar 15 '13 at 18:37
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 – Vlad Pintea Sep 11 '15 at 06:20

score 0 · Answer 2 · edited Apr 18 '12 at 12:59

0

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

edited Apr 18 '12 at 12:59

answered Apr 18 '12 at 02:05

Chris Li

3,715
3
29
31

2

hmmm, it's fine on everything except IE! Do you have any thoughts on why it does not work on this browser? – djq Apr 18 '12 at 02:06

score 0 · Answer 3 · answered Nov 20 '13 at 10:47

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'         
});

IE incompatability with window.location.href

3 Answers3

Linked