JQueryMobile：转换到结果页面后进行Ajax调用

Question

我正在尝试使用JQM来构建以下序列：

1. 用户按Page Go上的Go。
   <a href="userListPage.jsp" data-role="button" data-inline="true">Go</a>
2. 转换为userListPage
3. 显示“正在加载”动画并进行Ajax调用获取结果并在userListPage上填充列表。

正常的JQM方式是在步骤1之后显示加载动画并转换到显示结果列表的userListPage。

但我想首先显示Result页面，然后加载实际数据（通过Ajax）。

我尝试过关注，但这甚至没有进行Ajax调用。

<script>
var mainloaded = false;
$('.userListPage').live('pageshow', function(event) {   //Workaround to show page loading on initial page load
    if(!mainloaded) {
        $.mobile.showPageLoadingMsg();
    }
});

$('.userListPage').live('pagecreate', function(event) {
    jQuery.ajax({
        url: "getUserList",  
        type: "GET",
        data: dataVar,
        success: function(result) 
        {   
            $.mobile.hidePageLoadingMsg();
            mainloaded = true;
            userListContent.innerHTML = result;
        },
        error: function(e){  
            $.mobile.hidePageLoadingMsg();
            alert('Error: ' + e);
        }   
    });
});

有关如何执行此操作的任何建议吗？

Answer 1

是否触发了pageshow事件？此外，您可能希望为ajax调用绑定到pageshow事件。像这样：

$('.userListPage').live('pageshow', function(event) {
    $.mobile.showPageLoadingMsg();
    jQuery.ajax({
        url: "getUserList",  
        type: "GET",
        data: dataVar,
        success: function(result) 
        {   
            $.mobile.hidePageLoadingMsg();
            userListContent.innerHTML = result;
        },
        error: function(e){  
            $.mobile.hidePageLoadingMsg();
            alert('Error: ' + e);
        }   
    });
});