Remaining time from db with no page refresh

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • panos100m
    New Member
    • Aug 2007
    • 23

    Remaining time from db with no page refresh

    hi in my php page i am showing to the user the remaining time untill an event occurs..
    I am reading the value from a database
    The problem is that he needs to refresh the page to get the correct time (for time to decrement) ...i can use a meta refresh but it doesn't look professiona, is there a way for the values to decrement without page refresh and if yes how? (can you please provide a code snip-set)
    The only way that i can think maybe is by using an ajax function that queries the db every now and then but i am not sure how to call it as you normally associate it with events (like onclick, onscroll) or how to associate a timer.. but this might be the wrong thought ..

    any help really appreciated!

    Thanks
  • Atli
    Recognized Expert Expert
    • Nov 2006
    • 5062

    #2
    Hi.

    You could always just have Javascript count down from a given time and update your page.

    Somewhat like:
    [code=php]
    <script type="text/javascript">
    // Initialize the Date object.
    // The set methods should be filled in by PHP
    var _date = new Date();
    _date.setHours( <?php echo $hour; ?>);
    _date.setMinute s(<?php echo $min; ?>);
    _date.setSecond s(<?php echo $sec; ?>);

    // Generates a HH:MM:SS string
    function parseDate(dateO bj) {
    var output = "";

    if(dateObj.getH ours() < 10) {
    output += "0";
    }
    output += dateObj.getHour s() + ":";

    if(dateObj.getM inutes() < 10) {
    output += "0";
    }
    output += dateObj.getMinu tes() + ":";

    if(dateObj.getS econds() < 10) {
    output += "0";
    }
    output += dateObj.getSeco nds();

    return output;
    }

    // Start the countdown
    setInterval(fun ction() {
    _date.setSecond s(_date.getSeco nds() - 1);
    document.getEle mentById('Displ ay').innerHTML = parseDate(_date );
    }, 1000);
    </script>

    <span id="Display">Lo ading...</span>
    [/code]

    Comment

    • coolsti
      Contributor
      • Mar 2008
      • 310

      #3
      The previous suggestion using a countdown timer written in Javascript on the client side is a good suggestion.

      But if you still for some reason need to read values from the database (or for that matter periodically call any PHP script in the background) then you can associate a function that does this background call, for example using Ajax or, as I do it, by submitting a hidden iframe on the page, with a Javascript countdown timer.

      In words:

      1) On page load, a javascript function is called which initiates a timer.
      2) When the timer has counted down to zero, a function is called which does your background tasks (database query, updating fields or values on the current page) using Ajax or by just submitting a hidden iframe.
      3) The javascript function which initiates the timer is then called again.

      If, for example, you set the timer to 30 seconds, then your background query will be carried out every 30 seconds and then the timer will start counting again.

      Comment

      Working...