6

我试图在初始应用程序/站点初始化期间以及每次用户返回#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 移动 1.2 RC-1

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

我试过没有成功：

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

    $.mobile.loading('show')

})

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

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

4

1 回答 1

1

这就是我所做的，我在我的内容中添加了一个 div，其中 class="my_style" 最初是隐藏的，当显示 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 的定义中替换它们。

快乐黑客！

于 2012-12-11T10:39:11.237 回答