Jak zaimplementować wskaźnik ładowania modala początkowego, czekając, aż AJAX pobierze dane z serwera?

Question

Mam mod bootstrap, który jest uruchamiany z linku. Przez około 3 sekundy jest po prostu puste, a zapytanie AJAX pobiera dane z bazy danych. Jak mogę zaimplementować jakiś wskaźnik ładowania? Czy funkcja bootstrap Twittera zapewnia tę funkcję domyślnie?

EDIT: kod JS dla modalnego

<script type="text/javascript"> 
    $('#myModal').modal('hide'); 
    $('div.divBox a').click(function(){ 
    var vendor = $(this).text(); 
    $('#myModal').off('show'); 
    $('#myModal').on('show', function(){    
     $.ajax({ 
     type: "GET", 
     url: "ip.php", 
     data: "id=" + vendor, 
     success: function(html){ 
      $("#modal-body").html(html); 
      $(".modal-header h3").html(vendor); 
      $('.countstable1').dataTable({ 
      "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", 
      "sPaginationType": "bootstrap", 
      "oLanguage": { 
       "sLengthMenu": "_MENU_ records per page" 
      }, 
      "aaSorting":[[0, "desc"]], 
      "iDisplayLength": 10, 
      "oTableTools": { 
       "sSwfPath": "swf/copy_csv_xls_pdf.swf", 
       "aButtons": ["csv", "pdf"] 
      } 
      }); 
     } 
     }); 
    }); 
    }); 
    $('#myModal').on('hide', function() { 
    $("#modal-body").empty(); 
    }); 
</script> 

Answer 1

Zgaduję używasz jQuery.get lub innej funkcji ajax jQuery załadować modalnej. Możesz pokazać wskaźnik przed wywołaniem ajax i ukryć go po zakończeniu ajax. Coś jak

$('#indicator').show(); 
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); }); 

Answer 2

wskaźnik ładowania jest po prostu animowany obraz (.gif), który jest wyświetlany aż zakończone zdarzenie nazywa na żądanie AJAX. http://ajaxload.info/ oferuje wiele opcji generowania ładowania obrazów, które można nakładać na swoje modały. Według mojej wiedzy Bootstrap nie zapewnia wbudowanej funkcjonalności.

Answer 3

I rozwiązać ten sam problem z następującym przykładem:

Przykład ten korzysta z biblioteki jQuery JavaScript. Najpierw utwórz ikonę Ajax, używając AjaxLoad site.
Następnie dodać następujące HTML:

<img src="/images/loading.gif" id="loading-indicator" style="display:none" /> 

I następujące do pliku CSS:

#loading-indicator { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

Wreszcie, trzeba podpiąć do wydarzeń, które Ajax jQuery przewiduje; jedna procedura obsługi zdarzeń dla rozpoczęcia żądania Ajax, a druga dla zakończenia:

$(document).ajaxSend(function(event, request, settings) { 
    $('#loading-indicator').show(); 
}); 

$(document).ajaxComplete(function(event, request, settings) { 
    $('#loading-indicator').hide(); 
}); 

To rozwiązanie znajduje się pod poniższym linkiem. How to display an animated icon during Ajax request processing

Answer 4

Istnieje globalna konfiguracja za pomocą jQuery. Ten kod działa na każdym globalnym żądaniu ajax.

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;"> 
    <img src="themes/img/ajax-loader.gif"></img> 
</div> 

<script type="text/javascript"> 
    jQuery(function ($){ 
     $(document).ajaxStop(function(){ 
      $("#ajax_loader").hide(); 
     }); 
     $(document).ajaxStart(function(){ 
      $("#ajax_loader").show(); 
     });  
    });  
</script> 

Oto demo: http://jsfiddle.net/sd01fdcm/

Answer 5

To jak mam go pracy z ładowania zdalnej zawartości, która musi być odświeżane:

$(document).ready(function() { 
    var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>'; 

    // This is need so the content gets replaced correctly. 
    $("#myModal").on("show.bs.modal", function (e) { 
     $(this).find(".modal-content").html(loadingContent);   
     var link = $(e.relatedTarget); 
     $(this).find(".modal-content").load(link.attr("href")); 
    });  

    $("#myModal2").on("hide.bs.modal", function (e) { 
     $(this).removeData('bs.modal'); 
    }); 
}); 

Zasadniczo wystarczy zastąpić modalnego zawartości natomiast to ładowanie za pomocą wiadomości ładującej. Zawartość zostanie następnie zastąpiona po zakończeniu ładowania.

Answer 6

ten sposób zdałem sobie sprawę, wskaźnik ładowania przez Glyphicon:

<!DOCTYPE html> 
<html> 

<head> 
    <title>Demo</title> 

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script> 

    <style> 
     .gly-ani { 
      animation: ani 2s infinite linear; 
     } 
     @keyframes ani { 
      0% { 
      transform: rotate(0deg); 
      } 
      100% { 
      transform: rotate(359deg); 
      } 
     } 
    </style> 
</head> 

<body> 
<div class="container"> 

    <span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span> 

</div> 
</body> 

</html>