SORU
14 AĞUSTOS 2012, Salı


Nasıl bootstrap kalıcı AJAX sunucudan veri almak için beklerken bir yükleme göstergesi uygulamak için?

Bir link ile piyasaya olan bootstrap kalıcı var. Yaklaşık 3 saniye sadece AJAX sorgu veritabanından veri alır iken orada boş oturuyor. Nasıl yükleniyor bir göstergesi çeşit uygulayabilir miyim ? Twitter bootstrap bu varsayılan olarak işlevsellik sağlar mı ?

EDİT: mod için JS kodu

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

CEVAP
21 ŞUBAT 2013, PERŞEMBE


Bu örnek aynı sorunu çözdüm:

Bu örnekte jQuery JavaScript Kütüphanesi kullanır.

İlk olarak, bir Ajax simgesi AjaxLoad site kullanarak oluşturun.
Ekle HTML için aşağıdaki :

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

Ve CSS için aşağıdaki dosya:

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

Son olarak, Ajax jQuery sağlayan olaylar; Ajax isteği başladığında için bir olay işleyicisi ve ne zaman bittiği için bir kanca gerekir:

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

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

Bu çözüm aşağıdaki linkte. How to display an animated icon during Ajax request processing

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • LaKe Lightroom Tutorials

    LaKe Lightro

    22 Temmuz 2014
  • SaraBeautyCorner - Nails and Nail Art Designs, DIY, Fashion & Makeup Tutorial

    SaraBeautyCo

    7 EKİM 2012
  • williamfitzsimmons

    williamfitzs

    14 Mart 2008