jquery window.open in ajax success being blocked

Question

Trying to open a new browser window in my ajax success call, however, it is blocked as a popup. I did some searching and found that a user event needs to be tied to the win

Answer 1

Do a window.open("about:blank", "newPage"); before the AJAX call and then after the call add the URL to the opened window by calling window.open("http://google.com", "newPage");.

Answer 2

For opening a new URL in the window you opened in onclick, do the following

1. Store the new window you created in a variable var newWindow = window.open("","_blank");
2. Change the location of the new window newWindow.location.href = newURL;

One additional thing that can be done to improve user experience is to send the new window to background immediately (newWindow.blur) after opening and then bring it in foreground again (newWindow.focus) while opening the URL the the new window.

Answer 3

$('#user-login').on('click', function () {
    var $form = $(this).closest('form');

    $.ajax({
        type: 'post',
        url: '/spc_admin/process/p_user_login.php',
        data: $form.serialize(),
        dataType : 'json',
        success: function(res) {    
            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){
                $myElem.html('<p><b class="text-blue">Success!</b> &nbsp;You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');                 
                // open new window as logged in user
                window.open('http://www.example.com/', '_blank');
        } else {
            $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');
        }               
    });
});