Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

PHP Jquery JSON auto refresh page

Posted on 2009-07-16
4
Medium Priority
?
3,167 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 500 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

598 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