CODEWITHSUNDEEP
javascriptphpjqueryjsoncordova
Lukas Fischer
Lukas Fischer

Reputation: 21

Layout, Phonegap and JSON

I have an application to list the information via JSON db, I can list the information from db, the problem is that it comes without the layout of jQuery Mobile, could someone give me some light on how to solve this problem?

Below is my code:

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title>Unidas Taxi</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.3.css"/>

    <script charset="utf&minus;8" type="text/javascript">
        var id_taxista = 1;

        setInterval(function(){
            //alert('oi');
            corridas();
        }, 3000);

        $("#result").html("");
        function corridas(){
            $.post('url', {
                'id_taxista': id_taxista
            }, function (data) {
                $("#result").html(data);
            });
        }
    </script>
</head>

<body>
    <div data-role="page" id="main">
        <div data-role="header">
            <h1>Unidas Taxi</h1>
        </div>

        <div id="content" data-role="content">
            <ul data-role="listview" data-inset="true">

                <li data-role="list-divider">Corridas <span class="ui-li-count">2</span></li>
                <span id="result">

                </span>
            </ul>
        </div>
    </div>
</body>
</html>

PHP:

    $server = "localhost";
$username = "username";
$password = "pass";
$database = "db";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());

mysql_select_db($database, $con);

$id_taxista = $_POST["id_taxista"];


$sql = "SELECT USED";


if (mysql_query($sql, $con)) {

  $query = mysql_query($sql) or die(mysql_error());
$html = '';
  while($row = mysql_fetch_assoc($query)){
    $html .= '<li id="'.$row['id_corrida'].'">
    <a href="index.html">
    <h2>'.$row['nome'].' '.$row['sobrenome'].'</h2>
    <p><strong>Hotal Ibis - Botafogo</strong></p>
    <p>Quarto: 504, Tel.: (21) 0932-0920</p>
    <p class="ui-li-aside"><strong>'.$row['data'].' '.$row['hora'].'</strong></p>
    </a>
    </li>';   
  }

echo $html;
} else {  
  die('Error: ' . mysql_error());
}

mysql_close($con);

Upvotes: 0

Views: 59

Answers (1)

islanddave
islanddave

Reputation: 356

If I understand your question correctly, you are able to return json full of data you want and display it in #result but the style doesn't have the jQuery Mobile style applied. If this is a correct summation

First, add an id to your listview element

<ul id="mylistview" data-role="listview" data-inset="true">

then add this line after $("#result").html(data);

$( "#mylistview" ).listview( "refresh" );

See the Listview Widget page for more on listviews.

Upvotes: 1

Related Questions