Jump to content


Photo

refresh form info without refreshing page


  • Please log in to reply
4 replies to this topic

#1 sdaniels

sdaniels
  • Members
  • PipPipPip
  • Advanced Member
  • 46 posts

Posted 10 April 2006 - 11:31 PM

I have a link to a php/javascript chat room that somehow refreshes the form info without refreshing the whole page. this is great, and id like to mimic this showing the current users online. Only thing is that im a novice php coder and dont know squat about javascript. could someone more talented than I take a look at this and explain how its done?

the link to the page to see it in action is here:

[a href=\"http://www.pjduvivier.com/chatoo/\" target=\"_blank\"]http://www.pjduvivier.com/chatoo/[/a]

i believe this may be the code but i could be wrong:

<script>
       
 function displayMessage() {
        var xhr_object = null;
 
 if(window.XMLHttpRequest) // Firefox
                xhr_object = new XMLHttpRequest();
        else if(window.ActiveXObject) // Internet Explorer
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
        else { // XMLHttpRequest non support par le navigateur
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...utilisez firefox cela ne vous ferra pas de mal");
                return;
        }

    xhr_object.open("GET", "reload.php", true);

        xhr_object.onreadystatechange = function() {

     if(xhr_object.readyState == 4) {

         var chaine=xhr_object.responseText;
         var contentArray=chaine.split('X');
         var chaineText=contentArray[0];
         var listUser=contentArray[1];
         var object=document.getElementById('mon_texte');
         var userobject=document.getElementById('online');
         
          if (chaineText.length>4)
          {

         object.innerHTML= document.getElementById('mon_texte').innerHTML+chaineText;
         object.scrollTop=object.scrollHeight;
         
          }
            
         userobject.innerHTML=listUser;


        setTimeout( "displayMessage()",2500);}
        }
    xhr_object.send(null);
}

</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>


#2 heckenschutze

heckenschutze
  • Members
  • PipPipPip
  • Advanced Member
  • 257 posts
  • LocationAustralia

Posted 10 April 2006 - 11:56 PM

Yes thats part of the code... They also have the page in frames so the whole page doesnt have to reload, only a certain frame reloads (giving it the feel of a realtime application).

#3 sdaniels

sdaniels
  • Members
  • PipPipPip
  • Advanced Member
  • 46 posts

Posted 11 April 2006 - 12:03 AM

Thanks, your reply had me go back and take a look at that page again because i didnt see where they were using frames at first. I didnt realize they were using layers. I had a feeling this was too good to be true.

#4 kenrbnsn

kenrbnsn
  • Staff Alumni
  • Advanced Member
  • 8,235 posts
  • LocationHillsborough, NJ, USA

Posted 11 April 2006 - 01:17 AM

You can also do this by used AJAX from JavaScript and use CSS to define where the information is to be displayed. From within Javascript you can update the <div>'s and <span>'s with the correct information. No reloading is done, just updates in place.

Ken

#5 wisewood

wisewood
  • Members
  • PipPipPip
  • Advanced Member
  • 226 posts
  • LocationRotherham, England

Posted 11 April 2006 - 10:41 AM

AJAX is the most effective way to do it.

Just do a quick google for "AJAX Tutorial" and you should find something that you can adapt to your needs.
wisewood: proven fact, I am both wise, and wooden.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users