Solved

PHP Jquery JSON auto refresh page

Posted on 2009-07-16
4
3,033 Views
Last Modified: 2013-11-08
I have a program that is using Jquery and JSON to deliver information from a PHP database. I would like to grab this data every X seconds and then display it on the page. The problem that I am having is that every X seconds, my data is currently being displayed over and over on the page rather than just removing the existing data, then re-displaying it.

I'm sure this is a simple question, I'm just not that intune with jquery yet...

See my failed attempt below:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.json.js" type="text/javascript"></script>
<script language="Javascript"> 
$(document).ready(updateStatus);
 
function updateStatus() 
{
	$.getJSON("slaData.php",
        function(data){
		
		var tpl = $('body div.objectInfo:first').clone();
		$('div.objectInfo').remove();
 
content = '<p>Logged In:' + data.sla.loggedInAgents + '</p>';
content += '<p>Idle:' + data.sla.availableAgents + '</p>';
content += '<p>Not Ready:' + data.sla.unavailableAgents + '</p>';
content += '<p>Active:' + data.sla.talkingAgents + '</p>';
content += '<p>Total Calls:' + data.sla.totalCalls + '</p>';
content += '<p>Avg Talk:' + data.sla.avgTalkDuration + '</p>';
content += '<p>Avg Wait:' + data.sla.avgWaitDuration + '</p>';
content += '<p>Longest Wait:' + data.sla.longestWaitDuration + '</p>';
 
$(content).appendTo("#objectInfo");
 
		tpl.remove();
		tpl = null;
        });
	setTimeout('updateStatus()',1000);                      
}
</script>
</head>
<body>
<div id="objectHolder">
<div id="objectInfo">
<div style="background-color: #ffffff;"></div>
</div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:MrBaseball9
  • 2
4 Comments
 
LVL 6

Expert Comment

by:coolersport
ID: 24874909
Try this one
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.json.js" type="text/javascript"></script>
<script language="Javascript"> 
var updateStatus = function() {
        $.getJSON("slaData.php",
        function(data){
			content = '<p>Logged In:' + data.sla.loggedInAgents + '</p>';
			content += '<p>Idle:' + data.sla.availableAgents + '</p>';
			content += '<p>Not Ready:' + data.sla.unavailableAgents + '</p>';
			content += '<p>Active:' + data.sla.talkingAgents + '</p>';
			content += '<p>Total Calls:' + data.sla.totalCalls + '</p>';
			content += '<p>Avg Talk:' + data.sla.avgTalkDuration + '</p>';
			content += '<p>Avg Wait:' + data.sla.avgWaitDuration + '</p>';
			content += '<p>Longest Wait:' + data.sla.longestWaitDuration + '</p>';
			 
			$('#objectInfo').html(content);
        });
        setTimeout('updateStatus()',1000);                      
};
$(document).ready(updateStatus);
</script>
</head>
<body>
<div id="objectHolder">
<div id="objectInfo">
<div style="background-color: #ffffff;"></div>
</div>
</div>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 24874936
change:
$(content).appendTo("#objectInfo");

to:
$(content).html("#objectInfo");
0
 
LVL 6

Accepted Solution

by:
coolersport earned 125 total points
ID: 24874942
If I were you, I would place setTimeout just after the update is done. It will avoid overlapping calls when getJSON takes longer than 1 second (which is likely to happen).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.json.js" type="text/javascript"></script>
<script language="Javascript"> 
var updateStatus = function() {
        $.getJSON("slaData.php",
        function(data){
		content = '<p>Logged In:' + data.sla.loggedInAgents + '</p>';
		content += '<p>Idle:' + data.sla.availableAgents + '</p>';
		content += '<p>Not Ready:' + data.sla.unavailableAgents + '</p>';
		content += '<p>Active:' + data.sla.talkingAgents + '</p>';
		content += '<p>Total Calls:' + data.sla.totalCalls + '</p>';
		content += '<p>Avg Talk:' + data.sla.avgTalkDuration + '</p>';
		content += '<p>Avg Wait:' + data.sla.avgWaitDuration + '</p>';
		content += '<p>Longest Wait:' + data.sla.longestWaitDuration + '</p>';
			 
		$('#objectInfo').html(content);
	        setTimeout('updateStatus()',1000);                      
        });
};
$(document).ready(updateStatus);
</script>
</head>
<body>
<div id="objectHolder">
<div id="objectInfo">
<div style="background-color: #ffffff;"></div>
</div>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:MrBaseball9
ID: 31604420
Worked like a charm. I must have tried 100 different ways. I guess the one thing that I was doing wrong was using .html(content) instead of the appendTo that I was using. I was even trying to make templates!  Thanks again.
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now