একটি jQuery AJAX কল জন্য একটি লোডিং সূচক কার্যকর করুন

Question 1

আমার একটি বুটস্ট্র্যাপ মডেল রয়েছে যা একটি লিঙ্ক থেকে লঞ্চ হয়েছে। প্রায় 3 সেকেন্ডের জন্য এটি কেবল খালি বসে আছে, যখন এজেএক্স ক্যোয়ারী ডাটাবেস থেকে ডেটা আনছে। আমি কীভাবে কোনও লোডিং সূচকটি প্রয়োগ করতে পারি? টুইটার বুটস্ট্র্যাপ ডিফল্টরূপে এই কার্যকারিতাটি সরবরাহ করে?

সম্পাদনা: মডেলের জন্য জেএস কোড

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

Question 2

আমি অনুমান করছি আপনি মডেলটি লোড করার জন্য আপনি jQuery.get বা কিছু অন্যান্য jQuery এজ্যাক্স ফাংশন ব্যবহার করছেন। আপনি আজাক্স কল করার আগে সূচকটি প্রদর্শন করতে পারেন এবং এজ্যাক্সটি শেষ হলে এটি লুকিয়ে রাখতে পারেন। কিছুটা এইরকম

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

Question 3

এই উদাহরণটি অনুসরণ করে আমি একই সমস্যার সমাধান করেছি:

এই উদাহরণটি jQuery জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে।

প্রথমে অ্যাজাক্সলড সাইটটি ব্যবহার করে একটি অ্যাজাক্স আইকন তৈরি করুন ।
তারপরে আপনার HTML এ নিম্নলিখিতগুলি যুক্ত করুন:

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

এবং আপনার সিএসএস ফাইলে নিম্নলিখিতগুলি:

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

শেষ অবধি, আপনাকে jQuery সরবরাহ করে এমন অ্যাজাক্স ইভেন্টগুলিতে প্রবেশ করতে হবে; আজাক্স অনুরোধটি কখন শুরু হয় এর জন্য একটি ইভেন্ট হ্যান্ডলার এবং অন্যটি কখন শেষ হয়:

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

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

এই সমাধানটি নিম্নলিখিত লিঙ্ক থেকে। অ্যাজাক্স অনুরোধ প্রক্রিয়া করার সময় কীভাবে একটি অ্যানিমেটেড আইকন প্রদর্শন করতে হয়

Question 4

JQuery ব্যবহার করে একটি বৈশ্বিক কনফিগারেশন রয়েছে। এই কোডটি প্রতিটি বিশ্বব্যাপী এজাক্স অনুরোধে চলে।

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

এখানে একটি ডেমো: http://jsfiddle.net/sd01fdcm/

Question 5

একটি লোডিং ইন্ডিকেটরটি কেবল একটি অ্যানিমেটেড চিত্র (.gif) যা সম্পূর্ণ ইভেন্টটি AJAX অনুরোধে ডাকা না হওয়া পর্যন্ত প্রদর্শিত হয়। http://ajaxload.info/ লোডিং চিত্রগুলি তৈরি করার জন্য অনেকগুলি বিকল্প সরবরাহ করে যা আপনি আপনার মডেলগুলিতে ওভারলে করতে পারেন। আমার জানা মতে, বুটস্ট্র্যাপ অন্তর্নির্মিত কার্যকারিতা সরবরাহ করে না।

Question 6

এইভাবে আমি রিমোট কন্টেন্ট লোড করে এটি কাজ করেছিলাম যা রিফ্রেশ করা দরকার:

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

মূলত, মোডাল সামগ্রীটি কোনও লোডিং বার্তার সাথে লোড হওয়ার সময় প্রতিস্থাপন করুন। এটি লোড করা শেষ হয়ে গেলে সামগ্রীটি প্রতিস্থাপন করা হবে।

Question 7

এইভাবে আমি কোনও গ্লাইফিকন দ্বারা লোডিং সূচকটি উপলব্ধি করেছিলাম:

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