The code below will open the new tab first before the bootstrap modal appears. Is there a way that the bootstrap modal opens first before the new tab?
$(document).on("click", ".listings", function() {
var id = $(this).attr("id");
$.ajax({
url: "http://api.myjson.com/bins/2sadq?pretty=1",
dataType: "json",
success: function(response) {
var modal = "<div class='modal fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='myModalLabel'>Aloha!</h4></div><div class='modal-body'>Apartment address through Google Maps. Epic! Right?</div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div>";
$('#myModal').modal('show');
$(".modals").append(modal);
var selectedApartment = $.grep(response.apartments, function(apartment) {
return apartment.id == id;
});
var address = selectedApartment[0].address;
window.open("http://maps.google.com/?q=" + address);
},
error: function(error) {
console.log(error);
}
});
});
Also, if you want to look at the full project file, here's the dropbox link.
Full project file dropbox link