Spinner innerhalb von Modal, während auf Daten zum Laden gewartet wird

Question

Ich habe eine Liste von Elementen, denen jeweils ein Abzeichen angehängt ist. Wenn Sie auf das Abzeichen klicken, wird eine Tabelle aus einer Teilansicht geladen.

Dies ist meine Schleife für die Abzeichen:

@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>  
} 

Diese URL Aktion innerhalb der Daten-Buch-ID wird mir sagen, welche Teilansicht zu laden.

Das ist mein Modal:

<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> 

Das Problem ist, wenn ich die Seite zuerst geladen werden manchmal die .html(data) wird nicht angezeigt:

<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> 

Das Skript es im Inneren des modalen dies zu laden Ich wollte sofort einen Spinner, während er wartet. Wie kann ich das machen?

Answer 1

Wir verwenden hanscreen.js. Es ist sehr einfach zu bedienen und available on github. Alle müssen Sie ein- oder auszublenden ist:

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

und betten diese an der entsprechenden Stelle, die sein würde:

$('#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(); 
    }); 
}); 

Sie sollten auch einige Fehler hinzufügen, da Handhabung, wenn Fehler auftreten, die modale wird nie verschwinden ...

Answer 2

Sie können ein lodging gif Bild als Inhalt von .modal-body div setzen, bevor Sie den Ajax aufrufen. Wenn Ihr Ajax-Anruf die Antwort vom Server erhält, wird er von dieser Antwort überschrieben.