Solved

PHP Jquery JSON auto refresh page

Posted on 2009-07-16
4
3,059 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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)

730 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