Changing the content of div in Jquery Mobile

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/12720628/changing-the-content-of-div-in-jquery-mobile

标签

mysql

ajax

jquery-mobile