Solved

How to refresh DIV not all page?

Posted on 2009-05-13
4
550 Views
Last Modified: 2012-06-27
Hi all,

i need some help. I have a code that basicly its divided in two parts, left part is a streaming and right part its indicators (perl script inside the same page), this part needs to be refreshed all 2seconds, to give real-time statistics, but i dont want to reload the stream part.

its just one page examples.pl?refer that i call, and this gives the output in html. how can i do this?

Tks a lot people,
0
Comment
Question by:mpc650
  • 2
4 Comments
 
LVL 40

Accepted Solution

by:
mrjoltcola earned 500 total points
ID: 24379886
Use AJAX to do this.

I use JQuery API, as it provides a higher level api / notation for this. Here is a way to do in JQuery.

You'll need to implement a way to call your script just to get the content you want. Below I implemented it as a different Perl script.

Get JQuery from jquery.com, its 1 file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  refreshDiv();
});
 
function refreshDiv() {
  $("#myDiv").load("/webapp/getdata.pl", function() { setTimeout("refreshDiv();", 2000); } );
}
</script>
</head>
 
<body>
<div id="myDiv">
</div>
</body>
</html>

Open in new window

0
 
LVL 39

Expert Comment

by:Adam314
ID: 24397871
I agree AJAX is the best way.  I've not used JQuery before, but didn't find the basic AJAX command to difficult to deal with.  Here is a very good tutorial on AJAX:
http://www.w3schools.com/ajax/default.asp
0
 
LVL 40

Expert Comment

by:mrjoltcola
ID: 24398345
@Adam: JQuery is nice and lightweight, and gives you sort of a functional syntax to deal with the DOM, as opposed to some of the other imperative style approaches. You should love JQuery since you are a Perl pro, you can do things like $.each(...) to traverse the DOM and call closures / functions.

For full AJAX development, there are more heavyweight libs that bring GUI toolkit with them, such as ExtJS, but its overkill for someone that just wants to do simple HTML / DIV work.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how can I add blockquote after on my wordpress site 3 17
html Uncheck Checkbox 2 25
Load data upon clicking a button 8 35
CSS DIV Height in Percent 1 9
This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

808 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