I want to make a slideshow of data from database. I use php to print out the rows, then I placed that in a html code, then I want to use javascript to loop the code using the setInterval() loop.
My question is: how can I output the rows and use javascript to display that? because what I tried to do didn't work. I'm not experienced with javascript, and I tried to look up and try out different methods but it doesn't work for some reason.
This is what I tried to do last, but it does not print anything on page.
...
$sel_query = "SELECT * FROM `classifieds` WHERE `title` !=''";
$results = mysqli_set_charset($conn,"utf8");
$results = mysqli_query($conn,$sel_query);
while ($row = mysqli_fetch_array($results)) {
?>
...
<body>
<div id="div"> </div>
<script type="text/javascript">
setInterval(displayCode, 1000);
var codeBlock = '<div id="slider-frame" class="slider-frame">' +
'<div class="slide-images">' +
'<div class="img-container">' +
'<h1>' + '<?php echo $row['title']; ?>' + '</h1>' +
'</div>' +
'<p>' + '<?php echo $row['description']; ?>' + '</p>' +
'</div> </div>';
function displayCode() {
document.getElementById("div").innerHTML += codeBlock;
}
</script>
<?php } ?>
</body>
</html>
My problem was that the in my javascript code, did not work. It did not echo the row I wanted. I figured that this was happening because of the + in the var codeBlock. After deleting them and making the var one string it worked.
<script type="text/javascript">
setInterval(displayCode, 1000);
function displayCode() {
document.getElementById("sliderFrame").innerHTML += '<div id="sliderFrame" class="slider-frame"> <div class="slide-images"> <div class="img-container"> <h1> <?php echo $row['title']; ?> </h1> </div> <p> <?php echo $row['description']; ?> </p> </div> </div> ';
}
</script>