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> 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> 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> 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> 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> Please select a valid user from the dropdown list.</p>';
}
});
});
