showing data in html5 from database using javascript and json

Question

I am trying to show a list in html from mysql database.To get data from mysql i am using json and javascript. But it shows nothing!

My html page is

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
</head>
<body>
<div id="tenant" data-role="page">

    <div data-role="header">
        <a href="index.html" data-icon="back" class="back ui-btn-left">Back</a>
        <h1>My Lease</h1>
    </div>

    <div data-role="content">

        <ul id="actionList" data-role="listview"  data-inset="true">
        </ul>
    </div>  
    </div>
<script src="js/tenantlease.js"></script>
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="js/jqm-config.js"></script>
<script src="lib/jquery.mobile-1.0.1.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

My php file is.It is working fine when i call from browser with id.

<?php
session_start();
include 'connection.php';
$email=$_SESSION["PM"];

$sql = "select * from phpap105_tenantinfo where TenantEmailAddress=:id";
try {
$dbh = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);  
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->prepare($sql);  
$stmt->bindParam("id", $_GET[id]);
$stmt->execute();
$employee = $stmt->fetchObject();  
$dbh = null;
echo '{"item":'. json_encode($employee) .'}'; 
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}'; 
}
?>

My javascript file is

    $('#tenant').live('pageshow', function(event) {
//var id = getUrlVars()["id"];
var id = 'mukul_kuet@yahoo.com';
$.getJSON('tenantlease.php?id='+id, displayEmployee);
    });

   function displayEmployee(data) {
var employee = data.item;
//console.log(employee);


if (employee.TenantFirstName) {
    $('#actionList').append('<li><h3>First Name</h3>' +
            '<p>' + employee.TenantFirstName + '</p></a></li>');
}
if (employee.TenantLeaseSigned) {
    $('#actionList').append('<li><h3>Lease Sign</h3>' +
            '<p>' + employee.TenantLeaseSigned + '</p></a></li>');
}
    $('#actionList').listview('refresh');
   }

Please help how can i get data in html page.Thanks in advance for any kind of help.

As of jquery 1.7 `live()` is deprecated. tried using `on()` or `delegate()` ? if not check this http://api.jquery.com/live/ — Sreenath S, Sep 13 '12 at 06:31

score 0 · Answer 1 · edited May 23 '17 at 11:49

Good Question. What you need to do is Step-Debug JavaScript and you will see the problem.

If this is something you are partly familiar with, or completely unfamiliar with... I highly recommend it for you, it will open up a new world of developmental powers.

For example...

Open in Chrome

Right Click and select -> Inspect Element.

Under the Script Tab, open your JavaScript file.

On the left margin you can click on a 'bar' area to set a breakpoint, which will appear as a round dot.

Set breakpoints... in all your functions.

Hit refresh. The execution of the JavaScript will stop at your first valid breakpoint.

At this point you can inspect variable to see if they are the values that you thought they were.

If you did not see a breakpoint, it is because your "pageshow" event is not working.

Here is info on that.

Here is another example.

My guess is that you will find either 1) the page show is not being called, 2) the call to your php is unexpectedly malformed, or your callback is not getting called back.

Breakpoints will visualize all of this.

Also, check your callback function it may be null, if it is missing a brace (which it is in your post) and is failing. If this is happening, red error messages will appear in the console of Chrome Dev Tools.

It is a powerful workflow. Hope that helps.

showing data in html5 from database using javascript and json

1 Answers1