Come implementare un indicatore di caricamento per un modal bootstrap in attesa che AJAX recuperi i dati dal server?

Question

Ho un modal bootstrap che viene lanciato da un collegamento. Per circa 3 secondi rimane vuoto, mentre la query AJAX recupera i dati dal database. Come posso implementare una sorta di indicatore di caricamento? Twitter bootstrap fornisce questa funzionalità per impostazione predefinita?

EDIT: il codice JS per modale

<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

Sto indovinando che si sta utilizzando jQuery.get o qualche altra funzione ajax jQuery per caricare il modale. Puoi mostrare l'indicatore prima della chiamata ajax e nasconderlo quando l'ajax completa. Qualcosa di simile

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

Answer 2

Un indicatore di carico è semplicemente un'immagine animata (.gif) che viene visualizzato fino a quando l'evento completato viene chiamato sulla richiesta AJAX. http://ajaxload.info/ offre molte opzioni per generare immagini di caricamento che puoi sovrapporre alle tue modal. A mia conoscenza, Bootstrap non fornisce funzionalità integrate.

Answer 3

ho risolto lo stesso problema seguendo questo esempio:

questo esempio viene utilizzata la libreria jQuery JavaScript.

Innanzitutto, creare un'icona Ajax utilizzando AjaxLoad site.
quindi aggiungere il seguente al vostro HTML:

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

E la seguente al file CSS:

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

Infine, è necessario collegare negli eventi Ajax che jQuery fornisce; un gestore di eventi per quando inizia la richiesta Ajax, e uno per quando finisce:

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

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

Questa soluzione è diverso dal seguente link. How to display an animated icon during Ajax request processing

Answer 4

Esiste una configurazione globale che utilizza jQuery. Questo codice funziona su ogni richiesta globale di 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> 

Ecco una demo: http://jsfiddle.net/sd01fdcm/

Answer 5

Ecco come ho ottenuto che funziona con il caricamento di contenuti a distanza che ha bisogno di essere aggiornata:

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

In sostanza, basta sostituire il contenuto modale mentre è caricamento con un messaggio di caricamento. Il contenuto verrà quindi sostituito una volta completato il caricamento.

Answer 6

Questo è come mi sono reso conto l'indicatore di caricamento da un 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>