Jquery Mobile listview not rendering with json data

Question

I'm having trouble rendering a Jquery List with data I rendered from a mySQL local database. The json data is connected up to the project just fine but what my emulator renders me isn't correct.

My php file is:

<?php

$link = mysql_pconnect("localhost", "root", "") or die ("Could not Connect to DB");

mysql_select_db("findadeal") or die("Could not select database");

$arr = array();

$rs = mysql_query("SELECT * FROM deal");

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}

echo '{"Deals":'.json_encode($arr).'}';

?>

And that renders the follow JSON results:

{"Deals":[{"dealid":"1","name":"Set Lunch Menu","description":"Enjoy lunch ","limit":"10","restaurantid":"1"}]}

My HTML code is the following:

<!DOCTYPE html>
<html>

<meta charset="utf-8" />
<title>Find A Deal</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
    img.fullscreen {
        max-height: 100%;
        max-width: 100%;
    }
    </style>

<link rel="stylesheet" href="themes/deal.css" />
<link rel="stylesheet"         href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


</head>

<body>
<div data-role = "content">

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

  <div class="content-primary">
     <ul id="list" data-role="listview" data-filter="true"></ul>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">            </script>

<script type="text/javascript">

    $(document).ready(function(){

                      var url="http://localhost/findadeal/json2.php";

                      $.getJSON(url,function(json){
                                //loop through deals
                                $.each(json.deals,function(i,dat){
                                       $("#list").append("<li><b>ID: </b>"+dat.dealid+
                                                         "<b> Name: </b>"+dat.name+
                                                         "<b> Description: </b>"+dat.description+
                                                         "<b> Limit: </b>"+dat.limit+
                                                         "<b> Rest ID </b>"+dat.restaurantid+
                                                         "</li>");
                                       });
                                });
                      });

    </script>

<footer data-role="footer" data-position="fixed">
    <nav data-role="navbar">
        <ul>
            <li><a href="index.html" data-icon="home">Home</a></li>
            <li><a href="mydeal.html" data-icon="grid">My Deals</a></li>
        </ul>
    </nav>
  </footer>

 </body>
</html>

I can render general listviews just fine when I dont add the dynamic data however the problem has arose for this now.

If anyone can help me I would seriously appreciate it!! I've been running into difficulties a lot over the last few days and people on here have really helped me out a lot so I appreciate all of yer time! Thanks in advance!!

score 3 · Accepted Answer · edited May 23 '17 at 11:56

This should be removed:

 $(document).ready(function(){

(this kind of syntax can't be used with jQuery Mobile, if you want to find out more take a look at this ARTICLE or look HERE.). Everything should be changed to run as a page is successfully loaded but page also page content needs to wrapped with data-role="page" so do it like this:

<div data-role = "page" id="index">
    // Your body content should go here
</div>

because of this change $(document).ready(function(){ to:

$(document).on('pagebeforeshow', '#index', function(){

When content is appended function listview() must be triggered to enhance content markup:

$("#list").listview('refresh');

If you want to find out more about how to handle dynamically added jQuery Mobile content take a look at this ARTICLE, to be more transparent it is my personal blog. Or you can find it HERE.

Also I don't know why but you are referencing 2 jQuery scripts, you should remove this one:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">            </script>

Current jQuery Mobile don't work well with jQuery 1.9, use only 1.8.3 or below.

Everything should look something like this:

<html>
    <meta charset="utf-8" />
    <title>Find A Deal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        img.fullscreen {
            max-height: 100%;
            max-width: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>

<body>
    <div data-role="page" id="index">
        <div data-role="header" data-position="fixed">
           <h1>Current Deals</h1>
        </div>

        <div data-role = "content">
              <div class="content-primary">
                 <ul id="list" data-role="listview" data-filter="true"></ul>
              </div>
        </div>

        <script type="text/javascript">
            $(document).on('pagebeforeshow', '#index', function(){ 
                var url="http://localhost/findadeal/json2.php";
                $.getJSON(url,function(json){
                    //loop through deals
                    $.each(json.deals,function(i,dat){
                        $("#list").append("<li><b>ID: </b>"+dat.dealid+
                                          "<b> Name: </b>"+dat.name+
                                          "<b> Description: </b>"+dat.description+
                                          "<b> Limit: </b>"+dat.limit+
                                          "<b> Rest ID </b>"+dat.restaurantid+
                                          "</li>");
                     });
                     $("#list").listview('refresh');
                });
             });
        </script>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home">Home</a></li>
                    <li><a href="mydeal.html" data-icon="grid">My Deals</a></li>
                </ul>
            </div>
        </div>
    </div>
 </body>
</html>

Thanks so much for your help! My problem now seems to be that I cant get the page to load? I've made the necessary changes like you mentioned but once I press the button from my homepage to bring me to this one a loading barrier appears and it just freezes there. Any thoughts? I went googling a few bits but I'm only going confusing myself! Again, thanks so much for the help everyone!! — user2025934, Jan 31 '13 at 16:18
Can you try it again, I have made some changes to the page from my answer. Also tell me are testing it in a desktop browser or inside phonegap app? — Gajotres, Jan 31 '13 at 16:56
I've tried it on both the emulator (Xcode, iPhone emulator) and also opening the file on my browser (Google Chrome) and both do not work. On the emulator I get the loading icon running but it doesn't load onto the next page and requires me to restart the emulator before using any of the applications functionality again. On Google Chrome then I get the header to show up and the search filter bar but none of the list entries. Thanks for your time so far, I really appreciate it! — user2025934, Jan 31 '13 at 17:16
If you can see it in Chrome but listview is not populating then you need to check $.getJSON part. Use firebug for Chrome and test if ajax call has successfully reached server and if it did take a look did server responded with a response (JSON content). And you will not be able to test this in emulator because emulator acts as a different device a you can no longer connect to localhost. — Gajotres, Jan 31 '13 at 17:24
Thanks very much for your help. I'm still after running into a problem though, the content is showing up however its not in the usual list format that Jquery uses, it's just rendering it as general text in a list whereas I want to try and get the lists looking like this [link](http://jquerymobile.com/demos/1.2.0/docs/lists/lists-nested.html) — user2025934, Jan 31 '13 at 18:28
Now here comes $("#list").listview('refresh');. You should execute .listview('refresh'); on an listview object, in your example it should be ("#list"). But do it only after all listview content has been appended. Sometimes you will need to initialize a listview before it can be refreshed, in that case use: $("#list").listview().listview('refresh'); Also as I already mentioned more about trigger refresh can be found here: http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content/14550417#14550417 — Gajotres, Jan 31 '13 at 18:35
I have the listview('refresh') function added as per the example you gave me above added just before the end of the getjson script. Should I have it added somewhere else as having it here is not rendering the listview for me — user2025934, Jan 31 '13 at 18:50
Tell me first have you received any error while doing .trigger('refresh') — Gajotres, Jan 31 '13 at 18:53
Can you then do me one last favor, make me a screenshoot of listview after it was generated and send it on my email: dragan.gaic@gmail.com — Gajotres, Jan 31 '13 at 19:00
I have send you a fix. $("#list").listview('refresh'); should go inside a $.getJSON. I have also modified my answer. — Gajotres, Jan 31 '13 at 19:37

Jquery Mobile listview not rendering with json data

1 Answers1