Question

I have the following on an HTML page:

<script type="text/javascript">
setInterval(function(){refresh()},5000);
function refresh()
{
    $.post("test.php",
    {
           // nothing here             
    },
    function(data, textStatus)
    {      

      $('' + data + '').find('.maindiv').each(function () {
      $('.maindiv').replaceWith('.maindiv');
      });

    });  
}
</script>

<div id = "1" class= "maindiv">
<div sid= "1" class= "subdiv">old sub div content</div>
<div cid= "1" class= "childdiv">another old sub div</div>
<img id = "1" src="http://foo.com/bar.png"/>  
</div>

<div id = "2" class= "maindiv">
<div sid= "2" class= "subdiv">this content is old</div>
<div cid= "2" class= "childdiv">please update me!</div>
<img id= "2" src="http://foo.com/bar.png"/>  
</div> 

The PHP page that gets called to update elements (test.php):

<?php

 echo '<div id = "1" class= "maindiv">
       <div sid= "1" class= "subdiv">this is new sub div</div>
       <div cid= "1" class= "childdiv">this is also new sub div content</div>
       <img id= "1" src="http://foo.com/bar.png"/>  
       </div>'; 

 echo '<div id = "2" class= "maindiv">
       <div sid= "2" class= "subdiv">new content</div>
       <div cid= "2" class= "childdiv">new content for this child div</div>
       <img id= "2" src="http://foo.com/bar.png"/>  
       </div>'; 
?>

These 2 elements are also present on the HTML page. Basically what I want to call the PHP page and get those elements from the PHP page and loop through them in the response in the HTML page and replace each maindiv (including all its child elements) with the corresponding one on the HTML page.

This is just a very basic example. I do this because the content changes in these elements and want to replace the elemnts like live update.

The function I’m posting seems to have no response so don’t know how to achieve this.

Thanks in advance

Answer 1

You need to index the maindiv elements in page so that they match with the new elements.

Also need to modify what you are replacing with

 $(data ).filter('.maindiv').each(function (index) {/* filter or find depends on html structure sent*/
      /* "this" is the current div in response*/          
      $('#'+this.id).replaceWith(this);
});

each will track index, eq() is used to match same index in page.

EDIT: Also change find() to filter() if only output is the DIV’s in root of output