John Davidson

Message:

UPDATE: Actually, my updated code below doesn't work after all. At least not the ajax side of things. At 14:00 the ajax doesn't kick in however I can refresh the page and it then vigorously reloads the div (as the hour is of course 14)

I have the div, that loads the various php files depending on the hour (sticky-foot-player) by wrapping the script in a PHP if statement. My code is this:

<?php

    if (date('H') >= 14) { ?>

        <script>

            ;(function($){

                setInterval(function() {

                    $('.sticky-foot-player').load(location.href + ' .sticky-foot-player');

                }, 1 * 1000);

            })(jQuery);

        </script>

<?php } ?>

So the auto refresh time isn't really relevant now as it is controlled by the hour so I switched that to just 1 * 1000 so at the hour specified there is only a 1 second interval. The issue is though with just this, the div auto refreshes every second in the hour as throughout that hour, the hour is 14 so I need to be more specific and say if hour is 14 && if minute is 00 && if second is 00 (so if time is 2pm on the dot) refresh that div. This way once it refreshes it will actually be 14:00:01 therefore won't refresh again.

My thought was:

    if (date('H') >= 14 && date('i') >= 00 && date('s') >= 00)

but this doesn't work. I based this by researching as to how to write minutes and seconds so it very well may be written slightly wrong. At 14:00 on the dot, the div doesn't refresh so I'm guessing I just can't be this specific or I've written it wrong somehow?

Original Question here:

I have a section on a site where, at certain times of the day, it loads a different php page that contains the code to pick at random from a list of mixcloud shows (using Mixcloud's embed iframe) It's an online radio station so the idea being that between 5-8am for example, the 80s music php page is loaded and an iframe is picked at random to appear on the site, this way users don't just get the same 80s show every morning and there's a bit of 'randomness' to it (it's still not a true online station but as close as using a custom solution) then at 8-11, it loads 90s music etc. I don't think the Mixcloud details are too important to the question but I wanted to paint a complete picture.

The code for actually loading the php scripts on the front end is:

<?php

    if (date('H') >= 5 && date('H') < 8) {

        echo '<iframe width="100%" frameborder="0" src="80s-iframe-page-path-here"></iframe>';

    }

    if (date('H') >= 8 && date('H') < 11) {

        echo '<iframe width="100%" frameborder="0" src="90s-iframe-page-path-here"></iframe>';

    }

?>

An example of the script itself where the iframes are loading randomly is:

<script>

    var videos = [

        '?hide_cover=1&light=1&autoplay=1&feed=%2Fshow=path-here%2F',

        '?hide_cover=1&light=1&autoplay=1&feed=%2Fanother-show=path-here%2F',

    ];



    var index=Math.floor(Math.random() * videos.length);

    var html='<iframe width="100%" height="100" src="https://www.mixcloud.com/widget/iframe/' + videos[index] + '" frameborder="0" allow="autoplay"></iframe>';

    document.write(html);

</script>

In itself, this works great so visit the site between 5-8am and you will get a random 80s show. visit between 8-11 and you'll get 90s etc. The issue I need to address though is as these are static shows and not a live stream, if you arrive at the site at 5am or 5.30am you're going to get a 3 hour show but if you start it at 5.30am, it is going to play til 8.30am (cutting into the 90s show) so everyone will be out of sync plus anyone listening to it will just be met with silence once that 80s show has finished. I want to pull people back in to the schedule the best I can.

My initial thought was at 8am, show an ajax div saying 'the 90s show is now playing, click here to refresh' which reloads the page and 90s will play but firstly I'm not sure how to display that div automatically without page refresh but even with this, it requires reloading the page so isn't the most polished solution.

So my decision is to instead just reload the iframe at 8am so if you're listening to 80s still at 8am, that will just stop and 90s will start. It means an abrupt end but I'm fine with that if it means this happens automatically.

So steering back to the question, based on my code a user would need to refresh the page at 8am to get the 90s show so how can I make that automatic so at 8am, the iframe itself reloads, recognises it's time for a show change and loads the relevant php file? I guess this is ajax but I have little experience of that.

---

My Answer:
You can achieve this by using AJAX to periodically check the current time and update the iframe accordingly. Here's an example of how you can modify your code to achieve this:

1. Create a new PHP file (e.g. update_show.php) that will return the appropriate iframe code based on the current time:

php
if (date('H') >= 5 && date('H') < 8) {
echo '';
} elseif (date('H') >= 8 && date('H') < 11) {
echo '';
}
?>


2. Modify your HTML to include a div that will be updated with the iframe code using AJAX:

html

In this code, the `updateShow` function sends an AJAX request to the update_show.php file every minute to get the updated iframe code based on the current time. The response is then inserted into the `.show-container` div.

This way, the iframe will automatically update at the specified times without the need for manual page refresh. You can adjust the interval time (60000 milliseconds = 1 minute) to suit your needs.