title: Refresh dynamic table content in Bootstrap modal
body: <p>I have a Bootstrap modal with a dynamic table in it.
  Here is the button that triggers the modal popup:</p>
  
  <pre><code>&lt;button class="orgBrowseButton"&gt;  &lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Here is the function called when this button is clicked on. When it is clicked, an ajax call is performed and its response is an html page (see below after the function snippet), which is rendered as the body of the modal. You can see that I remove data from the modal, and the modal itself from my jsp, after the modal is closed:</p>
  
  <pre><code>$(".orgsBrowseButton").click(function (e) {
          e.preventDefault();
          $.ajax({
              url : 'actionToCall.action',//this is a struts action
              jsCallback:function(data){
                  callbackFunction(data);
              },
              cache: false
          }).done(function( data ) {
              $(data).insertAfter("#MainContentID");//a div in my jsp
              $(".modal").modal();
              $('body').on('hidden.bs.modal', '.modal', function (e) {
                  $(e.target).removeData('bs.modal');
                  $('.modal').remove();
              });
          });
      });
  </code></pre>
  
  <p>And this is the modal. This modal contains a form, and a table whose data derives from an ajax response. The code that generates the table is custom, so I cannot post it here. It's a dynamic table.</p>
  
  <pre><code>    &lt;div class="modal" id="popup" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Title&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
             &lt;form class="form-horizontal" id="searchOrgsForm" action="" role="form"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="control-label col-sm-2" for=""&gt;Name:&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt; 
                      &lt;input class="form-control" type="text" name="orgName"/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt; 
                  &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                      &lt;button type="submit" class="btn btn-default"&gt;Search&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;table class="TableFilledWithDataThroughAjaxCall"&gt;
              &lt;/table&gt;
           &lt;/form&gt;
       &lt;/div&gt;
       &lt;div class="modal-footer"&gt;
           &lt;button id="closeButton" class="btn btn-default" type="button" data-dismiss="modal"&gt;&lt;/button&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>So there are 2 ajax calls: one that returns the data to fill the body of the modal and one WITHIN the modal, which fills the datatable.</p>
  
  <p>The problem is that the second time I open the modal, the data from the datatable is missing, although the ajax call is performed normally (I can see it in the server logs). The table seems not to reload.</p>