jquery window.open in ajax success being blocked
ajax, javascript, jquery
Solution
For opening a new URL in the window you opened in `onclick`, do the following
- Store the new window you created in a variable `var newWindow = window.open("","_blank");`
- 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.
Problem
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>'; } }); }); ```