javascript - Bootstrap modal with content cant be opened twice -
just starting out please bear me :)
i have searched on site answers not find 1 matched problem.
i'm trying open bootstrap modal , content using jquery ajax form plugin. works , content showed in modal, however, when close modal , open again, screen flickers , gets grey (backdrop opens) , goes back.
if reload site , try again, works until try open same modal again. if skip loading content modal opens / closes fine many times want. think has old content being there when opening again. content changes need wipe old ones modal div, cant seem work.
standard modal div:
<link rel="stylesheet" href="css/bootstrap-custom.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script> <div class="modal fade" id="mymodal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="btn btn-default" data-dismiss="modal">lukk</button> </div> <div class="modal-body"> <div class="something" style="display:none;"> </div> </div> </div> </div>
button used open modal:
<button type="button" class="btn btn-primary push" id="1" data-toggle="modal" data-target="#mymodal">button</button>
and finally, script fill modal content:
$(document).ready(function(){ $('.push').click(function(){ var id = $(this).attr('id'); $.ajax({ type : 'post', url : 'target.php', data : {'id': id}, success : function(r) { //show modal $('#mymodal').modal('show') $('.something').show().html(r); //show content in modal div } //success push });//.ajax }); //push //trying close modal , delete content $("#mymodal").on('hidden.bs.modal', function () { $('#mymodal').removedata('bs.modal') $(this).data('bs.modal', null); }); //mymodal hidden });//document ready
as mentioned, works once. upon closing modal , opening again fails.
i think figured out after several(!) hours , turns out rookie mistake. posting here in case else has same problem.
turns out html ajax-post returns contained script-sources:
<link rel="stylesheet" href="css/bootstrap-custom.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="http://malsup.github.com/jquery.form.js"></script>
so causing problems. when deleting these "target.php" seems work fine :)
Comments
Post a Comment