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. Link to comment https://forums.phpfreaks.com/topic/253842-putting-values-in-table-using-jquery/ 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); } Link to comment https://forums.phpfreaks.com/topic/253842-putting-values-in-table-using-jquery/#findComment-1301375 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(); } }); }); Link to comment https://forums.phpfreaks.com/topic/253842-putting-values-in-table-using-jquery/#findComment-1301412 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" Link to comment https://forums.phpfreaks.com/topic/253842-putting-values-in-table-using-jquery/#findComment-1301463 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.