Question : PHP/AJAX: Checking to see if loaded content has changed since last time

I have a table that is loaded dynamically using AJAX. It basically checks to see if a new file has been uploaded. If there is a new file, the <div> that displays the table is updated. I use JavaScript to see if there's a difference between the content in the <div> and the content from PHP. It checks every 2 seconds. If there's a difference, it's loaded and highlights the entire new entry. Simple.

Now this normally works totally fine when I was echo'ing simple '<p>'.$row->file.' '.anchor('admin/file/'.$row->id.'/complete', 'Complete', 'title="Complete"').' '.anchor('admin/file/'.$row->id.'/delete', 'Delete', 'title="Delete File"').'</p>';

But when I echo a table, it seems to think there's a difference even when there isn't. So every two seconds, the highlight effect is activated. But I can't figure out why that is. Why would my single <p>...</p> work, but then when I do a table, it doesn't?

Here's my code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
<script type="text/javascript">
$(document).ready(function()
{
	$.ajaxSetup ({ cache: false });  
	
	var loadUrl = "<?php echo site_url("admin/get_uploads"); ?>";  

	$("#result").load(loadUrl);
	
	var refreshId = setInterval(function() {
		$.get(loadUrl,function(result){
			if(result !=  $("#result").html())
			{
				$("#result").html(result);
				$("#result").effect("highlight", {}, 2000);
			}
		});
	}, 5000);
});  
</script>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
if ($uploads == NULL):
	echo 'NO NEW UPLOADS';
else:
	echo '<table width="960" border="0" cellspacing="0" cellpadding="0"><thead><td width="285">File Name</td><td width="106">Uploaded</td><td width="151">Details</td><td width="341">Description</td><td width="76" align="center">Status</td></thead><tbody>';
	foreach ($uploads as $row):
		echo '<tr><td><a href="'.$row->file.'">'.$row->file.'</a></td><td>'.unix_to_human($row->upload_date).'</td><td><a href="mailto:'.$row->email.'">'.$row->name.'</a><br />'.$row->company.'<br />'.$row->phone.'</td><td>'.$row->description.'</td><td align="center"><input type="submit" name="complete" id="complete" value="Complete" /></td></tr>';
	endforeach;
	echo '</tbody></table>';
endif;

Answer : PHP/AJAX: Checking to see if loaded content has changed since last time

Comparing against the html of the browser may be ugly because the browser may manipulate the white space or tags in the data returned at the point that it is added to the DOM.

Instead you may want to store the previous value in a javascript variable and compare against it. Since tihs will be the same value that was returned then it should not have any formatting changes happen to it.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:



script type="text/javascript">
$(document).ready(function()
{
	$.ajaxSetup ({ cache: false });  
	
	var loadUrl = "<?php echo site_url("admin/get_uploads"); ?>";  

	$("#result").load(loadUrl);
	
        var cachedResult = "";
	var refreshId = setInterval(function() {
		$.get(loadUrl,function(result){
			if(result !=  cachedResult)
			{
				$("#result").html(result);
				$("#result").effect("highlight", {}, 2000);
                                cachedResult = result;
			}
		});
	}, 5000);
});  
</script>