Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Popup blocked when created in jQuery ajax success callback

Tags:

jquery

ajax

popup

Google Chrome seems to be blocking a popup I am creating via jQuery. After some investigation, it appears to be an issue with calling window.open in the success event of an ajax call. Is there a way around this? My jQuery ajax call returns the URL to be opened. So I am bit stuck.

It works if I place the window.open outside the ajax call; but, inside (i.e. in the success event) it is blocked. I think it is something to do with CONTEXT but I am unsure.

Here is what I have:

     window.open("https://www.myurl.com");  // OUTSIDE OF AJAX - no problems 
                                            // with popup

     $.ajax({
        type: "POST",
        url: "MyService.aspx/ConstructUrl",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            // Normally loads msg.d which is the url returned from service
            // static url below is for testing
            window.open("https://www.myurl.com");  // THIS IS BLOCKED
        },
        error: function(msg) {
            // alert(error);
        }
    });
like image 346
mark smith Avatar asked Jul 06 '09 12:07

mark smith


People also ask

What does success mean in AJAX?

What is AJAX success? AJAX success is a global event. Global events are triggered on the document to call any handlers who may be listening. The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds.

Is AJAX successful deprecated?

The parameter is not being deprecated, the success method is. You can continue using success: function re-read it carefully.

What is difference between success and complete in AJAX?

success() only gets called if your webserver responds with a 200 OK HTTP header - basically when everything is fine. However, . complete() will always get called no matter if the ajax call was successful or not - maybe it outputted errors and returned an error - . complete() will still get called.

What is callback jQuery AJAX?

jQuery - ajaxSuccess( callback ) Method The ajaxSuccess( callback ) method attaches a function to be executed whenever an AJAX request completes successfully. This is an Ajax Event.


2 Answers

As several people have pointed out, the accepted answer no longer works. Based on the comment by aidiakapi, I used a workaround by first opening the window.

window.open("about:blank", "myNewPage");

Then doing the ajax business and in the done() function, open the page with that name.

window.open("/foo.html", "myNewPage");

This also doesn't matter if you do it async or not.

like image 184
Andrew Avatar answered Oct 16 '22 22:10

Andrew


Simply open the new window in the success callback:

 $.ajax({
    type: "POST",
    url: "MyService.aspx/ConstructUrl",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        window.open("https://www.myurl.com"); 
    },
    error: function(msg) {
        //alert(error);
    }
});

Note you might have to set $.ajax's async option to false for that, otherwise the code following the $.ajax call could be evaluated before the response is received.

like image 33
karim79 Avatar answered Oct 16 '22 20:10

karim79