jquery ajax window.open,javascript - jquery window.open in ajax success being blocked - Stack Overfl...

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('

Success!  You have been logged in as \''+response.username+'\' in a new browser window.

').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('

Error!  Please select a valid user from the dropdown list.

').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('

Success!  You have been logged in as \''+response.username+'\' in a new browser window.

').fadeIn('fast');

// open new window as logged in user

loginWindow.location.href = 'http://www.example.com/';

}

else

{

// show error

$myElem.html('

Error!  Please select a valid user from the dropdown list.

').fadeIn('fast');

// add error to the new window (change this to load error page)

loginWindow.document.body.innerHTML = '

Error!  Please select a valid user from the dropdown list.

';

}

});

});