CODEWITHSUNDEEP
jqueryjsoncsscordovajquery-mobile
user2025934
user2025934

Reputation: 129

Jquery Mobile listview not rendering with json data

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

Upvotes: 2

Views: 4859

Answers (1)

Gajotres
Gajotres

Reputation: 57309

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>

Upvotes: 3

Related Questions