Thông báo tải Jquery Mobile 1.2RC-1 không hiển thị

Question

Tôi đang cố gắng hiển thị, JQM 1.2 RC-1, tải thông báo trong lần khởi tạo ứng dụng/trang đầu tiên và mỗi khi người dùng quay lại trang #index. Sự hiểu biết của tôi về cách để làm điều này sẽ như sau, tuy nhiên, nó không hoạt động như tôi mong đợi. Điều này không hiển thị thông báo tải.

$('body').on('pagebeforeshow', '#index', function(){ 

    $.mobile.loading('show') 

    $('#index ul li').remove() 

    var post_data = { 
     action: 'an_action', 
     method: 'method' 
    } 

    $.ajax({ 
     type: 'POST', 
     url: ajaxurl, 
     data: post_data, 
     cache: false, 
     dataType: 'text', 
     cache: false, 
     success: function(response) { 

      $('#index ul').append(response) 

      $('#index ul').listview('refresh') 

      $.mobile.loading('hide') 

     }, 
     error: function(jqXHR, textStatus, errorThrown) { 

      console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 


}) 

Cách giải quyết mà tôi tìm thấy ở đây (stackoverflow) hoạt động để hiển thị thông báo tải khi tải.

$('#index').live('pageshow', function(event) { //Workaround to show page loading on initial page load 

    $.mobile.loading('show') 

}) 

Vấn đề tôi đang gặp là khi tôi hướng trở lại #INDEX và thông điệp tải là đôi khi loại bỏ và lần khác, nó vẫn còn.

Nếu thông báo tải đang hoạt động và tôi nhấp vào liên kết để thoát khỏi trang hiện tại, thông báo tải sẽ bị xóa như mong đợi. Khi tôi trở về từ cùng một liên kết đến #index, thông báo tải đôi khi bị xóa mà không làm mới trang trong trình duyệt.

Có phương pháp nào khác để đạt được thông báo tải trên ứng dụng ban đầu/tải trang web không?

Thông tin thêm:

Thử nghiệm trên iDevice chạy Safari iOS 6 và Chrome, Mac OSX Chrome, Safari, Firefox, Opera với kết quả tương tự.

jQuery Mobile 1.2 RC-1

Tôi đang sử dụng mẫu trang duy nhất và tiêm dữ liệu máy chủ vào danh sách sau đó chuyển sang khác nhau trang # id của.

tôi đã cố gắng nhưng không thành công:

$('#index').live('pageinit', function(event) { 

    $.mobile.loading('show') 

}) 

Các $ .ajax() được thành công được kích hoạt và hoàn thành như tôi có thể thay đổi dữ liệu máy chủ và nó được liên tục thay đổi trong ứng dụng.

Điều này gây nhầm lẫn vì $ .mobile.loading ('ẩn') cũng phải được kích hoạt và ẩn thông báo tải vì câu trả lời là thành công. Điều này khiến tôi tin rằng đó không phải là vấn đề về bộ nhớ đệm.

Answer 1

Đây là những gì tôi đã làm, tôi đã thêm một div vào nội dung của tôi với class = "my_style" ban đầu bị ẩn và khi thông báo hiển thị được hiển thị, đây là hai chức năng tùy chỉnh để hiển thị và ẩn nó:

function showCustomPageLoadingMsg(){ 
    $('.my_style').css('display','inline'); 
} 

function hideCustomPageLoadingMsg(){ 
    $('.my_style').css('display','none'); 
} 

và đây là cách tôi gọi các chức năng: $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); và $.mobile.hideCustomPageLoadingMsg();

Một điểm khác biệt giữa mã của tôi và của bạn là tôi đặt cuộc gọi ajax và gọi hàm bên trong.sống:

function test(){ 
    $.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true); 

$('#index ul li').remove() 

var post_data = { 
    action: 'an_action', 
    method: 'method' 
    } 

$.ajax({ 
    type: 'POST', 
    url: ajaxurl, 
    data: post_data, 
    cache: false, 
    dataType: 'text', 
    cache: false, 
    success: function(response) { 
     $.mobile.hideCustomPageLoadingMsg(); 
     $('#index ul').append(response) 

     $('#index ul').listview('refresh') 



     }, 
    error: function(jqXHR, textStatus, errorThrown) { 

     console.log(' => ' + jqXHR + ' => ' + textStatus + ' => ' + errorThrown) 

     } 
    }) 

} 

$('#index').live('pageinit', function(event) { 

test(); 

}); 

lỗ Vòng trong mã của bạn:

1. Rất nhiều mã thiếu một dấu chấm phẩy ở cuối dòng mã ; Đây là một dấu phân cách chuẩn
2. Bạn đang lẩn trốn của bạn sau khi bạn đã thêm nội dung html vào chức năng thành công của mình. Điều này nên được thực hiện trước.
3. Cuối cùng cố gắng sử dụng lập trình hàm để bạn có thể sử dụng lại mã trong các trường hợp khác nhau và về lâu dài nếu bạn phải thay đổi mã, bạn sẽ chỉ thực hiện các thay đổi ở một nơi.
4. Một điều nữa là, với lập trình hàm, bạn có thể giới thiệu các biến kiểm tra() có thể lấy và thay thế chúng trong định nghĩa kiểm tra.

Chúc vui vẻ!