Question

我试图在初始应用程序/站点初始化期间以及每次用户返回#index页面时显示JQM 1.2 RC-1，加载消息。我对如何做到这一点的理解如下，然而，它没有像我期望的那样工作。这不会显示加载消息。

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

        }
    })  


})

我在这里找到的解决方法（stackoverflow）用于显示加载时的加载消息。

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

    $.mobile.loading('show')

})

我遇到的问题是，当我导航回#index并且加载消息有时被删除时，其他时候它仍然存在。

如果加载消息处于活动状态，并且我单击链接以退出当前页面，则会按预期删除加载消息。当我从同一链接返回到#index时，有时会删除加载消息，而不会在浏览器中刷新页面。

是否有其他方法可以在初始应用程序/站点加载时实现加载消息？

其他信息：

在运行Safari iOS 6和Chrome，Mac OSX Chrome，Safari，Firefox，Opera的iDevice上测试，结果相同。

jQuery Mobile 1.2 RC-1

我正在使用单页模板并将服务器数据注入列表，然后转换到不同的页面#id。

我尝试过没有成功：

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

    $.mobile.loading('show')

})

$ .ajax（）已成功触发并完成，因为我可以更改服务器数据，并且它在应用程序中始终更改。

这很令人困惑，因为$ .mobile.loading（'hide'）也应该被触发并隐藏加载消息，因为响应成功。这让我相信它不是一个缓存问题。

Answer 1

这就是我所做的，我在class =＆＃34; my_style＆＃34;中为我的内容添加了一个div。最初是隐藏的，当显示showpageloading消息时，这些是显示它并隐藏它的两个自定义函数：

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

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

这就是我调用函数的方式：$.mobile.showCustomPageLoadingMsg('f','Lookup in Progress', true);和$.mobile.hideCustomPageLoadingMsg();

我的代码和你的代码之间的另一个区别是我把ajax调用和被调用的函数放在.live中：

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();

});

代码中的循环漏洞：

许多代码在代码行;末尾缺少分号。这是标准分隔符
在成功功能中添加html内容后，您隐藏了消息。这应该在之前完成。
最后尝试使用函数式编程，以便您可以在不同的场景中重用代码，如果必须更改代码，只需在一个地方执行更改。
另一方面，通过函数式编程，您可以引入test（）可以采用的变量，并在test的定义中替换它们。

快乐的黑客攻击!!!

Jquery Mobile 1.2RC-1加载消息未显示

1 个答案: