popup window blocked in ajax success handler

Question

I am trying to open a popup window to allow a user to authenticate with twitter without having to leave the page they are viewing. I have seen this technique used around the web, particularly with the Disqus commenting application. However, I am only able to get two results, either a 'Popup window blocked' message or nothing even happens.

I have tried using the approaches outlined here and here. How can I fix this?

My code currently looks like:

var windowSizeArray = [ "width=200,height=200",
                            "width=300,height=400,scrollbars=yes" ];
var url = $('.twitter_popup').attr("href");
var windowName = $('.twitter_popup').attr("name");
var windowSize = windowSizeArray[$('.twitter_popup').attr("rel")];
window.open(url, windowName, windowSize);

Answer 1

The popup blockers on the browser block the the popups when the code is executing in the script execution context.

E.g If we open a new window on an anchor click the popup blocker will not block it but if we try to open a new window using setTimeout you will see that popup blocker will block this. It is because when timeout is reached the context is now script execution context instead of user action. This is the same behavior when we try to open a new window in an ajax callback handler.

I think you are into similar such situation.

Live example

If for some reason you want to open the popup in ajax success handler itself then you can achieve it by making a synchronous ajax call. The popup will not be blocked.

Answer 2

the problem might lie in the following areas... 1. the windowSizeArray contains only a single element. 2. the code $('.twitter_popup').attr("rel") might give you some diff results than expectd because class name is used as a selector