How to update the PHP current timestamp using jquery/javascript every second

Question

I am working on the PHP cart timer script using PHP and jQuery/JavaScript.

I am iterating the set-interval function every seconds to get the PHP's current time-stamp.

When the first product is added to the cart, the timer begins before getting timer-stops it prompts the user, whether the user want to continue or cancel.

My code is follows

$(document).ready(function(){
    var orderedtime = "echo $_SESSION['ordertime'];";
    if (orderedtime === null || orderedtime == ''){
       console.log("orderedtime is not set");
    }
    else{
       init();
   }
});
var currenttime;
var alerttime;
var extratime;
function cd(){
    alerttime = "<?php echo date('h:i:s', (strtotime($_SESSION['ordertime']) + (1 * 60)));  ?>"
    extratime = "<?php echo date('h:i:s', (strtotime($_SESSION['ordertime']) + (2 * 60)));  ?>";
    redo();
}
function redo(){
    currenttime = "<?php echo date('h:i:s', time()); ?>";
    if(alerttime == currenttime) {
        //doing something   
    }
    else if(currenttime == extratime){
        //doing something
    }
    else{
        cd = setTimeout("redo()",1000);
    }
}
function init(){
    cd();
}

The currenttime variable only storing the 1st iteration value is not getting updating.

How to solve this issue?

Please kindly help me to solve it.

Thanks in advance.

why not just store time of first product in database and show timer using the javascript ... and validate when done ..... i think its really bad idea to make ajax call every second ... — NullPoiиteя, Jun 15 '13 at 05:29
I didn't make any ajax call here. I am calling the javascript only. — , Jun 15 '13 at 05:33
@Synergiser Is this question still open? If so, please update your question or post additional comments. Otherwise, please upvote all answers that were helpful to you and choose a correct answer to close the question. — cssyphus, Sep 19 '13 at 19:16

score 2 · Accepted Answer · answered Jun 15 '13 at 05:33

2

You're not actually requesting a time from the server in your setTimeout loop.

This line

currenttime = "<?php echo date('h:i:s', time()); ?>";

is set when the page is first generated and not changed again. If you want the time updated you need to send a request to the server. This probably isn't the best way to do it though.

answered Jun 15 '13 at 05:33

Is there any alternative way to do this timer? – Jun 15 '13 at 05:35
Actually I've tried another timer using pure javascript. Its working fine in the first time page loads, the second product added to the cart, the timer is running so fastly. – Jun 15 '13 at 05:38
@Synergiser "Is there any alternative way to do this timer?" Plenty, but the implementation will be dependent on your site code. I suspect the Javascript timer you've tried is running fast beacuse each new product is adding it's own loop to one set of timer variables – Jun 15 '13 at 05:47
I could help, but site-specific development isn't really within the remit of StackOverflow. – Jun 15 '13 at 06:09

score 0 · Answer 2 · edited May 23 '17 at 12:02

Further to MikeW's excellent but incomplete answer, you need a way to request the time from the server and receive it back in the DOM.

There is only one way to do that: AJAX.

As Mike pointed out, the PHP code that you typed above only runs once: when the page is first generated. After the page has been generated and the document is "ready", you must use AJAX.

Below is a fully-working, copy/pastable example to demonstrate one way this could work.

Note that I had to over-ride the orderedtime variable because I don't know how/when you set that.

HTML/javascript side: index.php

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
            #timeDiv{width:40%;height:200px;background:wheat;padding:10px;}
        </style>

        <script type="text/javascript">
            $(document).ready(function() {
                //var orderedtime = "<?php echo $_SESSION['ordertime']; ?>";
                var orderedtime = '';
                if (orderedtime === null || orderedtime == ''){
                   console.log("orderedtime is not set");
                }else{
                    doAjax();
                }

                window.setInterval(function(){
                    doAjax();
                },2000);

            }); //END document.ready

            function doAjax() {
                $.ajax({
                    type: "POST",
                    url: "get_the_time.php",
                    data: "ordertime=" + orderedtime,
                    success: function(myData) {
                        $('#thetime').html(myData);
                    }
                });
            }

        </script>
    </head>

<body>

    <div id="timeDiv">
        The time is: <span id="thetime"></span>
    </div>

</body>

</html>

PHP side: get_the_time.php

<?php

if (isset($_POST['ordertime']) != true) {

    $d = date("h:i:s");

}else{

    $ot = $_POST['ordertime'];
    $d = date('h:i:s', (strtotime($ot) + (1 * 60)));

}

echo $d;

IMPORTANT NOTE:

When using AJAX, the response sent from the server is received inside the success: function, and no where else.

If you later wish to use that data, assigning it into a variable inside the success function will not work. The best way I have found is to stick the received data into an element of some kind (a hidden input field works great for this), and then retrieve it from there when needed.

For example:

<input type="hidden" id="myHiddenField" />

$.ajax({
    type: "POST",
    url: "get_the_time.php",
    data: "ordertime=" + orderedtime,
    success: function(myData) {
        $('#thetime').html(myData);
        $('#myHiddenField').val(myData);
    }
});

Then, inside some other javascript function, you can grab that data and assign it to some variable, thus:

var someVar = $('#myHiddenField').val();

Hope this helps, late as it is.

This stackoverflow post has further information/explanation regarding AJAX. Check out the simplified AJAX examples at the bottom.

This doesn't work. I just get: Can't find variable: orderedtime — BSUK, Apr 22 '17 at 19:38

How to update the PHP current timestamp using jquery/javascript every second

2 Answers2

Linked