CODEWITHSUNDEEP
jqueryload
trogne
trogne

Reputation: 3552

refresh only if change

I load in a div like this :

var auto_refresh = setInterval(
function ()
{
    $('#nowplaying').load('nowplaying.php').fadeIn("slow");
}, 10000);

I'd like to load only if there's a change in the page. How could I do that with 'change' ?

Here's what I've tried : 

function ()
{
    var cachedDOM = $('div#nowplaying').html();
    $.get('nowplaying.php',function(data){
        if (cachedDOM != data) {
        $('#nowplaying').load('nowplaying.php').fadeIn("slow");
        }
    }
    )
}, 3000);

The problem is that "cachedDOM != data" is always true.

Patrick

Upvotes: 1

Views: 4301

Answers (6)

Siebe Greidanus
Siebe Greidanus

Reputation: 11

this is working for me:

$(document).ready(function() {
    function loadData() {
        $('#nowplaying').load('currentsong.php').fadeIn("slow");
    }

    var result = null;

    function checkdata() {
        var scriptUrl = "currentsong.php";
        $.ajax({
            url: scriptUrl,
            type: 'get',
            dataType: 'html',
            async: true,
            cache: false,
            success: function(data) {
                if (result != data) {
                    result = data;
                    loadData();
                };
            }
        });
    }

    var auto_refresh = setInterval(function() {
        checkdata();
    }, 4000);
});

Upvotes: 1

trogne
trogne

Reputation: 3552

Thank you xdazz. That's what I did : 

var auto_refresh = setInterval(
function ()
{
function getcursong(){  
 var result = null;
 var scriptUrl = "get_current_song.php";
 $.ajax({
    url: scriptUrl,
    type: 'get',
    dataType: 'html',
    async: false,
    success: function(data) {
        result = data;
    } 
 });
 return result;
}    
gcs = getcursong();
okas = $('#song').html();
if (gcs != okas){
    $('#nowplaying').load('nowplaying.php').fadeIn("slow");
}
}, 10000);

Upvotes: 0

mindandmedia
mindandmedia

Reputation: 6825

instead of using load, you can use an ajax request and set the ifModified-Flag to true. This will only give you a defined response when the content of the page has changed. More setup might be required on the server side (etag) in order for this to work. Here a link to the docs: jquery ajax call

Upvotes: 0

karaxuna
karaxuna

Reputation: 26930

See dom mutation events. Then you will be able to check something changed or not. https://developer.mozilla.org/en-US/docs/DOM/Mutation_events

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

I suppose you mean something as changed in body. You could do something like that:

var cachedDOM = $('body').html();
var auto_refresh = setInterval(
function ()
{
    if(cachedDOM != $('body').html()) 
       $('#nowplaying').load('nowplaying.php',function(){cachedDOM = $('body').html();}).fadeIn("slow");
}, 10000);

Upvotes: 1

xdazz
xdazz

Reputation: 160833

So you need another page let you know whether it changes.

var auto_refresh = setInterval(function () {
  $.get('check_change.php', function(data) {
    if (data.changed) {
      $('#nowplaying').load('nowplaying.php').fadeIn("slow");
    }
  });
}, 10000);

Upvotes: 0

Related Questions