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

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("隐藏")也应被触发,因为响应隐藏加载消息是成功的.这让我相信它不是一个缓存问题.

Answer 1

这就是我所做的，我使用 class="my_style" 在内容中添加了一个 div，该 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();

});

代码中存在循环漏洞：

1. 很多代码在代码行末尾缺少分号;这是标准分隔符
2. 在成功函数中附加 html 内容后，您将隐藏消息。这应该在之前完成。
3. 最后尝试使用函数式编程，以便您可以在不同的场景中重用代码，从长远来看，如果您必须更改代码，您将只在一处执行更改。
4. 另一件事是，通过函数式编程，您可以引入 test() 可以采用的变量并在 test 的定义中替换它们。

黑客快乐！