Implement a loading indicator for a jQuery AJAX call

Question

I have a Bootstrap modal which is launched from a link  For about 3 seconds it just sits there blank  while the AJAX query fetches the data from the database  How can I implement some sort of a loading indicator  Does twitter bootstrap provide this functionality by default   EDIT  JS code for modal   lt script type  text javascript  gt        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 lt  row-fluid  lt  span6 l gt  lt  span6 f gt r gt t lt  row-fluid  lt  span6 i gt  lt  span6 p gt  gt                 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           lt  script gt

User · Answer

This is how I got it working with loading remote content that needs to be refreshed:

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

Basically, just replace the modal content while it's loading with a loading message. The content will then be replaced once it's finished loading.

User · Answer

I m guessing you re using jQuery get or some other jQuery ajax function to load the modal  You can show the indicator before the ajax call  and hide it when the ajax completes  Something like      indicator   show        someModal   get anUrl  someData  function         indicator   hide

User · Answer

There is a global configuration using jQuery  This code runs on every global ajax request    lt div id  ajax loader  style  position  fixed  left  50   top  50   display  none   gt       lt img src  themes img ajax-loader gif  gt  lt  img gt   lt  div gt    lt script type  text javascript  gt      jQuery function                document  ajaxStop function                    ajax loader   hide                            document  ajaxStart function                     ajax loader   show                                  lt  script gt    Here is a demo  http   jsfiddle net sd01fdcm

User · Answer

A loading indicator is simply an animated image   gif  that is displayed until the completed event is called on the AJAX request  http   ajaxload info  offers many options for generating loading images that you can overlay on your modals  To my knowledge  Bootstrap does not provide the functionality built-in

User · Answer

This is how I realised the loading indicator by an Glyphicon    lt  DOCTYPE html gt   lt html gt    lt head gt       lt title gt Demo lt  title gt        lt link rel  stylesheet  href  https   ajax aspnetcdn com ajax bootstrap 3 3 6 css bootstrap min css  gt       lt script src  https   ajax aspnetcdn com ajax jQuery jquery-1 12 4 min js  gt  lt  script gt       lt script src  https   ajax aspnetcdn com ajax bootstrap 3 3 6 bootstrap min js  gt  lt  script gt        lt style gt           gly-ani             animation  ani 2s infinite linear                     keyframes ani             0                transform  rotate 0deg                         100                transform  rotate 359deg                              lt  style gt     lt  head gt    lt body gt   lt div class  container  gt        lt span class  glyphicon glyphicon-refresh gly-ani  style  font-size 40px   gt  lt  span gt    lt  div gt   lt  body gt    lt  html gt

User · Answer

I solved the same problem following this example     This example uses the jQuery JavaScript library     First  create an Ajax icon using the AjaxLoad site  Then add the following to your HTML      lt img src   images loading gif  id  loading-indicator  style  display none    gt    And the following to your CSS file     loading-indicator     position  absolute    left  10px    top  10px      Lastly  you need to hook into the Ajax events that jQuery provides  one event handler for when the Ajax request begins  and one for when it ends     document  ajaxSend function event  request  settings            loading-indicator   show           document  ajaxComplete function event  request  settings            loading-indicator   hide          This solution is from the following link  How to display an animated icon during Ajax request processing

[javascript] Implement a loading indicator for a jQuery AJAX call

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to ajax