JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Help!</h1>
<h2>Why after an ajax call the form submit tries to open a popup instead a new tab (like normal button):</h2>
<button id="normal">Google</button>
<button id="ajax">Ajax Google</button>
<p>It must be something about the window reference... Reply to <a href="http://twitter.com/marcosesperon">@marcosesperon</a>. Thanks!</p>
CSS
body {
padding: 1em;
}
h1 {
font-size: 3em;
font-weight: bold;
margin-bottom: .5em;
}
h2 {
font-size: 1.5em;
margin-bottom: 1em;
}
p {
margin-top: 2em;
}
JavaScript
(function($) {
jQuery(document).ready(function() {
var launch = function(p_url) {
var form = $('<form />').hide();
form.attr({'action': p_url, 'target': '_blank'});
form.appendTo(document.body);
form.submit();
form.remove();
delete form;
};
$('#normal').on('click', function() {
launch('http://www.google.com');
});
$('#ajax').on('click', function() {
$.ajax({
type: 'POST',
url: '#',
traditional: true,
success: function() {
launch('http://www.google.com');
}
});
});
});
})(jQuery);