I am new to this and I would be grateful if someone can help. The code below I use to pull texts from mysql database and works fine to fetch the data without refreshing the page. What I am trying to do now is do the same for the images stored in the database but they are not displaying.
<?php
include_once('db.php');
$sql = "SELECT * FROM images";
$res = mysqli_query($conn, $sql);
$result = array();
while( $row = mysqli_fetch_array($res) )
array_push($result, array('image1' => $row['image1']));
echo json_encode(array("result" => $result));
?>
$(document).ready(function () {
done();
});
function done() {
setTimeout(function () {
updates();
done();
}, 200);
}
function update_content() {
$.getJSON("showImages.php", function (data) {
$("#Imageslider").empty();
$.each(data.result, function () {
$("#Imageslider"").append("<img" +this['image1'] + "/>");
});
setTimeout(function () {
update_content();
}, 1000);
});
}Too many functions
In the code below I am assuming that your PHP produces this
{ "result" : [ { "image1":"someurl"},{ "image1":"someurl"}] }
If so, you can do
function update_content() {
$.getJSON("showImages.php", function(data) {
$("#Imageslider").html(
data.result.map(({image1}) => `<img src="${image1}" />`).join("")
);
setTimeout(update_content, 3000); // if you want to update the interface every 3 seconds
})
}
$(function() {
update_content()
})