Launching a legitimate pop-up window on user click

Question

Hi,

I know there are many threads about how to defeat pop-up blockers. In this case, I'm not really trying to do that. By default, browsers do not block -all- pop-ups. Legitimate ones such as when users click on it, are allowed. This is a good test: http://www.popuptest.com/goodpopups.html (works in IE, Firefox, Chrome, Opera)

How the above test site allows legitimate pop-up windows is by directly coupling the onclick event to the launch of a new window.

In my case, I can't just launch the pop-up window. I need to check if the user's input, an alphanumeric passcode, is valid. How I've done is the input is checked via ajax and if it's valid, window.open() will be called to launch the window. Alas, all pop-up blockers block this.

Is there another way I can do this? I don't want to launch a window if the input is invalid. If the input is invalid, the error message is shown on the immediate page, and not on the new pop-up window. It's silly to launch a window just to tell the user it's invalid.

Any thoughts or suggestions how I can check the input, and also allow a legitimate pop-up window to be shown?

Thanks.

Edited to include my (simplified) code

HTML form:

<form id="form-passcode">
<input id="input-passcode" type="text" name="input-passcode" /><a class="submit" onclick="javascript:passcode_check(); return false;" href="javascript:">Go</a>
</form>

Javascript (using jQuery):

function passcode_check() {
    var refPasscode = $('#input-passcode');
    var data = $('#form-passcode').serialize();
    $.ajax({
      url: check_passcode.php',
      data: data,
      dataType: 'json',
      type: 'post',
      success: function (j) {
        if (j.status == 1) {
          newwindow = window.open('http://google.com','Google','menubar=no,height=500,width=300,resizable=no,toolbar=no,location=no,status=no');
          if (window.focus) {newwindow.focus()}
        }
        else {
          // show error to end-user
        }
      }
    });
}

}

I've also experimented with a less ideal alternative, in which upon checking via ajax if the input is valid, I'll insert a link e.g. <a href="http://google.com" onclick="newwin(this.href);return false" onfocus="this.blur()">Launch</a> via $('#form-passcode').html(); in which the user will subsequently click on to launch the pop-up. This works in all the browsers, though I would still love to make it more seamless for user..

Thanks again, :)

Answer 1

Why not move the validation code into your onclick event?

Example: onclick="javascript:validateInput();"

Then, in validateInput(), if the passcode is valid, you would open the new window.

Also, make sure you're not assigning the onclick handler dynamically with jQuery. It should be specified statically as an HTML attribute.

Answer 2

Agree with dacris. The code that calls window.open needs to be closer to the button click handler. If you're doing an AJAX call to the server with an async response handler, then you have decoupled the window.open call from the button click handler. The browsers can only track a few levels of stack depth (some only one call depth, others a few calls deep) to see if the call to window.open is being made from within the execution context of a user event. The async AJAX handler executes long after the button click handler has executed and returned to its caller.

One approach to resolve your problem might be to turn the issue inside out: open the popup window first in the button click handler, then make your async AJAX call to validate the input, then update the URL of the popup window according to the result of the AJAX call in the async handler.