Refresh multiple divs with same ID

Question

I have multiple <div> tags with the same ID. Based on day and time, I statements trigger to select relevant content.

I also monitor the Database constantly for new content and need to refresh the <div> to display the updated or new content.

I have tried something like $("#myDiv").load('myPHPPage.php?); with no success.

My PHP Code sample:

if($dayofweek == "Monday" && $timeofday >= "08:00:00" && $timeofday <= "11:59:59"){
//Monday morning timeslot
echo "<div id='slideshow'>";
$stmm= $conn->prepare("SELECT `Monday_Morning`
FROM `adsList`");
$stmm->execute();
while($resultst = $stmm-> fetch()){
$mondaymoringlist = $resultst["Monday_Morning"];
echo "<div class='slideshow'>";
//Display ad as an image
//<object data='/$adlist'></object>
echo "<object data='/$mondaymoringlist'></object>";
echo "</div>";
}
echo "</div>";
}
//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 `adsList`");
$stma->execute();
while($resultst = $stma-> fetch()){
$mondayafternoonlist = $resultst["Monday_Afternoon"];
echo "<div class='slideshow'>";
//Display ad as an image
//<object data='/$adlist'></object>
echo "<object data='/$mondayafternoonlist'></object>";
echo "</div>";
}
echo "</div>";
}
//Monday Evening

else if ($dayofweek == "Monday" && $timeofday >= "17:00:00" && $timeofday <= "22:00:00"){
//Monday Evevening timeslot
echo "<div id='slideshow'>";
$stme= $conn->prepare("SELECT `Monday_Evening`
FROM `adsList`");
$stme->execute();
while($resultst = $stme-> fetch()){
$mondayeveninglist = $resultst["Monday_Evening"];
echo "<div class='slideshow'>";
//Display ad as an image
//<object data='/$adlist'></object>
echo "<object data='/$mondayeveninglist'></object>";
echo "</div>";
}
echo "</div>";
}
//End of Monday

Every day of the week has similar timeslots.

I currently use location.reload(); but it is no ideal as there is another <div> on the page which is also refreshing separately based on its own data check. With the other <div> I am able to do $("#myDiv").load('myPHPPage.php?); because it has a unique ID.

AJAX

function adshandler() {
var d = new Date();
var cache = d.getTime();
 $.getJSON("check_time.php?cache=" + cache, function(update) {
    if (update.count === true) {
        $("#slideshow").load();
    }
  }); 
 } 
 setInterval(adshandler, 600000);

Id should be unique in the DOM, you better work with classes — Sam Segers, Jul 03 '16 at 13:27

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

The only difference between ID and className is that the className (aka class) can be associated with more than one element. By definition, each ID on a page must be unique.

When multiple elements have the same ID, changes will happen only to the first element (with that ID) on a page.

Change the IDs to classes.

For regular polling of databases, use a recursive setTimeout and an AJAX code block.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 03 '16 at 13:28

cssyphus

37,875
18
96
111

Thanks. Can I then use `$("#myDiv").load('myPHPPage.php?); ` to refresh the `
` when new content is available. ?
– Wienievra Jul 03 '16 at 13:34
1) How are you monitoring your DB? *(How do you know when new content is available?)* 2) How many DIVs are named #myDiv? *(How many DIVs should be updated with new material)* 3) Please show your relevant HTML 4) Please show your repeating AJAX code 5) Please show relevant PHP, including (simplified) sample output – cssyphus Jul 03 '16 at 13:39
So `check_time.php` returns boolean -- what is this line intended to do (detailed): `$("#slideshow").load();` ? – cssyphus Jul 03 '16 at 14:49
`$("#slideshow").load();` is intended to refresh the `
` with `id` and `class` slideshow.
– Wienievra Jul 05 '16 at 15:43

Refresh multiple divs with same ID

1 Answers1