jquery window.open in ajax success being blocked

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>';
                }               
            });
        });