JQuery Ajax Данные загружаются только модально

Question

У меня есть следующий ajax, который при запуске меняет содержимое div внутри моего модального тела. Это работает при первом запуске, но если модель закрыта, а затем новые данные используются, когда модаль перезагружается. Он по-прежнему отображает предыдущий набор данных. Как я могу очистить модальное содержимое при закрытии, поэтому, когда запускается ajax, он может заполнять модальный.

HTML

<div id="existingrequesthover" class="col-xs-11 outer colorhover" style="border:0px solid"> 
<div class="vcenter"> 
    <form id="getDataForm" action="/Home/Index" method="get" role="form"> 
     <label for="platform" class="control-label">Enter Code, IMEI or Phone Number</label><br /> 
     <div class="col-xs-11 col-sm-offset-1"> 
      <div class="inner-addon left-addon"> 
       <i class="glyphicon glyphicon-qrcode"></i> 
       <input style="max-width:450px;" id="filtername" name="filtername" type="text" class="form-control" value="" placeholder="Please Enter Code" data-toggle="popover" data-original-title="Enter Code, IMEI or Phone Number" /> 
      </div> 
     </div> 
    </form> 
</div> 

Jquery

$("#btnGetData").on("click",function() { 
    console.log("Click Detected") 
    $.ajax({ 
     type: "GET", 
     url: "/Home/AjaxGetDataForCode", 
     data: $('#getDataForm').serialize(), 
     datatype: "html", 
     success: function (data) { 
      console.log("Succes!"); 
      var $detailDiv = $('#superdatadivthing'); 
      $detailDiv.replaceWith(data); 
     }, 
     error: function() { 
      console.log("Error!"); 
     }, 
     complete: function() { 

      $('#basicModal2').modal('show'); 
      console.log("Complete Ajax!"); 
     } 
    }); 
}); 

Модальные

<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"> 
<div class="modal-dialog modal-dialog-center5"> 
    <div class="modal-content"> 

     <div class="modal-header"> 
      <button id="btnclosemodal" type="button" class="close" data-dismiss="modal" aria-hidden="true"><p style="font-size: 40px;">&times;</p></button> 
      <h4 class="modal-title" id="myModalLabel">Summary:</h4> 
     </div> 
     <div class="modal-body"> 
      <div id="superdatadivthing"> 
       <!--data goes here--> 
      </div> 
      <div class="form-group"> 
       <div class="col-xs-offset-2 col-xs-10"> 
        <button class="btn btn-success" id="resultsgo">Go!</button> 
       </div> 
      </div> 
     </div> 

Может кто-нибудь предложить способ сделать это?

Answer 1

Моя догадка его Propably, потому что ваш селектор $('#superdatadivthing'); оленья кожа матч ничего после того, как вы перезаписать, что DIV с $detailDiv.replaceWith(data);

Я не знаю, что data так я не могу быть уверен, но я бы сделал

$('#superdatadivthing').html(data);

и изменить data поэтому он имеет только внутренний HTML

или добавить $detailDiv[0].id = 'superdatadivthing'; после необходимости замены

или включают в себя один и тот же идентификатор у вас есть в селекторном сценарий, который выводит эти данные