narjis Posted December 26, 2011 Share Posted December 26, 2011 I am retrieving values from database using jquery post in json format but unable to append the dtaa to my table conatiner here is my html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Showing Data</title> </head> <body> <input type="button" value="Load!" id="load" /> <!--</div>--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"> </script> <div id="container"> <table id="myTB" border="1"> <tr> <td>Id</td> <td>Name</td> <td>Father Name</td> <td>Class</td> <td>Age</td> </tr> </table> </div> </body> </html> here is m javascript // JavaScript Document $(document).ready(function(){ $("#container").hide(); }); $("#load").click(function(){ $.ajax({ url: "data.php", success:function(data){ console.log(data); var i = 0; //$.each(data.details, function(i,details){ for (var key=0, size=data.length; key<size;key++) { $('<tr>') .append( $('<td>').html( data.details[i].id ) ) .append( $('<td>').html( data.details[i][Name] ) ) .append( $('<td>').html( data.details[i][Fathername] ) ) .append( $('<td>').html( data.details[i][Education] ) ) .append( $('<td>').html( data.details[i][Age] ) ) .appendTo('#myTB'); } } }); $("#container").show(); }); Here is my php script <?php $conn = mysql_connect("localhost","root",""); mysql_select_db("customer",$conn); $query = "SELECT * FROM info_tb"; $details = array(); $res = mysql_query($query); $count = mysql_num_rows($res); if($count>=1){ while($result=mysql_fetch_assoc($res)){ //$result = mysql_fetch_assoc($res); $details[] = ($result); }//end of while }//end of if $json_encoded_details = json_encode($details); $json_details = "{\"details\": " . $json_encoded_details . " }"; echo $json_details; mysql_close($conn); It is showing result in this format {"details": [{"id":"1","Name":"ra","Father":"a","Education":"class 5","age":"10"},{"id":"2","Name":"Ntima","Father":"Sssain","Education":"Class 18","age":"32"},{"id":"3","Name":"Sa","Father":"Mili","Education":"ICMA","age":"45"}] } Console is alsoi showing this error data.details is undefined Please tell where am I going wrong also I want to embed input type=text field in this table to edit and save the same in the database. Quote Link to comment Share on other sites More sharing options...
scootstah Posted December 26, 2011 Share Posted December 26, 2011 Just make the tables in PHP and send it via JSON to jQuery. $json['tables'] = ''; if($count>=1){ while($result=mysql_fetch_assoc($res)){ $json['tables'] .= '<tr> <td>' . $result['id'] . '</td> <td>' . $result['name'] . '</td> </tr>'; }//end of while }//end of if echo json_encode($json); success:function(data){ $('table').append(data.tables); } Quote Link to comment Share on other sites More sharing options...
narjis Posted December 26, 2011 Author Share Posted December 26, 2011 It is giving no result but still not appending to the table. :'( Please see if I'm appending correct part of the table as I'm new to this. Thanx in advance. Here is my html code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Showing Data</title> </head> <body> <input type="button" value="Load!" id="load" /> <!--</div>--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="container"> <table id="myTB" border=".2 em"> <tr> <td>Id</td> <td>Name</td> <td>Father Name</td> <td>Class</td> <td>Age</td> </tr> </table> <script type="text/javascript" src="script.js"> </script> </div> </body> </html> Here's the scri[pt $(document).ready(function(){ $("#container").hide(); }); $("#load").click(function(){ $.ajax({ url: "data.php", success:function(data){ //console.log(data); $('table').append(data.tables); $("#container").show(); } }); }); Quote Link to comment Share on other sites More sharing options...
scootstah Posted December 26, 2011 Share Posted December 26, 2011 You need to make the dataType json. $.ajax({ dataType: "json" Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.