how automatically update the time in PHP using Ajax..the below command work by refreshing the page by hit f5 or reload button..
echo date('s');
or if it is necessary to update time by only using AJAX in php..
9
-
you want update time every second by ajax ?Yes Kay Selva– Yes Kay Selva2015-06-10 16:20:06 +00:00Commented Jun 10, 2015 at 16:20
-
After quick google search sitepoint.com/auto-refresh-div-content-jquery-ajaxJohn Cartwright– John Cartwright2015-06-10 16:20:28 +00:00Commented Jun 10, 2015 at 16:20
-
yeah i just want that second is dynamically update no need to refresh the page manually @SelVaaSajjad Khan– Sajjad Khan2015-06-10 16:21:25 +00:00Commented Jun 10, 2015 at 16:21
-
@JohnCartwright i just want to update the second not the whole content the code you given is looking a little bit messy..Sajjad Khan– Sajjad Khan2015-06-10 16:24:34 +00:00Commented Jun 10, 2015 at 16:24
-
@SajjadKhan why would you want to do this? BOTH PHP and JS can log time separately? Can you give more insight so I can work out a solution for youDaniel– Daniel2015-06-10 17:06:25 +00:00Commented Jun 10, 2015 at 17:06
|
Show 4 more comments
2 Answers
You can use html5 server send event,The EventSource object is used to receive server-sent event notifications:
demo.php
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>
</body>
</html>
demo_sse.php file
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('s');
echo "data: The server time is: {$time}\n\n";
flush();
?>
if you have doubt let me know
8 Comments
Sajjad Khan
no its not the area of my interest i just want to update the time dynamically or auto update the time?
Sajjad Khan
tell me how please i just use the single function that is date and the parameter is date('s')..
Yes Kay Selva
i have update my answer, the event source function execute every second without refresh page
Sajjad Khan
it shows that error in console Firefox can't establish a connection to the server at file:///C:/xampp/htdocs/test.php.
Sajjad Khan
finally its work but it show second after 5 second gap and show the previous time also?
|
So basically this can be done using php and AJAX. Lets say you have two files index.php and timer.php. You can achieve your desired results by doing the following.
In Index.php
<?php
echo "<html>
<head>
<title>TODO supply a title</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='http://code.jquery.com/jquery.js'></script>
<script>
$(document).ready(function(){
setInterval(_initTimer, 1000);
});
function _initTimer(){
$.ajax({
url: 'timer.php',
success: function(data) {
console.log(data);
data = data.split(':');
$('#hrs').html(data[0]);
$('#mins').html(data[1]);
$('#secs').html(data[2]);
}
});
}
</script>
</head>
<body>
<span id='hrs'>0</span>:<span id='mins'>0</span>:<span id='secs'>0</span>
</body>
</html>";
In timer.php
<?php echo date('h:i:s A');
3 Comments
Daniel
@SajjadKhan You sure you followed the instructions? worked fine for me. Re-edited by copying and pasting the exact code I tried. Please try it again cos works perfectly for me
Sajjad Khan
Yeah and one more thing in both of your pages are you forget to close the php blog?
Daniel
Did it work? I'm not forgetting to close them. You don't have to close <?php tags for it to work