Hi Guys,
I have the following code.

I have a div named data that gets filled in by the data from data.php
How can i get it so it ONLY updates that div when the data is different as currently it doesnt.

It seems to update even though its the same ( If i have something selected in teh div, it will de-select when it updates ( although the html is the same ))

Thanks in advance.

<script language="javascript" type="text/javascript">
<!--
function getdata() {

$(document).ready(function(){
                       
    $.get("data.php", function(result){

    if(result !=  $("#data").html())
    {
        $("#data").html(result);
    }
    
  });
});

}
//-->

var timer = null;
timer = setInterval('getdata()', 2000);
</script>

Just a thought.
I assume the data that "data.php" is fetching is updated every now and then, probably stored in a database or something. It might be more efficient to set some flag or timestamp in the database to indicate weather or not the data has been changed since it was last requested, directly in data.php, and respond with a status variable.

That way, the data would not need to be sent every time your javascript timer ticks. You only need to send a boolean value basically (0 or 1), to tell if there was an update or not. And if there was an update, of course you send the data as well.

This would let less bandwidth go to waste and be slightly faster (depending on how much data you're fetching) and solve your initial issue

Just tried that by making data.php fully static.
Ie: it returns Hello and nothing else.

The page with the JS still updates even though the html is the same?

Is my JS completely flawed or am I going to have to debug further?

Hmm, well, it looks right to me.
Try showing the content in an alert

$(document).ready(function(){
                       
    $.get("data.php", function(result){

    alert("Old value: " + $("#data").html() + "\nNew value: " + result);

    if(result !=  $("#data").html())
    {
        $("#data").html(result);
    }
    
  });
});

Could you provide a link to your site?

It may be easier to take a hash of each value rather than trying to eyeball it. There could be some whitespace throwing off the comprison.

http://pajhome.org.uk/crypt/md5/md5.html

Originally Posted by lizciz

Hmm, well, it looks right to me.
Try showing the content in an alert

$(document).ready(function(){
                       
    $.get("data.php", function(result){

    alert("Old value: " + $("#data").html() + "\nNew value: " + result);

    if(result !=  $("#data").html())
    {
        $("#data").html(result);
    }
    
  });
});

Could you provide a link to your site?

Hmmm..
Just alerted if the data is different and sure enough JS thinks it is..
I have a feeling it may be related to some kind of HTMl encoding..
IE: it gets sent encoded, JS decodes and sees it different each time..

*maybe*

LOL

Will get it to output what it *thinks* is there and what its replacing with..

Maybe that will help me on my trail.

Is there another way to get the HTML / the content of a DIV thats been dynamiccly injected with AJAX?

It appears that the script isnt able to get anything back from the div..
IE: It always thinks its empty even though it has content thats been injected using ajax..

ive tried document.getelementbyid(div).innerhtml..

Ithink what ill do is put the data into a new var and use that to compare against..
Just need to figure out how to do that correctly now lol

Whoooohoooo

Done it after 24 hours lol..

Rather than pull data from the div, ill just save it to its own dedicated var now..

<script language="javascript" type="text/javascript">
<!--
// Declare the olddate var so script knows its different
var olddata = "Empty";

// Get data function..
function getdata() {

$(document).ready(function(){
    // Get data from streamer                       
    $.get("data.php", function(result){
    
    // If var result != #data (the div) then update the div.( Ie, if the data is different to teh div, update the div. )

  //  document.write('Old Data<br>');
  //  document.write(olddata);
  //  document.write('New Data<br>');
  //  document.write(result);
    
    
    if(result !=  olddata)
    {
        olddata = result;
    //    alert('Data different' + result);
        $("#data").html(result);
    }
    
  });
});

}
//-->

var timer = null;
timer = setInterval('getdata()', 3000);
</script>

GFRRRRRRRRRRRRRR

Maybe not.

Appears that Firefox doesnt like this method.

K,
Above method works in:
Chrome - YES
FF - NO
IE - NO.

I really dont understand why you need to write 10 different methods just to get what is supposedly a standard to work!

Maybe you should try handling the issue server side. Take a hash of the div content before displaying it then every time you request new data send that hash as a get param. Before sending the new content, compare the hashes. If they're the same don't output anything.

Originally Posted by NullPointer

Maybe you should try handling the issue server side. Take a hash of the div content before displaying it then every time you request new data send that hash as a get param. Before sending the new content, compare the hashes. If they're the same don't output anything.

I really dont think that will work as the problem is still client side.
The JS just refuses to run on FF and IE but works perfectly on Chrome.

Ive manually added values in and the JS works perfect again on Chrome.
Just FF and IE refuse to play ball. ( They run the function once and never again.. )

OMG!!!
I found the issue!

It was my debugging breaking it!

the document.write ( or document.writeln ) was replacing the WHOLE HTML in IE and FF so the JS didnt run again ( because it wasnt there )

Yet chrome appended the JS document.write ( I think this is how its meant to be handled ) so the JS then ran again ( because it was there!!!!!!!!!!!!! )

You should have stuck to the alert() :P

Just out of curiosity, why not use the load method?

<script language="javascript" type="text/javascript">
$(function(){
    // Get data function..
    function getdata() {
        $('#data').load('data.php');
    }

    var timer = setInterval('getdata()', 3000);
});
</script>

Because i couldnt figure out how to .load into a var.

The problem I had with .load was that i DIDNT! want it to load into the DIV if the DIV already contained the same data.

( .load )
Loaded straight into a div.

( .get )
Loaded into a var,
Checked if its the same or not.
If its different it would then populate the div.

It may be that .load can load into a var the same as .get ?
If so, I still cant see any reason for one over the other in this case?

In your example, you are still getting all of the data every time, whether it is the same or not, you just aren't loading it into the div. Loading it into the div every time only becomes an issue if you have an extreme amount of information to load into it.

Originally Posted by stbuchok

In your example, you are still getting all of the data every time, whether it is the same or not, you just aren't loading it into the div. Loading it into the div every time only becomes an issue if you have an extreme amount of information to load into it.

Yep , it gets the data every time.
The problem isnt the amount of data, Its browser flicker and focus loss.

Ie:
when it updates a div, If some text is highlighted then the highlight gets lost every time the div updates ( even if nothing is worth updating )

Also, on slower browsers or slower computers you can get browser flicker where the div is blatently refreshing rather than instantly on most normal computers today.

The data being retrieved is tiny.
It was to simply fix the above issues ( mainly the loss of focus issue when the html in a div gets updated. )
Its pointless forcing a user to loose focus if theres nothing worth updating.

The simple and easiest way to this is to save the data into database and show the data from database to the dive where you want it to show.

one function will get data from "data.php" via ajax and save the data into database and it will also check if the data is already in database or not. If it is in database the script will skip that and move to next line.

And the other function will get data from database using ajax it will simply get data and no need to check if something is already exist or not.

the 2nd function will be triggered right after the first function. So it will do the same thing that you are looking for.