16

It will be more easy for me to explain the problem if I just show you that example -> http://jsfiddle.net/RU2SM/
As you can see there are 2 buttons, one called'AJAX' and one called 'Direct'... So if you click on 'Direct' it opens window (new tab on Chrome) but if I try to make window.open() on AJAX success handler, it doesn't work same way.
I'm sure that the problem is from AJAX but I have no idea how to fix it.
Will appreciate any good ideas. Thanks

β.εηοιτ.βε
  • 33,893
  • 13
  • 69
  • 83
T1000
  • 2,909
  • 7
  • 36
  • 53
  • possible duplicate of [window.open(url) different behavior - same code, different timing](http://stackoverflow.com/questions/9793774/window-openurl-different-behavior-same-code-different-timing) and [extjs 4.0 inconsistent window.open() behavior when called within Ext.Ajax.request()](http://stackoverflow.com/questions/10049172/extjs-4-0-inconsistent-window-open-behavior-when-called-within-ext-ajax-reques) – Saket Patel Apr 19 '12 at 07:32

4 Answers4

33

This works like a charm:

// Direct window.open()
$('#btnDirect').on('click',function(){
    window.open('http://google.com')
})
var success = false;  //NOTE THIS

// AJAX window.open()
$('#btnAJAX').on("click", function(){
    $.ajax({
      url: "/user/login/",
      context: document.body,
      async:false,   //NOTE THIS
      success: function(){  //THIS ALSO CHANGED
         success = true
      }
    });
    if(success){ //AND THIS CHANGED
      window.open('http://google.com')
    }
})

What this does is when the Ajax call is success it sets the variable success to true.
The async:false propperty makes sure that the if statement is fired after the Ajax call is completed.
So the window.open is fired in the same circumstances as your direct link.

Rick Hoving
  • 3,585
  • 3
  • 29
  • 49
  • 1
    There are some pitfalls with non-async requests, you shouldn't use them if there can be any delay with the page you're requesting. From the [jQuery documentation](http://api.jquery.com/jQuery.ajax/): "Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active." – Gareth Apr 19 '12 at 07:38
  • That is true, you have to be careful when using this solution, but it's the only way (for as far as I know) to execute both functions in the same circumstances. Because even if you allow pop-ups with the Ajax version it creates a pop-up, it does not open another tab like the direct call. I don't know exactly why there is a difference in behavior, but this seems to do the trick. – Rick Hoving Apr 19 '12 at 07:45
  • Thanks, as you say it "works like a charm" :) To prevent long freeze of the browser I have added timeout=2000... – T1000 Apr 19 '12 at 07:52
  • Keep in mind that if you add a timeout=2000, and for some reason the Ajax call takes longer than 2 seconds the window will never open. Perhaps an else statement that resets the timer? or a failure property on your Ajax call which makes the timer not reset. – Rick Hoving Apr 19 '12 at 08:28
  • 1
    FYI this does not work anymore with Chrome Version 30 or IE 10.0.4 – Jazaret Oct 08 '13 at 21:23
15

The issue is that browsers will often block window.opens unless they're called in direct response to a user action. That's why your click handler works (a click is a user action) but your AJAX handler doesn't.

One solution is to open the window during the initial click action, then update its location on AJAX success (or close it again on AJAX failure).

Otherwise you'll have to get the user to explicitly allow popups from your domain in their browser.

Gareth
  • 133,157
  • 36
  • 148
  • 157
  • 1
    Yes, this is also solution but I need to open a window ONLY if there is some specific information in the responce... so this is not good solution for me, but probably will be helpful for someone else (1+) – T1000 Apr 19 '12 at 07:53
1

as an addition it is also worth mentioning that using async: false and then calling window.open works in chrome and firefox but can cause trouble in safari... it doesn't even give an info that a popup was blocked

Tobias Krogh
  • 3,768
  • 20
  • 14
1

Better way implement any logic after success of ajax call, there is an event fired on every ajax call execution i.e. $.ajax.Request.done and $.ajax.Request.fail. $.ajax.Request.done(function(){ if(success){ // Implement logic } });

zhyder
  • 21
  • 2