Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reset the bootstrap modal when it gets closed and open it fresh again?

I have a list box in the bootstrap modal and a button. When the button is clicked a new button gets rendered inside a div in the modal. When I close the modal and reopen it, the last operation performed on the modal like the button rendered earlier is still present in the modal.

How do reset the modal so that when the modal is opened again, the button is not present and user can again select the option from the list box and click on the button to render a new button and so on.

<!-- Modal --> <div   class="modal fade"   id="myModal"   tabindex="-1"   role="dialog"   aria-labelledby="myModalLabel"   aria-hidden="true" >   <div class="modal-dialog">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal">           <span aria-hidden="true">&times;</span           ><span class="sr-only">Close</span>         </button>         <h4 class="modal-title" id="myModalLabel">Select Language</h4>       </div>       <div class="modal-body">         <button type="button" class="btn" data-dismiss="modal">Close</button>         <button type="button" class="btn" id="submit_form">Submit</button>          <div class="modal-body1">           <div id="placeholder-div1"></div>         </div>       </div>        <div class="modal-footer">         <script>           $("#submit_form").on("click", function () {             $(".modal-body1").html("<h3>test</h3>");           });         </script>          <script>           $(function () {             $(".modal-footer").click(function () {               $(".modal").modal("hide");             });           });         </script>       </div>     </div>   </div> </div> 

-- Update ---

Why doesn't this work?

<script type="text/javascript">   $(function () {     $("#myModal").on("hidden.bs.modal", function (e) {       console.log("Modal hidden");       $("#placeholder-div1").html("");     });   }); </script> 
like image 351
New to Rails Avatar asked Nov 11 '14 10:11

New to Rails


People also ask

How do I stop a Bootstrap modal from closing?

When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.


1 Answers

Just reset any content manually when modal is hidden:

$(".modal").on("hidden.bs.modal", function(){     $(".modal-body1").html(""); }); 

There is more events. More about them here

$(document).ready(function() {    $(".modal").on("hidden.bs.modal", function() {      $(".modal-body1").html("Where did he go?!?!?!");    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">    Launch modal  </button>    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">    <div class="modal-dialog">      <div class="modal-content">        <div class="modal-header">          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>          </button>          <h4 class="modal-title" id="myModalLabel">Modal title</h4>        </div>        <div class="modal-body">          <div class='modal-body1'>            <h3>Close and open, I will be gone!</h3>          </div>        </div>        <div class="modal-footer">          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        </div>      </div>    </div>  </div>
like image 68
Justinas Avatar answered Sep 24 '22 13:09

Justinas