I am attempting to reload only a div
tag on a page when there is new content in the database
in Ajax I test for new content:
function adshandler() {
var d = new Date();
var cache = d.getTime();
$.getJSON("check_time.php?cache=" + cache, function(update) {
if (update.count === true) {
//location.reload();
$('#slideshow').reload();
}
});
}
setInterval(adshandler, 10000);
The div
is on the same page as the ajax:
//Monday Afternoon
if ($dayofweek == "Monday" && $timeofday >= "12:00:00" && $timeofday <= "16:59:59"){
//Monday afternoon timeslot
echo "<div id='slideshow'>";
$stma= $conn->prepare("SELECT `Monday_Afternoon`
FROM `Client_Ads`");
$stma->execute();
while($resultst = $stma-> fetch()){
$mondayafternoonlist = $resultst["Monday_Afternoon"];
echo "<div class='slideshow'>";
echo "<img src='/$mondayafternoonlist'>";
echo "</div>";
}
echo "</div>";
}
There are more than one div with a similar
idand
class, each one behind an
ifand
else if` statement, depending on the day of the week etc.
My $('#slideshow').reload();
is not working? I have also tried $('#slideshow').load();
.
You can achieve it using .load()
function in very few line. Following is a working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
function changeDate() {
$("#d2p").load(location.href + " #d2");
}
</script>
<div id="d1p">
<div id="d1">
<?php echo date("H : i : s"); ?>
</div>
</div>
This is the DIV
which is going to refreshed on click of button partially on this page.
<div id="d2p">
<div id="d2">
<?php echo date("H : i : s"); ?>
</div>
</div>
<button onclick="changeDate();">Change Date</button>
Here is the demo Load div without refreshing entire page
function adshandler() {
var d = new Date();
var cache = d.getTime();
$.getJSON("check_time.php?cache=" + cache, function(update) {
if (update.count === true) {
//location.reload();
$("#slideshow").load(location.href + " #slideshow");
}
});
}
setInterval(adshandler, 10000);