Hiển thị trang Đang tải Spinner trên cuộc gọi Ajax trong jQuery Mobile

Question

Tôi đang sử dụng $ .ajax() để điền danh sách trong ứng dụng web di động của mình. Những gì tôi muốn làm là có trình tải xuống di động jQuery xuất hiện trong khi cuộc gọi này đang được thực hiện và biến mất khi danh sách được điền. Phiên bản hiện tại của JQM sử dụng $.mobile.showPageLoadingMsg() và $.mobile.hidePageLoadingMsg() để hiển thị và ẩn trình xoay tải, tương ứng. Tôi không thể tìm ra nơi chính xác để đặt các báo cáo này để có được kết quả chính xác. Điều này có vẻ như nó phải là một điều khá dễ dàng để thực hiện, tôi chỉ không thể tìm thấy bất cứ điều gì về kịch bản chính xác này.

Dưới đây là cuộc gọi ajax bên trong hàm pagecreate:

$('#main').live('pagecreate', function(event) { 
     $.ajax({ 
      url: //url 
      dataType: 'json', 
      headers: //headers 
      success: function(data) { 
       for(i = 0; i < data.length; i++) { 
        $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>'); 
        $('#course' + data[i].id).listview(); 
        for(j = 0; j < data[i].evaluatedUserIds.length; j++) { 
         $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>'); 
        } 
        $('#course' + data[i].id).listview('refresh'); 
       } 
       $('#courses').listview('refresh'); 
      } 
     }); 
    }); 

Answer 1

Một vài người đã hỏi về giải pháp thay thế mà tôi đã kết thúc triển khai, vì vậy tôi đã quyết định chia sẻ nó. Nó không có gì đặc biệt thanh lịch hay phức tạp, nhưng dường như nó có hiệu quả. Tôi đã không sử dụng khuôn khổ kể từ khi chính thức 1.0 được phát hành, vì vậy điều này có thể đã được giải quyết trong bản cập nhật. Về cơ bản, tôi đặt cuộc gọi $.mobile.showPageLoadingMsg() vào pageshow chức năng, nhưng bọc nó trong một mệnh đề if rằng chỉ bắn lần đầu tiên trang được hiển thị:

var mainloaded = false; 

$('#main').live('pageshow', function(event) { //Workaround to show page loading on initial page load 
    if(!mainloaded) { 
    $.mobile.showPageLoadingMsg(); 
    } 
}); 

$('#main').live('pagecreate', function(event) { 
    $.ajax({ 
     url: //url 
     dataType: //datatype, 
     headers: //headers 
     success: function(data) { 
      // 
      //...loading stuff 
      // 
      $.mobile.hidePageLoadingMsg(); 
      mainloaded = true; 
     } 
     // 
     //...handle error, etc. 
     // 
    }); 
}); 

Answer 2

Bạn nên làm $ .mobile.showPageLoadingMsg() ngay trước khi cuộc gọi ajax, và $ .mobile.hidePageLoadingMsg() trong thành công (hoặc thất bại) khối để nó biến mất sau khi kết quả trả về.

Tôi chưa bao giờ sử dụng jQuery mobile, nhưng nó sẽ hoạt động giống như hiển thị/ẩn hình ảnh quay tròn thông thường.

Answer 3

Bạn có thể sử dụng các sự kiện beforeSend và complete của $.ajax để gọi $.mobile.showPageLoadingMsg và $.mobile.hidePageLoadingMsg. Sẽ trông như thế này:

$('#main').live('pagecreate', function(event) { 
     $.ajax({ 
      beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner 
      complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner 
      url: //url 
      dataType: 'json', 
      headers: //headers 
      success: function(data) { 
       //... 
      } 
     }); 
    }); 

Answer 4

Đây là hơi muộn ... nhưng bạn cần phải:

1. Gọi $.mobile.showPageLoadingMsg() trước khi cuộc gọi AJAX.
2. Thực hiện cuộc gọi AJAX. Cuộc gọi cần được gửi không đồng bộ (đặt async: true trong cuộc gọi của bạn).
3. Thêm $.mobile.hidePageLoadingMsg() vào chức năng success() của bạn.

Answer 5

Vấn đề ở đây là các cuộc gọi đến $ .ajax() xảy ra trong luồng điều khiển của trình xử lý sự kiện (người gọi).

Một cách rất đơn giản để tách các yêu cầu ajax từ dòng điều khiển này là để cho setTimeout() gọi hàm này cho bạn, như vậy:

setTimeout(function(){$.ajax(...)}, 1); 

Sau đó bạn có thể sử dụng 'beforeSend' và 'hoàn chỉnh 'sự kiện của $ .ajax() như đã nêu trước đây và chắc chắn rằng spinner của bạn đang hiển thị.

Answer 6

Trước JQM 1.2:

$(document).ajaxStart(function() { 
    $.mobile.showPageLoadingMsg(); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.hidePageLoadingMsg(); 
}); 

Kể từ JQM 1.2:

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
}); 

http://api.jquerymobile.com/page-loading/

Answer 7

$(document).ajaxSend(function() { 
    $.mobile.loading('show'); 
}); 
$(document).ajaxComplete(function() { 
    $.mobile.loading('hide'); 
}); 

Answer 8

Hoặc, cách đơn giản nhất là đặt nó trên toàn cầu như một sự tách biệt quan tâm -

Đặt mã dưới đây vào xem chủ/bố trí của bạn

<script type="text/javascript"> 

    $(document).bind('mobileinit', function() { 
     //Loader settings 
     $.mobile.loader.prototype.options.text = "Loading.."; 
     $.mobile.loader.prototype.options.textVisible = true; 
     $.mobile.loader.prototype.options.theme = "b"; 
     $.mobile.loader.prototype.options.textonly = false; 
    }); 

    $(document).on({ 
     ajaxSend: function() { $.mobile.showPageLoadingMsg(); }, 
     ajaxStart: function() { $.mobile.showPageLoadingMsg(); }, 
     ajaxStop: function() { $.mobile.hidePageLoadingMsg(); }, 
     ajaxError: function() { $.mobile.hidePageLoadingMsg(); } 
    }); 

</script> 

Chỉnh sửa: Vui lòng sử dụng thay vào đó nếu bạn là nhắm mục tiêu phiên bản JQM mới nhất (> 1.2):

• $ .mobile.loading ('show');
• $ .mobile.loading ('ẩn');