0

在一个 jQuery Mobile 应用程序中，我使用 Ajax 加载具有动态内容的页面。现在，我想在该页面上添加一个“重新加载”按钮。

考虑index.html：

<div data-role="page" id="home">
  <div data-role="header"><h1>Home</h1></div>
  <div data-role="content"><a href="time.php">Time</a></div>
</div>

并且time.php：

<div data-role="page" data-add-back-btn="true" id="time">
  <div data-role="header"><h1>Time</h1></div>
  <div data-role="content">
     <p><?= date(DATE_RFC822)?></p>
     <a href="#" data-role="button" data-icon="refresh">Reload</a>
  </div>
</div>

我现在可以在“主页”和“时间”页面之间来回导航，到达“时间”页面时时间会更新，但我希望“重新加载”按钮重新加载“时间”页面。也就是说：它应该对 进行 Ajax 请求time.php，并从响应中重新创建“时间”页面（同时显示“页面加载”指示器）。

我怎样才能做到这一点？

4

2 回答 2

1

在查看了的代码后changePage，loadPage我想出了一个更简单的解决方案：

$('.reload').live('click', function(e) {
  $.mobile.changePage($.mobile.activePage.jqmData('url'), {
    reloadPage: true,
    changeHash: false,
    transition: 'none'
  });
  e.preventDefault();
});

请注意，JQM 仍然会在旧版本页面和新版本之间转换；最好不要使用方向感强的过渡（如“幻灯片”）。

这preventDefault似乎不是绝对必要的，但我添加它是为了很好的衡量标准。

于 2012-09-24T10:40:40.950 回答
0

使用 hijax 样式的链接时，这似乎是不可能的。但是，您可以使用多页 HTML 文档并在pagebeforechange事件中自己加载动态页面内容。

所以在 中index.html，我已经添加了内容为空的“时间”页面：

<div data-role="page" id="home"> 
  <div data-role="header"><h1>Home</h1></div> 
  <div data-role="content"><a href="#time">Time</a></div> 
</div> 

<div data-role="page" data-add-back-btn="true" id="time"> 
  <div data-role="header"> 
    <h1>Time</h1> 
    <a href="#" class="reload ui-btn-right" data-role="button" data-icon="refresh">Reload</a> 
  </div> 
  <div data-role="content"></div> 
</div>

接下来，我拦截pagebeforechange事件：如果是“时间”页面，我们将从 URL 加载页面内容time.php。

$(document).bind('pagebeforechange', function(e, data) {
    if(typeof data.toPage == 'string') {
        var u = $.mobile.path.parseUrl(data.toPage);
        if(u.hash == "#time") {
            loadPageContent($('#time'), 'time.php', data.options);
            e.preventDefault();
        }
    }
});

由于我想在更改页面之前等待 Ajax 请求返回，因此我阻止了页面更改；loadPageContent将不得不这样做。

loadPageContent我可以为“重新加载”按钮做类似的事情：

$(document).ready(function() {
    $('#time .reload').bind('click', function(e) {
        loadPageContent($('#time'), 'time.php', undefined, $(e.target).closest(".ui-btn"));
    });
});

这是代码loadPageContent：

function loadPageContent(page, url, options, button) {
    if(typeof button != "undefined")
        button.addClass($.mobile.activeBtnClass);
    $.mobile.showPageLoadingMsg($.mobile.loadingMessageTheme, $.mobile.loadingMessage, $.mobile.loadingMessageTextVisible);
    var content = page.children(':jqmData(role=content)');
    content.load(url, function(response, status, xhr) {
        if(status == "success") {
            page.page();
            content.trigger('create');
            $.mobile.hidePageLoadingMsg();
            if(typeof button != "undefined")
                button.removeClass($.mobile.activeBtnClass);
            $.mobile.changePage(page, options);
        } else {
            $.mobile.hidePageLoadingMsg();
            $.mobile.showPageLoadingMsg($.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true);
            setTimeout(function() {
                $.mobile.hidePageLoadingMsg();
                if(typeof button != "undefined")
                    button.removeClass($.mobile.activeBtnClass);
            }, 1000);
        }
    });
}

这已经是一个相当精致的版本了：它会显示页面加载消息，并且在请求失败时会显示 1s 的错误消息。在成功请求结束时，它将使用create触发器增强内容，并进行页面更改。如果传递了重新加载按钮，它将在操作进行时将此按钮标记为活动。

于 2012-09-20T14:48:54.010 回答