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

在jQuery Mobile应用程序中，我使用Ajax来加载包含动态内容的页面。现在，我想添加一个“重新加载”按钮到该页面。使用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请求，并从响应中重新创建“时间”页面（同时显示“页面加载”指示符）。

我该怎么做？

来源

2012-09-19 Bruno De Fraine

望着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-24 10:40:40

使用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); 
     } 
    }); 
}

这已经是一个相当复杂的版本：它会显示页面加载消息，并且当请求失败时它将显示1秒的错误消息。在成功请求结束时，它将通过create触发器增强内容，并且它将进行页面更改。如果重新加载按钮被传递，则在操作正在进行时将其标记为激活。

来源

2012-09-20 14:48:54

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

回答

相关问题