MrBaseball9
asked on
PHP Jquery JSON auto refresh page
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:
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>
change:
$(content).appendTo("#obje ctInfo");
to:
$(content).html("#objectIn fo");
$(content).appendTo("#obje
to:
$(content).html("#objectIn
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Open in new window