I have been searching and attempting for hours without success.
On my current page, I am displaying basic data from a database using PHP in an HTML table. However, I now want to incorporate AJAX functionality to refresh the data without reloading the page.
Although I tried implementing this solution, it seems that the AJAX call is working correctly, and the values are refreshing as expected. Yet, I am facing challenges in retrieving these values.
Here is a snippet of my main page (index.php):
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
</head>
<body>
<h3>Output: </h3>
<table border="1" id="output"></table>
<script id="source" language="javascript" type="text/javascript">
$(function() {
update_content();
});
function update_content()
{
$.ajax({
url: 'query.php',
data: "",
dataType: 'json',
success: function(data)
{
if(data){
(data + '').length;
}
var temp = new Array();
$('#output').html("<tr><td>"+data["symbol"]+"</td></tr>");
}
});
setTimeout(function(){
update_content();
}, 1000);
}
</script>
</body>
</html>
In the query.php file (used for AJAX calls):
<?php
include('inc/connection.php');
# Main query
$sql = "
select LastUpdated, symbol, sum
from TheTable
";
$result = mysql_query($sql);
while($row = mysql_fetch_row($result)){
$table_data[]=array("LastUpdated"=>$row[0],"symbol"=>$row[1],"sum"=>$row[2]);
}
echo json_encode($table_data);
?>
When I directly run query.php in the browser, I can see all the data in this format:
[{"LastUpdated":"20170614","symbol":"AUD","sum":"20"},{"LastUpdated":"20170614","symbol":"AUD","sum":"10"}]However, on the main page, I only see undefined inside the table.
Ideally, I would like to display all the fetched records from the database (which might vary in number) using a JavaScript loop in the code above.
HINT/MODIFICATION
By changing:
$('#output').html("<tr><td>"+data["symbol"]+"</td></tr>");to
$('#output').html("<tr><td>"+data[0]+"</td></tr>");in index.php
AND
$table_data[]=array("LastUpdated"=>$row[0],"symbol"=>$row[1],"sum"=>$row[2]);to
$table_data[]=$row;
in query.php,
only the first row is displayed as a string like
20170614,AUD,40.
END HINT/MODIFICATION
This might be a simple question or problem, but I am new to jQuery and experimenting with AJAX for the first time.
P.S. I understand that mysql_* functions are deprecated and acknowledge the security risks involved.
Your assistance would be greatly appreciated.