Question 69974 in Ajax Question posted in
You can find the official documentation here.

Refresh div on given hour – Jquery ajax

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.

Tags:

2

Answers


  1. 0

    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:

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search