Claudia Man II Claudia Man II - 6 months ago 37
Ajax Question

Closing bootstrap modal on ajax success

i've a sign-in href link that toggles the modal and load a page within an iframe.. upon successful login the modal doesn't close. been searching around here and most of the answers are to add in the line

$('#myModal').modal('hide');


tried that but it didn't work. is there any conflict within my code?

HTML

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="max-width:400px;max-height:400px;width:94%;height:75%;float:right;margin:50px 12px 0 0">
<div class="modal-content" style="position:relative;width:100%;height:100%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<span style="color:black;font-weight:900;">Login</span>
</div>
<div class="modal-body" style="position:absolute;display:inline-block;width:100%;height:100%;">
<iframe src="login.php" frameborder="0" scrolling="no" allowtransparency="true" style="width:100%;height:90%;"></iframe>
</div>
</div>
</div>
</div>


Ajax

$.ajax({
url: url,
type: "post",
data: val,
datatype: 'json',
success: function(data) {
if (data.status == "valid") {
$("input").prop('disabled', true);
$("#login_btn").prop('value', 'Logging in ...');
$('#myModal').modal('hide');
}
else {
$('#msg').html("<font color=red>" +data.message+ "</font>")
}
}
});

Answer

I had a similar issue and it was driving me crazy. As a result I came up with a kind of crazy solution.

I added a class to the template used to create the popover. Here's the template used as an option to the popover() function:

template: '<div class="popover popover-width-control add-calendar-event"><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>',

The key here is the addition of the class add-calendar-event. Then to get hide the modal I used:

$(".add-calendar-event").hide();