I would like to make an hourly offer. So every hour a new offer should be shown.

I've a PHP file that will show the offer like offer.php?hour=22 This will show the offer from 10pm.

How can I create a check every minute in jQuery that will execute an ajax load of my php file if the hour is 22. If not, nothing should happen to reduce the amount of refreshes/connections.

I'm not experienced in jQuery, so sorry for asking.

CodePudding user response：

Refreshing content with jQuery

function refreshDiv(selector, newContent) {
    $(selector).html(newContent);
}

Sending an ajax request

$.ajax({
    url: 'your/path/to/the/php/script.php'
}).done(function(response) {
    refreshDiv(response, "#yourdiv");
});

Doing it hourly

setTimeout(function() {
    $.ajax({
        url: 'your/path/to/the/php/script.php'
    }).done(function(response) {
        refreshDiv(response, "#yourdiv");
    });
}, 3600000);

One last problem

If you need to change the offer on exact hours, then you will need to wrap a setTimeout around your setInterval and you will also need to display the first change in a special way.

CodePudding user response：

Thanks a lot. I do a check in php. But the offer is visible on the homepage with a timer that counts down every hour. When the hour changes a new offer should automatically be shown.

So if the offer for hour 21 is shown and hour 22 starts jquery should automatically load offer.php?hour=22

CodePudding user response：

I would advise that you you use PHP to determine the current Hour of the Day. This way external Users can't force an alternate Hour.

For example if it is 2:00 PM (hour 14), and the user sends a Request to offer.php?hour=15 the system might provide a offer that was not intended for this time.

Also, each browser can be using it's own Timezone Offset. Do you want the Hour your User is in or the Hour that your server has?

Consider this:

<?php
$hour = date("G"); // 24-hour format of an hour without leading zeros
// Select Image based on Hour of Day
?>

When offer.php is loaded, the Hour of the Day will be populated into $hour.

You can then use setinterval() in JavaScript to refresh an image or offer on your page and never worry that the User will bypass this.

In your page, you can just have a Countdown timer to the next Hour.

$(function() {
  function calcTimeToNextHour() {
    var n = new Date();
    var ch = n.getHours();
    var nh = new Date();
    nh.setHours(ch   1, 00, 00);
    var ms = nh - n;
    return Math.round(ms / 1000);
  }

  function getTimeTil(seconds) {
    var m = Math.floor(seconds / 60);
    var s = seconds - (m * 60);
    return "00:"   (m < 10 ? "0"   m : m )   ":"   (s < 10 ? "0"   s : s);
  }

  var now = new Date();
  var currentHour = now.getHours();
  var nextHour = new Date();
  nextHour.setHours(currentHour   1, 0, 0);
  var timeUntilHour = calcTimeToNextHour();

  $(".current").html(now);
  $(".next").html(nextHour);
  $(".tillNext").html(getTimeTil(timeUntilHour));

  setInterval(function() {
    timeUntilHour--;
    if (timeUntilHour <= 0) {
      // refresh Offer
      timeUntilHour = calcTimeToNextHour();
    }
    $(".tillNext").html(getTimeTil(timeUntilHour));
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current Time</label>
<div class="current"></div>
<label>Next Hour</label>
<div class="next"></div>
<label>Countdown</label>
<div class="tillNext"></div>

See More: