Help using prototype.js periodicalupdater

[netlatch]

I am new to AJAX but I have managed to get most of what I need done with AJAX on my site; except one thing that is still eluding me.

I am using ajax to post any new entries to the sites DB to the web page in random places (via DIVs). As I add the data to the database I get the resulting info shown on the screen via the periodicalupdater function just fine but as I add new items to the DB the old displayed data is removed and the new data is then displayed even though it is in a different location on the screen. Is there anyway to keep the old displayed data on the screen using the periodicalupdater function while adding new data using periodicalupdater? Thanks for any help in advance. PS, The data I am displaying contains unique DIV positioning coordinates. Below is the code I am using

 

note: prototype.js is already loaded

 

this is the function called

 

function checkping()

{

var <?php echo $holder;?> = new Ajax.PeriodicalUpdater('newPing','my.php', {method: 'post', frequency: 3.0, decay: 1});

}

</script>

 

this is the calling script

<script language="javascript" type="text/javascript">

checkping();

</script>

 

this is what is sent back to the ajax call via my.php. note the variables for top and left vary with each record posted.

<?php

echo

"<div style=\"position:absolute;

visibility:visible;

width:160px;

height:48px;

top:",$top_coord,"px;

left:",$left_coord,"px;

background-color:",$bgrcolor,";

border:2px solid #000000;

z-index:1\">

<img src=\"images/flags/",$flagfilename,"\" alt=\"country flag\" width=\"60\" height=\"32\" align=\"left\"><font size=\"-3\">", $usr_name, "<br> From: ",$country, "<br>", $pingText, "</font></div>";

 

?>