Bootstrap modal loading удаленный контент, генерирующий 2 запроса

Question

Я использую bootstrap modal для загрузки данных удаленно, по какой-то причине этот запрос отправляется на сервер дважды, а затем он испортил представление модального.

Модальные

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-dialog-middle modal-lg" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel"></h4> 
      </div> 
      <div class="modal-body"> 
       <i class='fa fa-refresh fa-spin fa-5x'></i> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

<a data-toggle="modal" id="@series.Id" href="@Url.Action("GetEpisodes")?id=@series.Id&title=@(Url.Encode(series.Title))" data-target="#myModal">@series.Title</a> 

Модальные Содержание После загрузки

<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="episodeModal">@Model.SeasonTitle</h4> 
</div> 
<div class="modal-body"> 
    @foreach (var kvp in Model.EpisodeViewModels) 
    { 
     <div class="panel panel-default"> 
      <div class="panel-heading panel-grid"> 
       @*<h4 class="panel-title">Season @kvp.Key</h4>*@ 

       <h4 class="col-md-1 panel-title-small text-left"></h4> 
       <h4 class="col-md-6 panel-title-small text-center">Title</h4> 
       <h4 class="col-md-2 panel-title-small text-center">Downloaded</h4> 
       <h4 class="col-md-2 panel-title-small text-center">Air Date</h4> 
       <h4 class="col-md-1 panel-title-small text-left">Search</h4> 
      </div> 
      <div class="panel-body"> 
       <small>Season @kvp.Key</small> 
       <div class="divider"></div> 
       @foreach (var ep in kvp.Value) 
       { 
        <div class="row"> 
         <div class="col-md-1 text-center">@ep.EpisodeNumber</div> 
         <div class="col-md-6">@ep.Title</div> 
         <div class="col-md-2 text-center">@Html.Raw(ep.HasFileIcon)</div> 
         <div class="col-md-2 text-center">@ep.AirDate.ToShortDateString()</div> 
         <div class="col-md-1 text-center"><i class="fa @FontAwesome.Search"><a class="episodeId" href="#" id="@ep.ID"></a></i></div> 
        </div> 
       } 
      </div> 
     </div> 
    } 

</div> 
<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
</div> 

JavaScript для обработки загрузки нескольких удаленных данных

$(function() { 
    $("a[data-target=#myModal]").click(function (ev) { 
     console.log("clicked"); 
     ev.preventDefault(); 
     var target = $(this).attr("href"); 

     // load the url and show modal on success 
     $("#myModal .modal-body").load(target, function() { 
      $("#myModal").modal("show"); 
      $('#myModal').modal('handleUpdate'); 
     }); 
    }); 
}); 

Обратите внимание, что проблема не возникает без вышеуказанного JS-кода.

Как я могу остановить это из-за этого, и для этого нужно только генерировать 1 запрос?

Answer 1

Если вы вручную добавили обработчик событий для модального, вы не хотите, чтобы атрибут data- был установлен на элемент, который автоматически выполняет ту же самую функцию при загрузке страницы.

Удалить атрибут data-toggle из элемента.

bootstrap.js библиотека выглядит для этих атрибутов и присваивает обработчик событий соответственно