데이터가로드 될 때까지 대기하는 동안 모달 내부 회 전자

Question

각 항목에 배지가 첨부 된 목록이 있습니다. 배지를 클릭하면 부분보기에서 표가로드됩니다. 데이터 책-ID 내부 URL 작업로드 부분있는보기 말해 것

@foreach (var item in Model) 
    { 
     <li> 
      <a href="#my_modal" data-toggle="modal" data-book-id="@Url.Action("AssociatedToHideout", "Hideout", new { id = item.HideoutID })"> 
       <span class="badge-rounded bg-red">@Html.Action("TaskCount", "Hideout", new { id = @item.HideoutID })</span>     
      </a> 
      <div class="item">    
       <a href='@Url.Action("Index", "Hideout", new { id = @item.HideoutID })'> 
        <img src="~/Assets/img/database.png"> 
        <span class="caption">@item.Name</span> 
       </a> 
      </div> 

     </li>  
} 

그건 :

이는 배지 내 루프입니다. 때로는 .html(data)가 표시되지 않습니다 처음 페이지를로드 할 때

<script> 
    $('#my_modal').on('show.bs.modal', function(e) { 
     var bookId = $(e.relatedTarget).data('book-id'); 

     $.get(bookId, function (data) { 
      $(e.currentTarget).find('.modal-body').html(data); 
     }); 
    }); 

    $('#my_modal').on('hidden.bs.modal', function(e) { 
    $(e.currentTarget).find('.modal-body').text(''); 
    }); 
</script> 

문제는 다음과 같습니다

<div class="modal" id="my_modal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title">Modal header</h4> 
      </div> 
      <div class="modal-body"> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

모달 내부를로드하는 스크립트는 이것이다 :

이

내 모달입니다 곧바로 기다리고있는 동안 회 전자가 나타나기를 바랐다. 어떻게해야합니까?

Answer 1

우리는 waitscreen.js를 사용합니다. 사용하기가 매우 쉽고 available on github입니다. 모든 당신이 보여줄 필요하거나 숨길는 다음과 같습니다

//Show options 
waitScreen.show(); 
waitScreen.show("Message"); 
//Then hide 
waitScreen.hide(); 

될 것이다, 적절한 장소에서 다음을 포함 : 오류가 발생하는 경우

$('#my_modal').on('show.bs.modal', function(e) { 
    var bookId = $(e.relatedTarget).data('book-id'); 
    waitScreen.show(); 

    $.get(bookId, function (data) { 
     $(e.currentTarget).find('.modal-body').html(data); 
     waitScreen.hide(); 
    }); 
}); 

또한, 모달 때문에 처리 일부 오류를 추가해야 ...

Answer 2

ajax 호출을하기 전에 loding gif 이미지를 .modal-body div의 내용으로 설정할 수 있습니다. 귀하의 아약스 호출 서버에서 응답을 얻을 때, 그 응답에 의해 덮어 씁니다.

$('#my_modal').on('show.bs.modal', function(e) { 
    var bookId = $(e.relatedTarget).data('book-id'); 
    var imgUrl="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif"; 
    var $loading = $("<img />").attr("src",imgUrl) 

    $(e.currentTarget).find('.modal-body').html($loading); 

    $.get(bookId, function (data) { 
     $(e.currentTarget).find('.modal-body').html(data); 
    }); 
});