How to append listview displaying on the page?

Question

We are quite new with JQuery mobile development targetting for Cordova/PhoneGap. However, we've managed to get working few pages relating displaying CATEGORY list, SUBCATEGORY list, ADS list, AD detail using JSONP and listview.

We are currently stuck in SEARCH page. When we do the console.log(JSON.stringify(row)); it returns the data per line so that proves that the JSON query is successfully working like the rest of the pages above BUT won't refreshed listview for some reason for this SEARCH page ?!?!

Are we using the right page event here ?

Thanks for the input.

<!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>

Further finding:

When we looked the DOM after populating the <li> tag and we found as image below. The <div id="searchads" has 2 containers one with data-url="/search.html?search=test&submit= and the other is not.

The <li> apparently showing up in the first <DIV> but not in the second one. It looks like the view goes to second instead ?

enter image description here

Hey dcalliances, sorry, but i cant help you directly with your problem, but i have some suggestions for you: - My personal experience is, that you should not use the mobile-styling from jQuery mobile if you have own images. You can use the Download-Builder, which you can find on the jQM-Homepage. There you can make a own selection of the things you need. - you normaly don't need iscroll. Every Plugin/Framework you use is extra space in your app. If you want to have the feeling of a native scroll, you can do it like it is described here -> — Sithys, Aug 29 '14 at 11:57
http://outof.me/native-scrolling-in-jquery-mobilephonegap-applications/ Sorry, that i could not help you directly, but i hope i told you some tipps. And sorry for the second comment, but the first was to long. — Sithys, Aug 29 '14 at 12:02
Thanks for the suggestion. But at the moment, we would like to solve this displaying issue that we have. :) — dcpartners, Aug 29 '14 at 12:05
We put console.log('TEST') after the $('#ad-list').listview('refresh'); ... so it seems won't refresh the list ?!?! — dcpartners, Aug 29 '14 at 22:17
can you try this ($('#ad-list').listview().listview('refresh');) and see how it goes — Tasos, Sep 03 '14 at 05:00

score 1 · Accepted Answer · edited May 23 '17 at 10:33

From what I can see your main problem is lack of experience with jQuery Mobile. Don't get me wrong, I'm not trying to be rude, this is a common jQuery Mobile problem, mainly because official documentation is soooooo bad at explaining how jQuery Mobile actually works, plus jQuery Mobile books are usually extremely useless.

You should NEVER use document ready with jQuery Mobile. It will usually trigger before jQuery Mobile properly initializes content. Instead you should use jQuery Mobile page events, mainly pageinit if you are working with jQuery Mobile 1.4 or below or pagecreate if you intend to use jQuery Mobile future versions (1.5 and above).

Take a look here if you want to learn more about page events.

Basically in your case I would advise using pagebeforeshow event instead of document ready.

For example, this code will work up to jQuery Mobile 1.4.X versions:

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

Or this code which will work for jQuery Mobile 1.4.X and above.

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

I even have working example in one of my blog articles here, just look at second example.

score -1 · Answer 2 · answered Sep 08 '14 at 06:13

In the image in your question, there are two divs with id="searchads" which might be causing the issue.

Also you have to make sure the HTML is correct like

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

Will make the DOM behavior un predictable.

Your JS seems to populate data perfectly.

How to append listview displaying on the page?

2 Answers2