Hi guys,
I've made a quick shoutbox which works with mysql+php and javascript. As you can assume by now I'm using frames(blinks every 10 sec to load new entries) which looks bad, I've seen ajax on action, it solves the problem but ajax is completely new to me, I wonder if you guys could give me a hand on avoiding flicks using ajax.

Thanks in advance.

GM

    You can also avoid flicks by using Iframes as well, just have a hidden iframe, and then have it reload, and pass the data to the correct element onload.

    It saves you having to include a load of ajax code for something as simple as reloading a shoutbox.

    Like so:

    Main page:

    <div style="display:none;"> 
<iframe src="page.htm"></iframe>
</div>
Shoutbox:

<div id="shoutbox">
Shoutbox stuff here....
</div>

    --
    Iframe:

    <body onload="parent.document.getElementById('shoutbox').innerHTML = document.getElementById('content').innerHTML;setTimeout('window.location.reload()',10000);">
<div id="content">Latest shoutbox stuff here...</div>
</body>

      Hi Madwormer2,
      thankyou for your reply, as I told b4 I'm new to ajax.. I've tried to follow ur idea(maybe in a wrong way), but it doesn't work, it blinks still. Please let me know what am I doing wrong..

      TIA

      //foobar.php == main page
<div style="display:none;">
<iframe src="page.htm">
</iframe> 
</div> 
Shoutbox: 
<div id="shoutbox"> 
<?
include 'shoutbox.php';
?>
</div>

      I've inserted the body onload part inside the shoutbox.php.. something like this:

      
<html>....
<head>
</head>
<body onload="parent.document.getElementById('shoutbox').innerHTML = document.getElementById('content').innerHTML;setTimeout('window.location.reload()',10000);"> <div id="content">

//mysql
//fetch latest messages
//echo them properly

</div> 
</body>
</html>

        Erm, yeh, do this:

        //foobar.php == main page
<div style="display:none;">
<iframe src="shoutbox.php">
</iframe>
</div>
Shoutbox:
<div id="shoutbox">
Loading...
</div>

        Shoutbox.php:

        <html>....
<head>
</head>
<body onload="parent.document.getElementById('shoutbox').innerHTML = document.getElementById('content').innerHTML;setTimeout('window.location.reload()',10000);"> <div id="content">

//mysql
//fetch latest messages
//echo them properly

</div> 
</body>
</html>

          Hi.. thanks for the reply,
          I can still see it from the status bar that the shoutbox refreshes to update new messages...

          This one uses the refreshing job, but it's assigned to body, btw, do I have to include xajax or ajax files or something to make this to work (sorry if its a noob question)?

          setTimeout('window.location.reload()',10000);
            Write a Reply...