Reload content in modal twitter bootstrap

Question

I m using twitter bootstrap s modal popup     lt div id  myModal  class  modal hide fade in  gt       lt div class  modal-header  gt           lt a class  close  data-dismiss  modal  gt    lt  a gt           lt h3 gt Header lt  h3 gt       lt  div gt       lt div class  modal-body  gt  lt  div gt       lt div class  modal-footer  gt           lt input type  submit  class  btn btn-success  value  Save   gt       lt  div gt   lt  div gt    I can load content using ajax with this a-element    lt a data-toggle  modal  data-target   myModal  href  edit aspx  gt Open modal lt  a gt    Now I have to open the same modal but using a different url  I m using this modal to edit an entity from my database  So when I click edit on an entity I need to load the modal with an ID     lt a data-toggle  modal  data-target   myModal  href  edit aspx id 1  gt Open modal lt  a gt   lt a data-toggle  modal  data-target   myModal  href  edit aspx id 2  gt Open modal lt  a gt   lt a data-toggle  modal  data-target   myModal  href  edit aspx id 3  gt Open modal lt  a gt    If I click on link number 1  it works fine  But if I then click on link number 2 the modal content is already loaded and therefor it will show the content from link number 1     How can I refresh or reset the ajax loaded content in a twitter bootstrap modal popup

User · Answer

I was also stuck on this problem then I saw that the ids of the modal are the same. You need different ids of modals if you want multiple modals. I used dynamic id. Here is my code in haml:

.modal.hide.fade{"id"=> discount.id,"aria-hidden" => "true", "aria-labelledby" => "myModalLabel", :role => "dialog", :tabindex => "-1"}

you can do this

<div id="<%= some.id %>" class="modal hide fade in">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Header</h3>
  </div>
  <div class="modal-body"></div>
  <div class="modal-footer">
    <input type="submit" class="btn btn-success" value="Save" />
  </div>
</div>

and your links to modal will be

<a data-toggle="modal" data-target="#" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>
<a data-toggle="modal" data-target="#myModal" href='"#"+<%= some.id %>' >Open modal</a>

I hope this will work for you.

User · Answer

You can try this       modal   on  hidden bs modal   function           this  removeData  bs modal

User · Answer

var  table       myTable2          table bootstrapTable  destroy     Worked for me

User · Answer

Here is a coffeescript version that worked for me     document  on  hidden bs modal    e  - gt    target     e target    target removeData  bs modal   find   modal-content   html

User · Answer

With Bootstrap 3 you can use  hidden bs modal  event handler to delete any modal-related data  forcing the popup to reload next time       modal   on  hidden bs modal   function           this  removeData  bs modal

User · Answer

I wanted the AJAX loaded content removed when the modal closed  so I adjusted the line suggested by others  coffeescript syntax        my-modal   on  hidden bs modal    event  - gt      this  removeData  bs modal   children   remove

User · Answer

A little more compressed than the above accepted example  Grabs the target from the data-target of the current clicked anything with data-toggle modal on  This makes it so you don t have to know what the id of the target modal is  just reuse the same one  less code   win  You could also modify this to load title  labels and buttons for your modal should you want to         data-toggle modal    click function ev        ev preventDefault           load the url and show modal on success          this  attr  data-target        modal-body   load   this  attr  href    function                   this  attr  data-target    modal  show                   Example Links    lt a data-toggle  modal  href   page api package herp  data-target   modal  gt click me lt  a gt   lt a data-toggle  modal  href   page api package derp  data-target   modal  gt click me2 lt  a gt   lt a data-toggle  modal  href   page api package merp  data-target   modal  gt click me3 lt  a gt

User · Answer

You can force Modal to refresh the popup by adding this line at the end of the hide method of the Modal plugin  If you are using bootstrap-transition js v2 1 1  it should be at line 836   this  element removeData     Or with an event listener      modal   on  hidden   function           this  data  modal    element removeData

User · Answer

step 1   Create a wrapper for the modal called clone-modal-wrapper   step 2   Create a blank div  called modal-wrapper   Step 3   Copy the modal element from clone-modal-wrapper to  modal-wrapper   step 4   Toggle the modal of modal-wrapper    lt a data-toggle  modal  class  my-modal  gt Open modal lt  a gt    lt div class  clone-modal-wrapper  gt      lt div class  my-modal  class  modal fade  gt         lt div class  modal-dialog  gt            lt div class  modal-content  gt               lt div class  modal-header  gt                  lt a class  close  data-dismiss  modal  gt    lt  a gt                  lt h3 gt Header lt  h3 gt               lt  div gt               lt div class  modal-body  gt  lt  div gt               lt div class  modal-footer  gt                  lt input type  submit  class  btn btn-success  value  Save   gt               lt  div gt            lt  div gt         lt  div gt      lt  div gt   lt  div gt    lt div class  modal-wrapper  gt  lt  div gt       a data-target  myModal    click function  e        e preventDefault            modal-wrapper   html     clone-modal-wrapper   html             modal-wrapper   find   my-modal   modal  toggle

User · Answer

It will works for all version of twitterbootstrap  Javascript code     lt script type  text javascript  gt      lt   CDATA      function       var bsModal   null         data-toggle modal    click function e          e preventDefault          var trgId     this  attr  data-target           if   bsModal    null           bsModal     trgId  modal          fn bsModal   bsModal          trgId      modal-body   load   this  attr  href             trgId  bsModal  show                       lt   CDATA      lt  script gt    links to modal are   lt a data-toggle  modal  data-target   myModal  href  edit1 aspx  gt Open modal 1 lt  a gt   lt a data-toggle  modal  data-target   myModal  href  edit2 aspx  gt Open modal 2 lt  a gt   lt a data-toggle  modal  data-target   myModal  href  edit3 aspx  gt Open modal 3 lt  a gt    pop up modal    lt div id  myModal  class  modal hide fade in  gt   lt div class  modal-header  gt       lt a class  close  data-dismiss  modal  gt    lt  a gt       lt h3 gt Header lt  h3 gt   lt  div gt   lt div class  modal-body  gt  lt  div gt   lt div class  modal-footer  gt       lt input type  submit  class  btn btn-success  value  Save   gt   lt  div gt

User · Answer

Based on other answers  thanks everyone    I needed to adjust the code to work  as simply calling  html wiped the whole content out and the modal would not load with any content after i did it   So i simply looked for the content area of the modal and applied the resetting of the HTML there         document  on  hidden bs modal   function  e            var target     e target           target removeData  bs modal                  find   modal-content   html                Still may go with the accepted answer as i am getting some ugly jump just before the modal loads as the control is with Bootstrap

User · Answer

I made a small change to Softlion answer  so all my modals won t refresh on hide  The modals with data-refresh  true  attribute are only refreshed  others work as usual  Here is the modified version     document  on  hidden bs modal   function  e        if    e target  attr  data-refresh       true                Remove modal data           e target  removeData  bs modal               Empty the HTML of modal           e target  html                  Now use the attribute as shown below    lt div class  modal fade  data-refresh  true  id   modal  tabindex  -1  role  dialog  aria-labelledby   modal-label  aria-hidden  true  gt  lt  div gt    This will make sure only the modals with data-refresh  true  are refreshed  And i m also resetting the modal html because the old values are shown until new ones get loaded  making html empty fixes that one

User · Answer

I am having the same problem  and I guess the way of doing this will be to remove the data-toggle attribute and have a custom handler for the links   Something in the lines of      a data-target  myModal    click function ev        ev preventDefault        var target     this  attr  href            load the url and show modal on success         myModal  modal-body   load target  function                   myModal   modal  show                   Will try it later and post comments

User · Answer

To unload the data when the modal is closed you can use this with Bootstrap 2 x       myModal   on  hidden   function           this  removeData  modal          And in Bootstrap 3  https   github com twbs bootstrap pull 7935 issuecomment-18513516      document body  on  hidden bs modal   function              myModal   removeData  bs modal          Edit SL  more universal   document  on  hidden bs modal   function  e          e target  removeData  bs modal

[javascript] Reload content in modal (twitter bootstrap)

Examples related to javascript

Examples related to twitter-bootstrap