Animation jQuery uniquement si les informations ajax ne sont pas les mêmes

Question

J'ai une minuterie toutes les 20 secondes à l'aide de setInterval, elle utilise la fonction ajax de jQuery load() pour définir la div toparticles avec les informations d'une autre URL sur le site. Une fois cette charge réussie, elle effectue un effet de surbrillance jQuery sur le premier article de la div toparticles. Tous les articles sur les deux places sont conservés dans leur propre table, donc j'utilise la table #toparticles: d'abord.

Je veux seulement effectuer le chargement dans la division toparticles, ET l'animation si le premier article n'est pas le même.

Ainsi, le concept est le suivant: Toutes les 20 secondes: Cocher cette URL, si le premier tableau ne correspond pas à la première table de la page que vous êtes, recharger l'ensemble div avec les informations de cette URL, puis effectuez une animation de surbrillance.

Mon code actuel:

setInterval(function() { 
$("#toparticles").load("http://myarticles/feed/of/top/articles", function() 
{ 
$("#toparticles table:first").effect("highlight", {color:"#f2f37f"}, 1000);}); 
}, 20000); 

Merci si vous pouvez fournir toute aide.

Answer 1

Une approche naïve (mieux serait d'avoir une sorte d'identité) est

setInterval(function() { 
    var first_html = $("#toparticles table:first").text(); 
    $("#toparticles").load("http://myarticles/feed/of/top/articles", function() 
    { 
    if (first_html == $("#toparticles table:first").text()) 
    { 
     $("#toparticles table:first").effect("highlight", {color:"#f2f37f"}, 1000); 
    } 
    }); 
}, 20000); 

Il stocke le texte de la première table dans une variable avant l'appel ajax, puis compare à la nouvelle première table. (I vérifie uniquement du texte, vous pouvez changer cela à .html() pour vérifier toute la structure html si vous voulez que le niveau de détail)

Answer 2

Vous pourriez probablement changer votre demande d'utilisation jQuery.ajax(). Il a une option "ifModified". A partir de la documentation:

ifModifiedBoolean Par défaut: false

Laissez la demande soit prise que si la réponse a changé depuis la dernière demande. Ceci est fait en vérifiant l'en-tête Last-Modified. La valeur par défaut est false, en ignorant l'en-tête. Dans jQuery 1.4, cette technique vérifie également le 'etag' spécifié par le serveur pour capturer les données non modifiées.

jQuery.ajax() documentation

Aussi, je ne me suis pas vérifié, mais il semble que si elles ont un exemple qui utilise le dos à l'appel de la fonction .load():

$("#success").load("/not-here.php", function(response, status, xhr) { 
    if (status == "error") { 
    var msg = "Sorry but there was an error: "; 
    $("#error").html(msg + xhr.status + " " + xhr.statusText); 
    } 
});