Question

我正在制作我的第一个JQM应用程序，这是我大学项目的虚拟住宿应用程序，我真的很难理解如何处理页面事件。

我有一个页面main.html，它有搜索属性的选项，不同的搜索选项会有查询字符串，

在结果显示结果的toPage上，

Listview刷新工作，但这是主要问题： a）当我进入结果页面时，我看到屏幕顶部印有未定义的内容 b）当我从results.html返回main.html时，我看到结果页面的相同结果显示在main.html页面的底部，就像一些错误让他们在下半部分切断了只有在刷新main.html后，这些结果才会消失，

我希望我有道理，我的代码如下，任何建议都将不胜感激

main.html中：

                <div data-role="collapsibleset" data-inset="false">
                    <div data-role="collapsible" data-inset="false" data-collapsed-icon="false" data-expanded-icon="false">
                        <h5>Search by Area</h5>
                        <ul data-role="listview" data-icon="false">
                            <li><a href="results.html?id=od&ref=area">Orange Dessert</a></li>
                            <li><a href="results.html?id=sd&ref=area">Snow Dune</a></li>
                            <li><a href="results.html?id=yhv&ref=area">Yellow Hut Village</a></li>
                            <li><a href="results.html?id=rb&ref=area">Red Beach</a></li>
                            <li><a href="results.html?id=ic&ref=area">Inner City</a></li>
                        </ul>
                    </div>

                    <div data-role="collapsible" data-inset="false" data-collapsed-icon="false" data-expanded-icon="false">
                        <h5>Search by Price</h5>
                        <ul data-role="listview" data-icon="false">
                            <li><a href="results.html?id=pr1&ref=price">$0 and $499</a></li>
                            <li><a href="results.html?id=pr2&ref=price">$500 and $999</a></li>
                            <li><a href="results.html?id=pr3&ref=price">$1000 and $1499</a></li>
                            <li><a href="results.html?id=pr4&ref=price">$1500 and 1999</a></li>
                            <li><a href="results.html?id=pr5&ref=price">$2000 and $3000</a></li>
                        </ul>
                    </div>

                    <div data-role="collapsible" data-inset="false" data-collapsed-icon="false" data-expanded-icon="false">
                        <h5>Distance from UOZ</h5>
                        <ul data-role="listview" data-icon="false">
                            <li><a href="results.html?id=dist1&ref=dist">Less than 5 miles</a></li>
                            <li><a href="results.html?id=dist2&ref=dist">5 and 9 miles</a></li>
                            <li><a href="results.html?id=dist3&ref=dist">10 and 14 miles</a></li>
                            <li><a href="results.html?id=dist4&ref=dist">15 and 19 miles</a></li>
                            <li><a href="results.html?id=dist5&ref=dist">More than 20 miles</a></li>
                        </ul>
                    </div>
                </div>

        <a href="results.html?id=all" data-role="button">Search All</a>

script2.js：

$(document).on("pagecreate", "#resPg", function () {

$(document).on("pagecontainerbeforeshow", function (e, ui) {
    var page = ui.toPage[0].id;

    if (page == 'resPg') {
        $.getJSON("json/huts.json", function(data){
            var place;
            $(data.huts).each(function (index, value) {
                place += "<li>" + value.title + "</li>";
            })

            $("ul").html(place);

            $("ul").listview().listview("refresh");
        })
    }
})

}）

results.html

 <div data-role="main">
        <ul data-role="listview" data-icon="false">

        </ul>
    </div>

非常感谢任何建议

由于

Answer 1

在结果页面上提供ID非常重要。 “页面”和“从页面”都有无序列表，因此在AJAX转换期间区分toPage的数据是非常重要的。

它的排序方式是给这样的无序列表一个id

</ul>

或者通过调用pagecontainerhide事件 $（document）.on（＆＃34; pagecontainerbeforeshow＆＃34;，function（e，ui）{

var page = ui.toPage[0].id;

if (page == 'resPg') {
    $.getJSON("json/huts.json", function(data){
        var place;
        $(data.huts).each(function (index, value) {
            place += "<li>" + value.title + "</li>";
        })

        $("#result_lw").html(place);

        $("#result_lw").listview().listview("refresh");

    })
}

$(document).on("pagecontainerhide", function () {
    $("ul").html("");
})

}）

Jquery Mobile listview undefined和listview刷新不支持data-rel

1 个答案: