如何附加列表视图显示在页面上？答案

【问题标题】：How to append listview displaying on the page?如何附加列表视图显示在页面上？
【发布时间】：2014-08-29 11:49:27
【问题描述】：

对于针对 Cordova/PhoneGap 的 JQuery 移动开发，我们还是很陌生。但是，我们已经设法使用 JSONP 和 listview 处理了几个与显示 CATEGORY 列表、SUBCATEGORY 列表、ADS 列表、AD 详细信息相关的页面。

我们目前停留在搜索页面。当我们执行 console.log(JSON.stringify(row));它每行返回数据，以证明 JSON 查询像上面的其余页面一样成功工作，但由于某种原因，此 SEARCH 页面不会刷新列表视图？！？！

我们在这里使用了正确的页面事件吗？

感谢您的意见。

<!DOCTYPE html>
<html>
    <head>
        <title>Search Ads</title>
        <meta name="viewport" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>     
        <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>  
        <script type="text/javascript">

            function getQueryStrings() 
            { 
                var assoc  = {};
                var decode = function (s) { return decodeURIComponent(s.replace(/\+/g, " ")); };
                var queryString = location.search.substring(1); 
                var keyValues = queryString.split('&'); 

                for(var i in keyValues) 
                {
                    var key = keyValues[i].split('=');
                    if (key.length > 1) {
                      assoc[decode(key[0])] = decode(key[1]);
                    }
                } 
                return assoc; 
            } 



            $(document).ready(function()
            {       
                $("#submitid").click(function() {
                    var textsearch = $('#txtsearch').val();

                    //var qs = getQueryStrings();
                    //var catid = qs["catid"];
                    //var subcatid = qs["subcatid"];
                    //var page = qs["page"];
                    //var reclimit = qs["reclimit"];

                    var catid = null;
                    var subcatid = null;
                    var page;
                    if  (page == null)
                        page = 1;

                    var reclimit;
                    if (reclimit == null)
                        reclimit = 30;

                    console.log("textsearch: " + textsearch);
                    console.log("catid: " + catid);
                    console.log("subcatid: " + subcatid);
                    console.log("page: " + page);
                    console.log("reclimit: " + reclimit);

                    var url = 'http://www.dewalist.com/webservices/',
                        mode = 'server.php?',
                        queryName = '&query=SearchAds',
                        parameters = 'searchstring=' + textsearch + '&catid=' + catid + '&subcatid=' + subcatid + '&page=' + page + '&reclimit=' + reclimit  ,
                        callback = '&callback=SearchAds',
                        key = 'api_key=470fd2ec8853e25d2f8d86f685d2270e';    

                    console.log("URL: " + url + mode + parameters + queryName + callback);

                    $.ajax({
                        type: 'GET',
                        url: url + mode + parameters + queryName + callback,
                        dataType: "jsonp",
                        jsonpCallback: "SearchAds",
                        contentType: 'application/json; charset=utf-8',
                        success: function (result) 
                        {
                            console.log(result);
                            $.each(result, function(i, row) {
                                console.log(JSON.stringify(row));
                                $('#ad-list').append('<li><a data-ajax="false" href="ad.html?adid=' + row.adid + '" data-id="' + row.subcatid + '"><h3>' + row.adtitle + '</h3></a><h1>' + row.addesc + '</h1></li>');
                            });
                            $('#ad-list').listview('refresh');
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            console.log(url + mode + parameters + queryName + callback),
                            console.log(errorThrown);
                            console.log(textStatus);

                        }
                    });  
                });
            });
        </script>
    </head>
    <body>
    <div data-role="page" id="searchads">
        <div data-theme="a" data-role="header" data-position="fixed">
            <a href="#"  class="ui-btn-left" data-rel="back" data-transition="slide" id="back-to-ads">Back</a>
            <h3>Ads</h3>
            <div data-role="navbar">
                <ul>
                    <li><a href="home.html" data-ajax="false" data-icon="home" data-iconpos="notext" data-role="button">Home</a></li>
                    <li><a href="post.html" data-ajax="false" data-icon="plus">Post Ad</a></li>
                    <li><a href="#" data-icon="navigation" data-iconpos="notext" data-role="button">Change City</a></li>
                    <li><a href="post.html" data-ajax="false" data-icon="search">Search</a></li>
                </ul>
            </div>
        </div>        
        <div data-role="content" data-theme="a" data-fullscreen="true">
            <form id="sitepreference">
                <input id="txtsearch" type="search" name="search"  value="" />
                <button id="submitid" name="submit" type="submit">Search</search>
            </form>
            <div class="example-wrapper" data-iscroll>
                <ul data-role="listview" id="ad-list" data-theme="a"></ul>
            </div>
        </div>
        <div data-theme="a" data-role="footer" data-position="fixed">
            <div data-role="navbar" >
                <ul>
                    <li><a href="preference.html" data-ajax="false" data-icon="heart" data-iconpos="notext" data-role="button">Change Site</a></li>
                    <li><a href="#" data-icon="user" data-iconpos="notext" data-role="button">Contact Us</a></li>
                    <li><a href="content.html" data-ajax="false" data-icon="star" data-iconpos="notext" data-role="button">About</a></li>
               </ul>
             </div>
        </div>              
    </div>
    </body>
</html>

进一步发现：

当我们在填充<li> 标签后查看 DOM 时，我们发现如下图所示。 <div id="searchads" 有 2 个容器，一个带有 data-url="/search.html?search=test&submit=，另一个没有。

<li> 显然出现在第一个 <DIV> 中，但没有出现在第二个中。看起来视图变成了第二个？

【问题讨论】：

嘿 dcalliances，对不起，我不能直接帮助你解决你的问题，但我有一些建议给你： - 我的个人经验是，如果你不应该使用 jQuery mobile 的移动样式你有自己的图像。您可以使用下载构建器，您可以在 jQM 主页上找到它。在那里，您可以自行选择所需的东西。 - 你通常不需要 iscroll。您使用的每个插件/框架都是应用程序中的额外空间。如果你想有原生卷轴的感觉，你可以像这里描述的那样做 ->
outof.me/native-scrolling-in-jquery-mobilephonegap-applications 对不起，我不能直接帮助你，但我希望我告诉你一些提示。很抱歉第二条评论，但第一条太长了。
感谢您的建议。但目前，我们想解决这个显示问题。 :)
没问题，希望有人能帮到你！
我们将 console.log('TEST') 放在 $('#ad-list').listview('refresh'); 之后...所以它似乎不会刷新列表？！？！

标签： jquery json jquery-mobile cordova

【解决方案1】：

据我所知，您的主要问题是缺乏使用 jQuery Mobile 的经验。不要误会我的意思，我不是要粗鲁，这是一个常见的 jQuery Mobile 问题，主要是因为官方文档 soooooo 在解释 jQuery Mobile 实际工作原理方面做得不好，加上 jQuery Mobile 书籍通常是非常无用的。

你不应该在 jQuery Mobile 中使用 document ready。它通常会在 jQuery Mobile 正确初始化内容之前触发。相反，您应该使用 jQuery Mobile 页面事件，如果您使用 jQuery Mobile 1.4 或更低版本，则主要是 pageinit；如果您打算使用 jQuery Mobile 未来版本（1.5 及更高版本），则主要是 pagecreate。

如果您想了解有关页面事件的更多信息，请查看here。

基本上，在您的情况下，我建议使用 pagebeforeshow 事件而不是 document ready。

例如，此代码适用于 jQuery Mobile 1.4.X 版本：

$(document).on('pagebeforeshow', '#searchads', function(){ 
    //put your code here       
});

或者此代码适用于 jQuery Mobile 1.4.X 及更高版本。

$(document).on('pagecontainershow', function (e, ui) {
    var activePage = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
    if(activePage === 'searchads') {
        //put your code here    
    }
});

我什至在我的一篇博客文章 here 中有工作示例，请看第二个示例。

【讨论】：

【解决方案2】：

在您问题的图片中，有两个带有 id="searchads" 的 div 可能会导致问题。

您还必须确保 HTML 是正确的，例如

    <button id="submitid" name="submit" type="submit">Search</search>

会使 DOM 行为不可预测。

您的 JS 似乎完美地填充了数据。

【讨论】：