Question

在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>

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

我该怎么做？

Answer 1

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

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

请注意，JQM仍将在旧版本的页面和新版本之间进行转换;最好不使用具有强烈方向感的过渡（如“幻灯片”）。

preventDefault似乎并非绝对必要，但我将其添加进行了很好的衡量。

使用jQuery Mobile将重新加载按钮添加到Ajax页面

1 个答案: