Solved

PHP Jquery JSON auto refresh page

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…

707 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

14 Experts available now in Live!

Get 1:1 Help Now