CODEWITHSUNDEEP
phpjavascriptjqueryajax
user1802184
user1802184

Reputation:

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

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.

Upvotes: 0

Views: 1977

Answers (2)

cssyphus
cssyphus

Reputation: 40038

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.

Upvotes: 0

user1864610
user1864610

Reputation:

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.

Upvotes: 2

Related Questions