Solved

PHP Jquery JSON auto refresh page

Posted on 2009-07-16
4
3,044 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)

840 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