Changing the content of div in Jquery Mobile

Question

I am using the data received from mysql and then trying to make a list from that data. Here is my connection.php

 <?php
    $dbhost='localhost';
    $dbuser='amey19_amey';
    $dbpass='project';
    $db='amey19_project';
    $conn=mysql_connect($dbhost,$dbuser,$dbpass) or die("Could not connect");
    mysql_select_db($db);
    ?>

Here is my index1.php

 <?php
    include 'connection.php';
    $query="SELECT * from railway";

    $result=mysql_query($query) or die(mysql_error());
    //while($person=mysql_fetch_array($result)){
    $person=mysql_fetch_array($result)
    echo json_encode($person);


    //}
    ?>

and here is the code

    <html> 
        <head> 
        <title>My Page</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js">    </script>
        <script type="text/javascript" src="global.js">
        </script>

    </head> 
    <body> 

    <div data-role="page" id="page1">

        <div data-role="header">
            <h1>Railway Station</h1>
        </div><!-- /header -->


        <div data-role="content">
        <input type="button" value="Refresh" id="submit" data-icon="refresh" /></br>
        <div data-role="content" id="list"> 
    <script id="source" language="javascript" type="text/javascript">

      $(function () 
      {

    $.ajax({                                      
      url: 'index1.php',                 
      data: "",                       

      dataType: 'json',              
      success: function(data)        
      {
        var id = data[0];            
        var vname = data[1];          

        $('#list').html("<b>id: </b>"+id+"<b> name: </b>"+vname); 

      } 
    });
      }); 

  </script>


    </div>
    </div>
    <div data-role="footer">
            <h1>&copy;AmeyPat.All Rights Reserved.</h1>
        </div><!-- /footer -->




    </body>
    </html>

How can i change the content of just the list tag..I am very new to jquery mobile..

by list tag i mean content of the div with "list" id..sorry for the confusion :) — Introvert Guy
– Introvert Guy, Commented Oct 4, 2012 at 8:00
Meaning your objective is to change the "id" and "name" labels ? — Romain
– Romain, Commented Oct 4, 2012 at 8:04
nope...i want to add a dynamic list from the data i have received from mysql database..in the div container with "List" id... <div data-role="content" id="list"> — Introvert Guy
– Introvert Guy, Commented Oct 4, 2012 at 8:14

Community · Accepted Answer · 2017-05-23 11:48:16Z

0

First, you will want to make sure that your php returns a properly formatted JSON, which in this case would be an array of {id:1,name:"Name"} objects. You can take a look at this page for instance. You would get something like

$fetch = mysql_query("SELECT * from railway"); 

while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
  $row_array['id'] = $row['id'];
  $row_array['name'] = $row['name'];

  array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

On the client side, if you want to benefit from jquery mobile listviews, you should probably change <div data-role="content" id="list"> to <ul data-role="listview" id="list">.

Then, you should think about moving your js code to the header, and binding it to a pageinit event.

You will also need to modify your success function to iterate through the array and add the elements to your list.

$(document).live('pageinit',function (event) {
    $.ajax({
        url: 'index.php',
        data:"",
        dataType: 'json',
        success: function(data)        
          {
            for (var i = 0; i < data.length; i++) {
              $('#list').append("<li><b>id: </b>"+ data[i].id +"<b> name: </b>"+ data[i].name + "</li>"); 
            }
         }
    });
});

You might then need to refresh the listview with $('#mylist').listview('refresh'); to give it the proper jquery mobile formatting

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Oct 4, 2012 at 8:38

Romain

1,3021 gold badge10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Introvert Guy Over a year ago

my json returns an array of {"id":"1","name":"X","latitude":"0","longitude":"0","type":"Y"} out of which i only make use of [0] and [1]th part that is id and name...which i then use in my original ajax request..but li doesnt get appended..also now have added refresh at the end of the script..

Romain Over a year ago

Are you sure your php returns a properly formatted JSON array? ie. [{"id":"1","name":"X"},{"id":"2","name":"X"},{"id":"3","name":"X"}]

Introvert Guy Over a year ago

As you suggested,i used return_arr,array fetch (which you mentioned above) to format the output to only [{"id":"1","name":"X"},{"id":"2","name":"X"},{"id":"3","name":"X"}] .JSON reply is working fine..problem lies in appending to li only :)

Romain Over a year ago

Did you check that your success function was indeed iterating on the JSON array ?

Introvert Guy Over a year ago

Well thats the problem.It doesnt print anything in the success function.But JSON response is right.My Success function success: function(rows) { for(var i=0;i<rows.length;i++) { var row = rows[i]; var id = row[0]; var name= row[1]; $('#myList').append("<li>id:"+id+"Name:"+name+"</li>") } };

|

Collectives™ on Stack Overflow

Changing the content of div in Jquery Mobile

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related