jQuery Mobile - 从链接或后退按钮重新加载 Ajax答案

【问题标题】：jQuery Mobile - Ajax Reload from Link or Back ButtonjQuery Mobile - 从链接或后退按钮重新加载 Ajax
【发布时间】：2014-02-28 21:09:58
【问题描述】：

好的，我已经尝试了一切，是时候请教专家了！

我有一个多页 JQM 应用程序。

index.html - 从这里开始并使用 Ajax 提取项目列表，效果很好 - 创建一个 ListView

streets.html - 一旦你点击 index.html 上的 ListView 项目，你就会来到这个页面，它会向下钻取并使用 Ajax 创建一个 ListView - 也可以正常工作

homes.html - 一旦你点击了streets.html 上的 ListView 项目，你就会来到这个页面，它会再次向下钻取并使用 Ajax 创建一个 ListView - 也可以正常工作

delivery.html - 单击 home.html 上的 ListView 项目后，您将进入此页面，我有一个表单来提交数据。提交数据工作正常。但是当我重定向到 home.html 时，我希望重新加载 Ajax 列表，但它不会。

我尝试过链接、changePage 等。无法让它刷新 home.html

这是homes.html的代码

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>

$(document).delegate('#streetListPageMain', 'pagecreate', function () {


    function getURLParameter(name) {
      return decodeURI(
       (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
       );
    }

    var street = getURLParameter('id');


        $.ajax({
              type: "Get",
              url: "addresses.php",
              data: {"id": street},
              success: function(data) {

                  $('#streetList li').remove();

                    var obj = $.parseJSON(data);

                    streets = obj.items;

                    $.each(streets, function(index, street) {

                        if (street.serial_number == null) {
                            $('#streetList').append('<li><a href="delivery.html?id=' +  encodeURIComponent(street.addressID) + '"  data-ajax="false">' +
                    '<h4>' +  street.house_number + ' ' +  street.street_name + ' </h4>' +
                    '</li>')
                        } else {
                            $('#streetList').append('<li><a href="delivery.html?id=' +  encodeURIComponent(street.addressID) + '"  data-ajax="false">' +
                    '<h4>' +  street.house_number + ' ' +  street.street_name + ' (completed) </h4>' +
                    '</li>')
                        }

                    });


                     $('#streetList').listview('refresh');
              }
        }); 







});

</script>
</head> 
<body> 


<div id="streetListPageMain" data-role="page" data-cache="false">


    <div data-role="header" data-position="fixed">
        <h1>Streets</h1>
</div>


    <div data-role="content">
         <ul id="streetList" data-role="listview" data-filter="true"></ul>
    </div>      

</div>

</body>
</html>

【问题讨论】：

所以你将
元素添加到 streetList

【解决方案1】：

这听起来像是历史上后退导航的典型问题。当您前进到下一页时，您通常也会传递参数，然后返回您需要以某种方式提供相同的 inout 数据。

我假设当您通过 ajax 在 delivery.html 上提交表单时，基本上您仍然处于交付 html 中。现在表单提交成功后，您需要返回 home.html。当您最初访问 home.html 时，您必须在 URL 中传递了一些参数，这些参数基于 home.html 决定加载的内容。现在在返回 home.html 时，您需要在 pagechange 中传递相同的参数。

要解决这个问题，你需要维护一个历史堆栈，例如在切换页面之前，你应该将传递给当前页面的数据保存在这个堆栈上。回来时，您需要从堆栈中设置弹出该数据。利用 pagebeforechange 事件从堆栈中推送和弹出。您可以检查 data.options.hashChange 以查看是否需要从堆栈中推送或弹出并相应地修改参数以进行 pahechange。

这个解决方案听起来可能不太清楚，因为一个工作示例可以轻松解决您的问题。但是，如果您花一些时间来实现 pagebeforechange 并编写此历史堆栈并最终调用 pagechange，您会发现这个练习是值得的。

希望这个想法有所帮助。

【讨论】：