I'm in a little trouble here. I'm trying to use ajax to get data from PHP server, that it gets from Mysql database; and then display into a specific html tag place. But, for some reason, nothing is showed off to html. I tested the PHP page and it works correctly. The point is, when ajax should get the data and display, it seems that there's nothing at database.
This is my html target :
<div class="container">
<table>
<thead>
<tr>
<th>Título</th>
<th>Curiosidade</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
This is my Ajax Script:
function readData() {
$.ajax({
type: "POST",
dataType: "html",
url: 'http://localhost/Gravidapp/php/read.php',
success: function(data){
$('tbody').html(data);
},
error: function(xhr,desc,err){
ajax.error(xhr);
ajax.error(desc, err);
}
});
};
This is my PHP file:
<?php
require("bdconn.php");
$pdo = new db();
$pdo->mysql->beginTransaction();
$rs = $pdo->mysql->query("select * from timeline");
$rs->execute();
while($row = $rs->fetch()){
?>
<tr>
<td><?php echo $row['titulocuriosidade']?></td>
<td><?php echo $row['curiosidade']?></td>
</tr>
<?php
}
?>
Any suggests?
Thanks in advance
If the php response doesn't have the data type on headers ajax response could send an error.
Try setting dataType="text html" on your ajax request this will try to convert the response from text to html
also try to print errors on console to show whats is going wrong.
error: function(xhr,desc,err){
console.log(desc);
}
see dataType on: JQuery ajax
What's happening is: when you make an ajax call you must have a return of some data in the php called. When you need to include html you can call a method that return to you a template already ready to be included in the current html page. You can have for example an index.html that will be included when you load your page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="data-ajax"></div>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/timeline.js"></script>
</body>
</html>
In you js timeline.js you will include in the current html page what has returned in the data of the ajax:
$.ajax({
type: "GET",
dataType: "html",
url: 'timeline.php',
success: function (data) {
$('#data-ajax').html(data);
}
});
You will have also your php returning the html to be used in the ajax:
<?php
getTimelineData();
function getTimelineData() {
//here you retrieve data from database
$results = array(0 => 'first-result', 2 => 'second-result', 3 => 'third-result');
include_once 'timeline-data.php';
}
And finally your timeline-data.php file:
Here is your data!
<?php foreach($results as $result) { ?>
<?= $result ?>
<?php } ?>