How to properly open a new window on JQuery AJAX Success?

Question

I am trying to get a dynamically generated link to open after an ajax request (Specifically after success is returned from the AJAX call). I have a partially working code which works on desktop Chrome and Firefox, but it doesn't work on mobile Safari (the window is not opened.)

Here is the code (simplified for clarity purposes):

//this function gets called by a click event
function go(){

  var generatedurl
  // generatedurl gets generated

  $.ajax({
      url:'url.php',
      type: 'post',
      data: {data},
      dataType: "json",
      success: function(data) {
                if (data.status == 'success'){
                  gofunction();
                } 
                else if (data.status == 'error') {
                    alert("error");
                } 
      },
      error: function(){
        alert("error");
      }
    });

  function gofunction()  { 
      window.open(generatedurl, '_blank');
      location.reload();
    }

}

I am aware of this answer, however when i try to apply it to my code, like this:

//this function gets called by a click event
function go(){

  var generatedurl
  // generatedurl gets generated

  var windowReference = window.open(); //this was added

  $.ajax({
      url:'url.php',
      type: 'post',
      data: {data},
      dataType: "json",
      success: function(data) {
                if (data.status == 'success'){
                  gofunction();
                } 
                else if (data.status == 'error') {
                    alert("error");
                } 
      },
      error: function(){
        alert("error");
      }
    });

  function gofunction()  { 
      windowReference.location = url; //this was changed
      location.reload();
    }

}

For some reason it opens the link even when an error is returned, also location.reload(); doesnt fire.

I'd be thankful for any pointers on what would be the best approach.

This will always open the new window, var windowReference = window.open(); //this was added — Grumpy, Aug 12 '21 at 19:38
Yep i got it. The answer i linked states: `Opening a new tab in Safari on iOS just works from an async function, just make sure you create the window (window.open) before calling the async call`. But i'm not sure on how to apply it to this case — Esquirish, Aug 12 '21 at 19:48

score 0 · Accepted Answer · answered Aug 14 '21 at 01:12

As a follow up for those having the same issue: This answer provided a working solution to my issue.

So, my working code is as follows:

//this function gets called by a click event
function go(){

  var go_success = false;  //THIS LINE WAS ADDED

  var generatedurl
  // generatedurl gets generated

  $.ajax({
      url:'url.php',
      type: 'post',
      data: {data},
      dataType: "json",
      async:false,   //THIS LINE WAS ADDED
      success: function(data) {
                if (data.status == 'success'){
                  go_success = true; //THIS LINE WAS CHANGED
                } 
                else if (data.status == 'error') {
                    alert("error");
                } 
      },
      error: function(){
        alert("error");
      }
    });

   if(go_success)  {  //THIS LINE WAS CHANGED
      window.open(generatedurl, '_blank');
      location.reload();
    }

}

How to properly open a new window on JQuery AJAX Success?

1 Answers1