Solved

How to refresh DIV not all page?

Posted on 2009-05-13
4
546 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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

There are many situations when we need to display the data in sorted order. For example: Student details by name or by rank or by total marks etc. If you are working on data driven based projects then you will use sorting techniques very frequently.…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

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

13 Experts available now in Live!

Get 1:1 Help Now