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

Question

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    lt  -- Modal -- gt   lt div   class  modal fade    id  myModal    tabindex  -1    role  dialog    aria-labelledby  myModalLabel    aria-hidden  true   gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  gt             lt span aria-hidden  true  gt  amp times  lt  span            gt  lt span class  sr-only  gt Close lt  span gt           lt  button gt           lt h4 class  modal-title  id  myModalLabel  gt Select Language lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt button type  button  class  btn  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn  id  submit form  gt Submit lt  button gt            lt div class  modal-body1  gt             lt div id  placeholder-div1  gt  lt  div gt           lt  div gt         lt  div gt          lt div class  modal-footer  gt           lt script gt                submit form   on  click   function                      modal-body1   html   lt h3 gt test lt  h3 gt                            lt  script gt            lt script gt              function                      modal-footer   click function                        modal   modal  hide                                           lt  script gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    -- Update ---  Why doesn t this work    lt script type  text javascript  gt      function              myModal   on  hidden bs modal   function  e          console log  Modal hidden              placeholder-div1   html                     lt  script gt

User · Answer

Using BS 3 3 7      yourModal   on  hidden bs modal   function            this  data  bs modal   null      will clear all element inside modal

User · Answer

this will change the HTML content with the new HTML that you want to update in your modal without too many resets        var         HTML to be changed       classbuttonClicked   click function             ModalDivToChange   html var           myModal   modal  show

User · Answer

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   x000D   x000D    document  ready function     x000D        modal   on  hidden bs modal   function     x000D          modal-body1   html  Where did he go          x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 1 css bootstrap min css    gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 1 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt button type  button  class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt  x000D    Launch modal x000D   lt  button gt  x000D   x000D   lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog  gt  x000D       lt div class  modal-content  gt  x000D         lt div class  modal-header  gt  x000D           lt button type  button  class  close  data-dismiss  modal  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt  x000D           lt  button gt  x000D           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D         lt  div gt  x000D         lt div class  modal-body  gt  x000D           lt div class  modal-body1  gt  x000D             lt h3 gt Close and open  I will be gone  lt  h3 gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt div class  modal-footer  gt  x000D           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Tried it and working well      MyModal   on  hidden bs modal   function            this  find  form   trigger  reset         reset is dom build-in funtion  you can also use   this  find  form   0  reset     And Bootstrap s modal class exposes a few events for hooking into modal functionality  detail at here      hide bs modal   This event is fired immediately when the hide instance   method has been called       hidden bs modal This event is fired when the modal has finished being   hidden from the user  will wait for CSS transitions to complete

User · Answer

That s works for me accurately let template   null          modal   on  show bs modal   function event          template     this  html                     modal   on  hidden bs modal   function e            this  html template

User · Answer

Sample code      document  on  hide bs modal     basicModal   function  e                basicModal   empty

User · Answer

function                modal   on  hidden bs modal   function                  this  removeData                      This is perfect solution to remove contact while hide close bootstrap modal

User · Answer

I am using BS 3 3 7 and i have a problem when i open a modal then close it  the modal contents keep on the client side no html     no clear at all  So i used this to remove completely the code inside the modal div  Well  you may ask why the padding-right code  in chrome for windows when open a modal from another modal and close this second modal the  stays with a 17px padding right  Hope it helps       document   on  shown bs modal     modal   function             document body  addClass  modal-open        on  hidden bs modal     modal   function             document body  removeClass  modal-open          document body  css  padding-right    0px       this  removeData  bs modal   find   modal-dialog   empty

User · Answer

To reset all the input fields in a modal use the following       modal-body input   val

User · Answer

Here s an alternative solution   If you re doing a lot of changes to the DOM  add removing elements and classes   there could be several things that need to be  reset   Rather than clearing each element when the modal closes  you could reset the entire modal everytime it s reopened   Sample code    function         var template   null          modal   on  show bs modal   function  event            if  template    null                template     this  html             else                 this  html template                       other initialization here  if you want to                You can still write your initial state in HTML without worrying too much about what will happen to it later  You can write your UI JS code without worrying about having to clean up later  Each time the modal is relaunched it will be reset to the exact same state it was in the first time     Edit  Here s a version that should handle multiple modals  I haven t tested it       function             modal   on  show bs modal   function  event            if     this  data  template                    this  data  template     this  html              else                 this  html  this data  template                         other initialization here  if you want to

User · Answer

Try cloning  then removing and re-adding the element when the modal is hidden  This should keep all events  though I haven t thoroughly tested this with all versions of everything   var originalModal       myModal   clone      document  on   myModal    hidden bs modal   function              myModal   remove        var myClone   originalModal clone           body   append myClone

User · Answer

Reset form inside the modal  Sample Code       myModal   on  hide bs modal     myModal   function  e            myModal form   0  reset

User · Answer

The below statements show how to open reopen Modal  without using bootstrap   Add two classes in css  And then use the below jQuery to reopen the modal if it is closed     hide block       display none   important        display block        display block  important            Modal   removeClass  hide block         Modal   addClass  display block        Modal   show  slow      It worked fine for me

User · Answer

What helped for me  was to put the following line in the ready function     document  ready function                            codes works on all bootstrap modal windows in application         modal   on  hidden bs modal   function e                   this  removeData                                   When a modal window is closed and opened again  the previous entered and selected values  will be reset to the initial values   I hope this will help you as well

User · Answer

also  you can clone your modal before open        myModal        clone        modal        on  hidden bs modal   function e              this  remove

User · Answer

you can try this     body   on  hidden bs modal     modal   function             this  removeData  bs modal          It will remove all the data from the model and reset it

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap