Refresh der dynamischen Tabelle von Inhalten in der Bootstrap-modal

Ich habe ein Bootstrap modal mit einer dynamischen Tabelle.
Hier ist der button, der löst das modal-popup:

<button class="orgBrowseButton">  <i class="fa fa-search"></i></button>

Hier ist die Funktion, die aufgerufen wird, wenn diese Schaltfläche angeklickt wird. Wenn es angeklickt wird, wird ein ajax-Aufruf durchgeführt wird, und seine Antwort ist eine html-Seite (siehe unten nach der Funktion snippet), die gerendert wird, als der Körper des modal. Sie können sehen, dass ich das entfernen von Daten von der modalen und modalen sich von meinem jsp, nachdem das modale geschlossen:

$(".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();
            });
        });
    });

- Und dies ist der modal. Dieser modal-enthält ein Formular und eine Tabelle, deren Daten leitet sich aus einer ajax-Antwort. Der code, der generiert die Tabelle ist Brauch, also kann ich es hier posten. Es ist eine dynamische Tabelle.

    <div class="modal" id="popup" role="dialog">
      <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times</button>
            <h4 class="modal-title">Title</h4>
        </div>
        <div class="modal-body">
           <form class="form-horizontal" id="searchOrgsForm" action="" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2" for="">Name:</label>
                <div class="col-sm-10"> 
                    <input class="form-control" type="text" name="orgName"/>
                </div>
            </div>
            <div class="form-group"> 
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Search</button>
                </div>
            </div>
            <table class="TableFilledWithDataThroughAjaxCall">
            </table>
         </form>
     </div>
     <div class="modal-footer">
         <button id="closeButton" class="btn btn-default" type="button" data-dismiss="modal"></button>
     </div>
   </div>
</div>

Also es gibt 2 ajax-calls: eine, die Daten zurück zu füllen den Körper der modalen und einer INNERHALB des modal ist, füllt das datatable.

Das problem ist, dass die zweite Zeit, die ich öffnen Sie die modale, die Daten aus der datatable fehlt, obwohl der ajax-Aufruf erfolgt in der Regel (ich sehe es in den server-logs). Die Tabelle scheint nicht zu laden.