I am showing recent visitors on profile page.The most recent visitor would be “1 min ago”.If suddenly new user comes so i just want to append that user with the message “about a min ago” without refreshing the page.
ex- suppose my recent visitors list ll be like this-
asha
rahul
vineet
meera
aniket
and now smita comes as the recent most visitor i want to append her name in to this list without refreshing the the entire page like this
asha
rahul
vineet
meera
aniket
smita
I know i can do this with AJAX. I have searching around the net for the any helpful resource but didn’t get anything yet.
Can anyone please tell me whether is a possible or not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Timer</title>
</head>
<body>
<script type="text/javascript">
var second = 0;
var limit = 15;
function display(){
if (second == limit){
var rand = new Date().getTime();
var myVal = '1';
$.post('getusers.php?rand=' + rand, {myVar : myVal}, function(data){
// show the data variable in a div
});
second = 0;
}
second += 1;
setTimeout("display()", 1000);
}
display();
</script>
</body>
</html>
This will send an AJAX request in every 15 seconds and will print out the content that the getusers.php file will output in data variable. Hope this will help you. I have used jQuery AJAX. You can use your own AJAX script as well.
Tried your code but i am not getting anything except “Hello”. what you think what i am missing here?
Here is the code-
Try.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Timer</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var second = 0;
var limit = 15;
function display(){
if (second == limit){
var rand = new Date().getTime();
var myVal = '1';
$.post('select.php?rand='+rand, {myVar : myVal}, function(data){
// show the data variable in a div
});
second = 0;
}
second += 1;
setTimeout("display()", 1000);
}
display();
</script>
<body>
Hello
</body>
</html>
You should have a container element (div) in the page in which then you need to insert the AJAX returned content.
Try something like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Timer</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var second = 0;
var limit = 15;
function display(){
if (second == limit){
var rand = new Date().getTime();
var myVal = '1';
$.post('select.php?rand='+rand, {myVar : myVal}, function(data){
// show the data variable in a div
$('#showUsers').html(data);
});
second = 0;
}
second += 1;
setTimeout("display()", 1000);
}
display();
</script>
<body>
<div id="showUsers"></div>
</body>
</html>
It will fetch the users from the database in every 15 seconds.
I have different div on the same page. And i am applying this for particular div(lets say “recent”)
then how can i get this result exactly there only.Now the status is its coming on top of the page.
