dynamic webpages with js and cgi

[svero]

I have a page that is generated by a cgi. The page shows several values. Say
for instance...

value1 : 5
value2 : 8

Now what I'd like to do is every so often change the display of the page to
reflect the latest values. One way I could do this is using a meta
refresh... but that's somewhat annoying as it clicks and visibly reloads in
kind of an ugly way.

Another way I've run across is a trick where the http that sends the page is
not terminated and the cgi keeps writing out javascript packets to the
webserver. That seems doable but rather ugly.

Is there another way to do this? A more elegant way? (assuming i can only use js and cgi)

[ggambett]

I've been playing with an idea for a related problem, but I never got to implement it. It basically involves having the dynamic part inside IFRAMEs whose source is the CGI. It's essentially a reload, but you don't lose the layout of the page, the scrollbar position, etc. Could that work in your case?

[svero]

Thats the 2nd one above... So yeah it could work.. just not that elegant.

[Jim Buck]

Can you somehow fetch the latest value on the server through Javascript? Then you could just use Javascript to update the field on the local page with the new value.

[ggambett]

No, I think it's not the same... actually, I think I don't understand your method (and in fact the CGI is in the webserver)

[princec]

Replace with a bit of flash / applet?

Cas

[svero]

No, I think it's not the same... actually, I think I don't understand your method (and in fact the CGI is in the webserver)

The 2nd method has the cgi send the web page over into an iframe but not terminate the http request -- and it keeps sending javascript packets and flushing the buffer. The packets continually update the window. But it does reload because otherwise the http request times out.

@jim buck - i dont know of anyway to fetch the values from the cgi other than reloading constantly. That's the problem really.

[svero]

Replace with a bit of flash / applet?

Cas

nope. has to be just cgi and js

[ggambett]

The 2nd method has the cgi send the web page over into an iframe but not terminate the http request -- and it keeps sending javascript packets and flushing the buffer.

OK. The ugly part is not terminating the http request, right? What I was suggesting was terminating the http request, but reloading it periodically using javascript.

[beenThereDoneThat]

You may want to check out JSRS, a Javascript library that gives you a nice API for communicating with a server via a hidden DHTML element, essentially the same method listed in the post above-- no user-apparent page refreshes are necessary.

From the web page:

Javascript Remote Scripting (JSRS) is a client-side javascript library which uses Dynamic HTML elements to make hidden remote procedure calls to the server. It only works asynchronously, but is known to work on Win9x, WinNT/2000, WinXP, Unix/Linux/BSD, and Mac with IE4+, NS4.x, NS6.x, Mozilla, Opera7 and Galeon. There are server-side implementations for ASP, ColdFusion, PerlCGI, PHP,Python, and JSP(servlet). JSRS is in production use on intranet and public sites in Canada, the US, South America, Australia, Europe, and the Middle East. JSRS is free of charge and its source is open and freely available.

[svero]

OK. The ugly part is not terminating the http request, right? What I was suggesting was terminating the http request, but reloading it periodically using javascript.

It has to be realtime - ie no periodic reloads. My version has to periodic reload anyway because the http request eventually times out, but while the request is open it refreshes. It can't be every minute or two in this case.

[BinaryMoon]

Firstly - why can't you use a small flash app - you can tralk to cgi with flash so grabbing the variables would be easy.

As a solution (without flash) couldn't you stick the values in an iframe that has a meta refresh on it? That way the main page wouldn't keep loading. If the values are spread throughout the page then you could use javascript within the iframe to adjust the values on the main page. The iframe could be a 1*1 hidden thing at the bottom of the page.

[svero]

>Firstly - why can't you use a small flash app - you can tralk to cgi with
>flash so grabbing the variables would be easy.

Its a technical limit in the project. Has to be able to run on a browser with no plugins.

>As a solution (without flash) couldn't you stick the values in an iframe that
>has a meta refresh on it? That way the main page wouldn't keep loading.

Because its not realtime. But that's basically the solution I'm trying to find a better version of. I may end up doing this if nothing better presents itself.

[ppavlovic]

I would also recommend you to use JSRS. I'm exploiting it everywhere where it is applicable. It has a small payload, works in all browsers from Netscape 4+ till IE6, Mozilla/Firefox. It also has version JSRSlite that includes Opera Browser.

Basic concept is:
1) Create JavaScript function that will be called with SetTimeout() every 10-20 seconds (aproximatelly realtime data considering HTTP protocol latency)
2) Take values returned from function called in step 1), and assign them to HTML element of your choice (preferably DIV or SPAN) by using

document.getElementById('result_placeholder').inne rHTML = returned_value;

With that, you will have no IFRAME, META REFRESH, and other "reloadable" elements on the page.
The implementation is very tricky, but with some knoledge of JavaScript, it can be done very quickly.

[svero]

I'm going to check out jsrs.. looks interesting.

- S

[Jim Buck]

That was exactly what I meant by my post.