Twitter bootstrap remote modal shows same content every time

Question

I am using Twitter bootstrap  I have specified a modal   lt div class  modal hide  id  modal-item  gt        lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  gt x lt  button gt           lt h3 gt Update Item lt  h3 gt       lt  div gt        lt form action  http   www website com update  method  POST  class  form-horizontal  gt        lt div class  modal-body  gt          Loading content         lt  div gt        lt div class  modal-footer  gt           lt a href     class  btn  data-dismiss  modal  gt Close lt  a gt           lt button class  btn btn-primary  type  submit  gt Update Item lt  button gt       lt  div gt        lt  form gt    lt  div gt    And the links    lt a href  http   www website com item 1  data-target   modal-item  data-toggle  modal  gt Edit 1 lt  a gt   lt a href  http   www website com item 2  data-target   modal-item  data-toggle  modal  gt Edit 2 lt  a gt   lt a href  http   www website com item 3  data-target   modal-item  data-toggle  modal  gt Edit 2 lt  a gt    When I click on any of these link for the first time  I see the correct content  but when I click on other links it shows the same content loaded for the first time  it doesn t update the content   I want it to be updated every time its clicked   P S   I can easily make it work via custom jQuery function  but I want to know if it s possible with native Bootstrap modal remote function  as it should be easy enough and I guess I am just complicating things

User · Answer

If a remote URL is provided  content will be loaded one time via jQuery s load method and injected into the  modal-content div  If you re using the data-api  you may alternatively use the href attribute to specify the remote source  An example of this is shown below    ajaxSetup           Disable caching of AJAX responses     cache  false

User · Answer

For Bootstrap 3 1 you ll want to remove data and empty the modal-content rather than the whole dialog  3 0  to avoid the flicker while waiting for remote content to load     document  on  hidden bs modal   function  e          e target  removeData  bs modal   find   modal-content   empty          If you are using non-remote modals then the above code will  of course  remove their content once closed  bad   You may need to add something to those modals  like a  local-modal class  so they aren t affected  Then modify the above code to     document  on  hidden bs modal     modal not  local-modal    function  e          e target  removeData  bs modal   find   modal-content   empty

User · Answer

In Bootstrap 3 2 0 the  on  event has to be on the document and you have to empty the modal      document  on  hidden bs modal   function  e          e target  removeData  bs modal   find   modal-content   empty          In Bootstrap 3 1 0 the  on  event can be on the body       body   on  hidden bs modal     modal   function            this  removeData  bs modal

User · Answer

The problem is two-fold   First  once a Modal object is instantiated  it is persistently attached to the element specified by data-target and subsequent calls to show that modal will only call toggle   on it  but will not update the values in the options   So  even though the href attributes are different on your different links  when the modal is toggled  the value for remote is not getting updated   For most options  one can get around this by directly editing the object   For instance       myModal   data  bs modal   options remote    http   website com item 7     However  that won t work in this case  because     Second  the Modal plugin is designed to load the remote resource in the constructor of the Modal object  which unfortunately means that even if a change is made to the options remote  it will never be reloaded   A simple remedy is to destroy the Modal object before subsequent toggles  One option is to just destroy it after it finishes hiding      body   on  hidden bs modal     modal   function          this  removeData  bs modal          Note  Adjust the selectors as needed  This is the most general     Plunker  Or you could try coming up with a more complicated scheme to do something like check whether the link launching the modal is different from the previous one   If it is  destroy  if it isn t  then no need to reload

User · Answer

I ve added something like this  because the older content is shown until the new one appears  with  html     inside the  modal-content will clear the HTML inside  hope it helps      myModal   on  hidden bs modal   function             myModal   removeData  bs modal           myModal   find   modal-content   html

User · Answer

Adding an   this  html      to clear visible data as well  and it works pretty fine

User · Answer

For Bootstrap 3  in modal js I changed     document     on  show bs modal      modal   function        document body  addClass  modal-open         on  hidden bs modal     modal   function        document body  removeClass  modal-open         to    document     on  show bs modal      modal   function        document body  addClass  modal-open         on  hidden bs modal     modal   function             this  removeData  bs modal   empty         document body  removeClass  modal-open           extra spacing added for clarity   This prevents any unwanted flash of old modal content by calling empty   on the modal container as well as removing the data

User · Answer

myModal   on  hidden bs modal   function                    this  removeData  modal                  This one works for me

User · Answer

body   on  hidden bs modal     modal   function                 mention Id here what you showed inside modal body   empty         Which html element you want to empty like div span whatever

User · Answer

Thanks merv  I started tinkering around boostrap js but your answer is a quick and clean workaround  Here s what I ended up using in my code       modal-item   on  hidden   function           this  removeData  modal

User · Answer

The accepted answer didn t work for me  so I went with JavaScript to do it    lt a href   foo  class  modal-link  gt   lt a href   bar  class  modal-link  gt    lt script gt    function             modal-link   click function event            event preventDefault               myModal   removeData  modal               myModal   modal  remote    this  attr  href

User · Answer

Why not make it more general with BS 3  Just use   something modal  as the ID of the modal DIV      div id   modal     on  hidden bs modal       function                this  removeData  bs modal

User · Answer

For bootstrap 3 you should use      body   on  hidden bs modal     modal   function            this  removeData  bs modal

User · Answer

Tested on Bootstrap version 3 3 2        myModal   on  hide bs modal   function           this  removeData

User · Answer

I wrote a simple snippet handling the refreshing of the modal  Basically it stores the clicked link in the modal s data and check if it s the same link that has been clicked  removing or not the modal data   var handleModal   function             triggeringLink   click function event            var  logsModal       logsModal            var  triggeringLink    logsModal data  triggeringLink             event preventDefault             if   logsModal data  modal      undefined              amp  amp   triggeringLink    undefined              amp  amp    triggeringLink is   this                            logsModal removeData  modal                        logsModal data  triggeringLink     this              logsModal modal   remote    this  attr  href                logsModal modal  show

User · Answer

Good luck with this one       myModal   on  hidden bs modal   function          location reload

User · Answer

This other approach works well for me       myModal   on  show bs modal   function e        var link     e relatedTarget         this  find   modal-body   load link attr  href

User · Answer

This works with Bootstrap 3 FYI      myModal   on  hidden bs modal   function          this  removeData  bs modal

User · Answer

My project is built in Yii  amp  uses the Bootstrap-Yii plugin  so this answer is only relevant if you re using Yii   The above fix did work but only after the first time the modal was shown  The first time it came up empty  I think that s because after my initiation of the code Yii calls the hide function of the modal thereby clearing out my initiation variables    I found that putting the removeData call immediately before the code that launched the modal did the trick  So my code is structured like this          myModal   removeData   modal         myModal   modal   remote    path to remote

User · Answer

Only working option for me is       body   on  hidden bs modal     modalBox   function            this  remove          I use Bootstrap 3 and I have a function called popup  popup content   which appends the modal box html

User · Answer

Expanded version of accepted answer by  merv  It also checks if modal being hidden is loaded from remote source and clears old content to prevent it from flashing     document  on  hidden bs modal     modal   function        var modalData     this  data  bs modal          Destroy modal if has remote source     don t want to destroy modals with static content    if  modalData  amp  amp  modalData options remote           Destroy component  Next time new component is created and loads fresh content       this  removeData  bs modal           Also clear loaded content  otherwise it would flash before new one is loaded        this  find   modal-content   empty              https   gist github com WojtekKruszewski ae86d7fb59879715ae1e6dd623f743c5

User · Answer

This one works for me   modal   lt div class  modal fade  id  searchKaryawan  tabindex  -1  role  dialog  aria-labelledby  SearchKaryawanLabel  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  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt       lt h4 class  modal-title  id  SearchKaryawanLabel  gt Cari Karyawan lt  h4 gt     lt  div gt     lt div class  modal-body  gt       lt input type  hidden  name  location  gt       lt input name  cariNama  type  text  class  form-control  onkeyup  if  this value length  gt  3  cariNikNama       gt       lt div class  links-area  id  links-area  gt  lt  div gt     lt  div gt     lt div class  modal-footer  gt     lt  div gt   lt  div gt   lt  div gt  lt  div gt    script   lt script type  text javascript  gt    body   on  hidden bs modal     modal   function           links-area   empty        lt  script gt    links-area is area where i put the data and need to clear

[jquery] Twitter bootstrap remote modal shows same content every time

Examples related to jquery

Examples related to jquery-plugins

Examples related to twitter-bootstrap

[jquery] Twitter bootstrap remote modal shows same content every time

Examples related to jquery

Examples related to jquery-plugins

Examples related to twitter-bootstrap

Examples related to modal-dialog