Question

好的，我已经尝试了所有的东西，时间问专家！

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

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

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

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

delivery.html - 一旦你点击home.html上的ListView项目，你就来到这个页面，我有一个提交数据的表单。提交数据工作正常。但是当我重定向到homes.html时，我希望重新加载Ajax列表，但不会。

我已尝试过链接，更改页面等。无法让它刷新homes.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>

Answer 1

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

我假设你在delivery.html上通过ajax提交表单，所以基本上你还在交付html。现在，在表单提交成功后，您需要返回home.html。当你最初移动到home.html时，你必须在URL中传递一些参数，根据哪个home.html决定加载什么。现在回到home.html时，你需要在pagechange中传递相同的参数。

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

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

希望这个想法有所帮助。

Answer 2

也许你可以试试

$.ajax({url:"your url" + "&time=" + new Date().getTime(),})

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

2 个答案: