JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Trying to open a popup after an (a)jax request</h1>
<table>
<tr>
<td>Gives Popup warning in all browsers:</td>
<td><input type="button" onclick="performAsyncronousRequest()" value="Asyncronous request"/></td>
</tr>
<tr>
<td>Works without warning in all browsers:</td>
<td><input type="button" onclick="performSyncronousRequest()" value="Syncronous request"/><td>
</tr>
<tr>
<td>
Simulate a slow connection for synchronous callback:<br/>
(This works in all browsers but Chrome)
</td>
<td><input type="button" onclick="performSlowSyncronousRequest()" value="Slow syncronous request"/></td>
</tr>
</table>
JavaScript
/**
* This method will give a popup warning in all browsers.
*/
function performAsyncronousRequest() {
$.ajax({
url: '/echo/html', //jsfiddle ajax test url
data: {},
success: function(){
window.open('http://www.thirtykingdoms.com');
},
async: true
});
}
/**
* This method will give open the popup without a warning.
*/
function performSyncronousRequest() {
$.ajax({
url: '/echo/html',
data: {},
success: function(){
window.open('http://www.thirtykingdoms.com');
},
async: false
});
}
/**
* This method will give open the popup without a warning.
*/
function performSlowSyncronousRequest() {
$.ajax({
url: '/echo/html',
data: {delay: 2}, //JSfiddle will delay the answer by 2 seconds
success: function(){
window.open('http://www.thirtykingdoms.com');
},
async: false
});
}