Question

Basically, I have one div(divNew) which is being populated with content from another page(thread.php) using ajax. thread.php is constantly refreshed to poll data from the database.

I want the content from divNew to be appended to another div(chatContents) everytime there is content in divNew.For this i am am constantly running the javascript which does the appending.
The problem i am facing is that the appending takes place as long as thread.php hasnt refreshed. But once it does, all the appending that took place is deleted and is replaced with what was there originally. And the cycle repeats every time thread.php is refreshed.

I am not sure if i am explaining this properly. I hope the code helps.

    <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<div id = "divNew" name = "divNew">
</div>
<h2>Greetings</h2>
<div class="container" id = "chatContents">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<script>
 existingdiv1 = document.getElementById('divNew');


</script>
<script language="JavaScript">

setInterval("returnValue()", 1000); 
function returnValue()
{

 $.ajax({
            async: true,
            type: "GET",
            url: "thread.php",
            data: "html",
            success: function (html) {
                $("#divNew").html(html);   

            $('.inner').append([existingdiv1]);             
            }  
        });

}
</script>

Any help would be appreciated. Thanks 🙂

Answer 1

I would do away with the concept of #newDiv and do something like this:

You were also importing jQuery twice. I took one out.

Html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<h2>Greetings</h2>
<div class="container" id="chatContents">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

JS

setInterval("returnValue()", 1000); 
function returnValue()
{
 $.ajax({
            async: true,
            type: "GET",
            url: "thread.php",
            data: "html",
            success: function (html) {
                if(html)
                {
                   var newDiv = $('<div/>').html(html);   
                   $('#chatContents').append(newDiv);             
                }
            }  
        });
}
</script>

This will just generate a new div and append it when you get stuff back from the server.