homepage Welcome to WebmasterWorld Guest from 23.22.2.150
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
AJAX, Smart Reload?
Reloading the page once a new entry has been made,
scriptmasterdel

5+ Year Member



 
Msg#: 5643 posted 6:16 pm on Jul 1, 2006 (gmt 0)

Hi All,

I'm going to cut to the chase.

I am developing a web application very simular to a tagboard / shoutbox and i need the option for a smart refresh once a user has sumitted a new message so that everyone else who is using the shoutbox will get the new updated message, if you understand what i am talking about then please help, if not then please ask questions about what i am requiring as this is extremly important for me to add.

Thank you all for takng your time reading this message.

Del

 

scriptmasterdel

5+ Year Member



 
Msg#: 5643 posted 7:53 pm on Jul 2, 2006 (gmt 0)

Ok, i really do need help with this anyone.

Just to recap .... once a new message has been inserted into my db table in my database i need to make an action so that the other people that are currently viewing the board can see the updates by a smart reload! Is this possible? Someone please help ... afterall this is webmasterworld!

All i am looking for is a way to do it, i'm willing to put the long hours in of getting it to work.

Once again! Thank you in advance

texmex

5+ Year Member



 
Msg#: 5643 posted 9:24 pm on Jul 2, 2006 (gmt 0)

I think I get the general gist of what you're on about. Would this be a chat application?

In which case, the main issue you have is that Browsers are the clients. All activity has to be initiated from the browser end. The best bet would be to put a javascript function on the users page and set a timeout to it.

Another little feature you could implement is a hidden IFRAME on the page. This could be reloaded by the function (say every 10 seconds).

The document that you return in the IFRAME could have a text area, that includes all the latest messages.

This same document could also have an onload function to append the text from this textarea into a textarea on it's parent documents page.

To keep timining issues under control, the mainpage could have a hidden field to hold the time of the last message on the page.

The iframe could also include a field with this info. As it updates the parent documents text area it would also update this timefield.

The javascript function would then supply this in the querystring when reloading the hidden iframe.

Am I making sense?

To illusidate the main page could look something like:


<html> <head> <title>Chat Page</title>
<script type="text/javascript">

function getLatest()
{
var since=document.getElementById("lastUpDate").value;
var f=document.getElementById("latest");
f.location="cgi-bin/latest.pl?threadID=" + threadID + "&since=" + since;
self.setTimeout("getLatest()",10000);
}

window.onload=function (){
self.setTimeout("getLatest()",10000);
}

</script></head>

<body>
<input type="hidden" id="threadID">
<input type="hidden" id="lastUpDate"
value = "05-05-2006-17-55-12">
<textarea id="currentThread"></textarea>
<iframe id="latest" src="_blank"></iframe>
</body>
</html>

While the page returned from cgi-bin/latest.pl?threadID=2067&since=05-05-2006-17-55-12

could look something like:

<html><head><title></title>
<script type="text/javascript">

window.onload=function (){
var newstuff=document.getElementById("newstuff").value;
var updateTime=document.getElementById("updateTime").value;

var targetTextBox=parent.document.getElementById("currentThread");
targetBox.value=targetBox.value + newstuff;

var targetUpdateField=parent.document.getElementById("lastUpdate");
targetUpdateField.value=updateTime;
}

</script></head>

<body>
<input id="updateTime" type="text" value="05-05-2006-17-55-26">
<textarea id=newstuff>
Lisa:That's really cool.
Thomas:You would say that! you are such a girlie :-)
</textarea>

</body>
</html>

The IFRAME could be kept hidden at all time. Every 10 seconds it would be updated by the function on the main document. It would then update the main chat textarea with it's new content, and also update the field of the lastupdate with the time of the last message included.

Is this something like what you were looking for or am I barking up the wrong tree?

scriptmasterdel

5+ Year Member



 
Msg#: 5643 posted 10:06 pm on Jul 2, 2006 (gmt 0)

You a Genius, this is exactly what i was looking for i am not that good at explaining myself very well.

The general idea is kind if like a chat application, just simplified and i wanted to apply a way of loading new content when it has been added to the DB table so that people can see the updates as and when they happen instead of using a 30 meta-refresh of a javascript function to reload every so often which would disrupt the user, i wanted a non-time based reload i wanted a reload that would execute when the updates have been added. You have given me a possible solution and i thank you.

So once again, thank you ever so much this should be great, i shall test the code in the morning ( as it is very late) and maybe adapt it a little to my desire.

You really have been great help.

Del

texmex

5+ Year Member



 
Msg#: 5643 posted 11:38 pm on Jul 2, 2006 (gmt 0)

BTW, Do check that stuff through. It's all come straight out of my head and hasn't been debugged at all. I've already noticed that in this bit.

var targetTextBox=parent.document.getElementById("currentThread");
targetBox.value=targetBox.value + newstuff;

I've used two separate names for the same variable (ie targetTextBox and targetBox)

Anyhow, glad you followed the general concept.

Another issue I've realised is that, dependant on network traffic (and other factors), you may end up with the getLatest function issuing multiple requests, before the results come back. It may be an idea to leave off the self.setTimeout("getLatest()",10000); at the end of this function and have that reset by the onload function of the IFRAME document.

so in your parent document you could have

function startTimer()
{
self.setTimeout("getLatest()",10000);
}

function getLatest()
{
var since=document.getElementById("lastUpDate").value;
var f=document.getElementById("latest");
f.location="cgi-bin/latest.pl?threadID=" + threadID + "&since=" + since;
}

and at the end of the IFRAME documents onload function you would simply make a call to parent.startTimer() to start the clock running for the next update. That way, once a request has been made, another will not occur until the previous one has loaded.

You may also want to checkout XMLHttpRequest as this could be a more direct route.

Al_Anderson

5+ Year Member



 
Msg#: 5643 posted 5:12 pm on Jul 3, 2006 (gmt 0)

Also try using comet or the slow load technique in the iframe.

Rather than polling the server from the browser the iframe starts loading something and never finishes loading so that the connection is not destroyed.

When the server has something to update the server side script will send the update as a call to a javascript function in the parent document.

this way the server side script can poll much more quicly against the database and more often and when this connection is broken you know one of your chatters has dropped their connection.

more details about slow load technique are here,
[obviously.com...]

adni18

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 5643 posted 11:08 pm on Jul 4, 2006 (gmt 0)

I use a quite different method in my software - the server has a script that detects a variable (usually something like "mode"), that if mode is set to "md5", then the server generates the page as usual, but md5s the page and returns the hash.

The actual page checks the mode=md5 every few seconds. if the most recent md5 is not the md5 that it got from the server script, the page is refreshed (or regenerated, depending on ajax ability).

That might sound a bit confusing, PM me for a link to an example.

scriptmasterdel

5+ Year Member



 
Msg#: 5643 posted 11:49 am on Jul 10, 2006 (gmt 0)

No luck with the script guys, i can't seem to get it working :s i also tried to impliment another script i found but after hours of work it seems it wasn't compatible in all browsers =( i will keep at it but any other ideas tips please post them!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved