javascript - 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 window.open for this to not happen.

I also found this solution where you open a blank window before the ajax then load the url as normal in the success call.

So with this I have two questions :

1 - Is this the only solution because I would prefer not to open this blank window.

2 - If this indeed is the only way then how can I load my html into this new window? For example, if my ajax does not succeed, how can I add my error text into this blank window since the url will not be opened?

I should also note that I do not want to make the ajax call synchronous... this defeats the purpose of ajax and I believe this is going to be deprecated if not already... correct me if I read wrong in my searching.

    $('#user-login').on('click', function () {
        var $form = $(this).closest('form');
        window.open('about:blank', 'myNewPage');

        $.ajax({
            type: 'post',
            url: '/spc_admin/process/p_user_login.php',
            data: $form.serialize(),
            dataType : 'json'
        }).done(function (response) {

            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){

                if (response.success)
                {
                    $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/');
                    window.open('http://www.example.com/', 'myNewPage');
                } 
                else
                {
                    $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');
                }               
            });
        });
    });

EDIT:

For anyone interested... here is the solution I came up with. A name is required for the new window so successive clicks will open in the same window and not open new ones repeatedly. Adding html is a little different than given in the answer and this works. Blurring of the window does not work so it is not there. From what I could find this is not controllable and is a browser thing.

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

        //open blank window onclick to prevent popup blocker
        var loginWindow = window.open('', 'UserLogin');

        $.ajax({
            type: 'post',
            url: '/spc_admin/process/p_user_login.php',
            data: $form.serialize(),
            dataType : 'json'
        }).done(function (response) {

            $myElem = $('#user_login_message'); //performance for not checking dom
            $myElem.fadeOut('fast', function(){

                if (response.success)
                {
                    // show success
                    $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
                    loginWindow.location.href = 'http://www.example.com/';
                } 
                else
                {
                    // show error
                    $myElem.html('<p><b class="text-red">Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>').fadeIn('fast');

                    // add error to the new window (change this to load error page)
                    loginWindow.document.body.innerHTML = '<p><b>Error!</b> &nbsp;Please select a valid user from the dropdown list.</p>';
                }               
            });
        });

Answer 1

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.