window.open popup getting blocked during click event

Question

What I ultimately need to do is run an $.ajax() call and then after that is run, open a new window.

A use clicks on a \"Preview\" button that saves thei

Answer 1

const newWin = window.open(`${BASE_URL}`, 'expampleName')
if (newWin) {
  newWin.onload = () => {
    const currentOpenWindow = newWin
    const href = newWin.location.href
  }
}

Answer 2

Popup blockers usually works blocking every popup shown not triggered by a direct user action, like clicking on a button or a link.

If you use a ajax request on your click event, the request is fired asyncronous from the click event, that's why by the time the ajax request has done its job and you get your event with the response from the request you have lost your chance to trigger a window.open withouth the popup blocker getting in the way, the original click event it's long dead by that time.

Answer 3

According this this post, it looks like you would have to open your window in direct response to the click (to avoid getting hit by the popup blockers) rather than waiting until the AJAX call completes to open the new window.

Answer 4

I ran into this problem recently and found this work-around:

1) call window.open just before calling $.ajax and save window reference:

var newWindow = window.open(...);

2) on callback set location property of the saved window reference:

newWindow.location = url;

Maybe it will help you too.

Answer 5

I solved my case by making the Ajax call synchronous. E.g. (with jQuery):

$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
      async: false,
      url: ...,
      data: ...,
      success: function(results){
          if(results.valid){
              window.open(...);
          }
      }
    });
    return false;
  });