Partage

Comment fonctionne ifModified avec JQuery ??

21 août 2010 à 19:49:49

Bonjour ou bonsoir !

Je suis confronté à un problème ...
J'aimerais savoir comment fonctionne ifModified dans jQuery(1.4) car j'ai chercher a peu près partout mais rien de très concluant ...
Voici donc mon fichier js de départ (j'aurais évidemment inclus préalablement jQuery ... Cette fonction est mis aussi dans le ready(...);)

function chargerContenu() {
	
	$.ajax({
		url: 'fichierACharger.php',		
		ifModified: true,
		success: function(data){
			
			$("#contenu").append(data);
			
			setTimeout(chargerContenu(), 5000);
		}
	});
}
chargerContenu();

Et voici ma page fichierACharger.php :
(pour plus de simplicité toute les modifications se feront manuellement dans ce fichier *)

<?php
/* Quelque chose ici ??? */
?>
ligne 1<br/>
ligne 2<br/>
ligne 3<br/>

* On évitera ainsi les accès au BDD qui grossissent le code ...

En toute logique, des qu'on lance la page avec le code javascript, le contenu sera affiché dans la div. Aucun problème jusque la ...
Pour visualisé correctement les "problèmes" (ou plutôt le non fonctionnement de ifModified) il faut ouvrir Firebug en console (avant d'exécuté le code)
Ainsi on remarquera que ifModified ne sert à rien, puisqu'il n'est même pas pris en compte ...

Bref je sais que je suis sur la mauvaise voie simplement par la logique des choses...
1) On exécute la fonction
2) Si tout se passe bien (ce qui est la cas) on rentre dans le success
3) On fait ce qu'on a à faire
4) On re-exécute la fonction avec setTimeout(...)

Bref logiquement parlant, c'est normal que le ifModified ne "fonctionne" pas mais comment faire alors ?
Si on enlève le setTimeout, la fonction n'est plus rapellée ...
Dilem ...

Merci de m'éclairé !
(j'ai aussi lu que ifModified regardait les headers "etag" et "last-modified")

PS : voici le code "complet" des tests pour les fainéants

html + js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
	   <title>---</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	</head>
	<body>

		<div id="contenu" style="border: 1px solid red; width: 200px; height: 200px;">
		</div>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			
			function chargerContenu() {
	
				$.ajax({
					url: 'fichierACharger.php',		
					ifModified: true,
					success: function(data){
						
						$("#contenu").append(data);
						
						//setTimeout(function(){ chargerContenu();}, 5000);
					}
				});
			}
		chargerContenu();
		
		});
		</script>
	</body>
</html>

"php"

ligne 1<br/>
ligne 2<br/>
ligne 3<br/>

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

math001

22 août 2010 à 12:37:03

Donc en gros le "problème" est dans le debugger ?
J'pense que ifModified fait une boucle infinie pour voir si les headers ont été modifier...
Par contre je ne sais pas comment évité l'affichage dans le debugger ...

Nek'

22 août 2010 à 12:49:30

Le problème viendrait plutôt de ton code PHP alors...

Ceci dit attention à ta méthode pour faire les requêtes des pages, si une page met plus d'une seconde à se charger, une autre peut se charger avant celle-ci et provoquer (inévitablement) un bug !

function chargerQuelqueChose(id){
	$.ajax({
		url: 'chemin/script.html?p='+id, 
		dataType: 'json', 
		ifModified: true,
		success: function(data){
		   // Tout ton code
		   setTimeout(function(){ chargerQuelqueChose(id) }, 1000);
		}
	});
	
}

Montre ton code PHP (ou ce que tu utilises) pour voir. Ajoute aussi la fonction error à ton $.ajax comme ça tu verras mieux le bug, quitte à utiliser function(data) { alert(data.responseText); }.

Bon courage.

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 13:01:37

J'ai ajouter ceci : error: function(data){ console.log(data);}, (au dessus du success: (...))

Il ne m'indique rien dans la console FIrebug donc je pense qu'il n'y aucun prob...

J'ai mis le setTimeout() dans le success: (...) mais quand je modifie manuellement le fichier avec le json, plus rien n'est mis à jour (contrairement à avant ...)

Et il ne m'affiche plus aucun problème dans la console firefox...
Cependant que devrait-je mettre dans mon script php pour modifier les headers ???
Parce que la c'est simplement du json (rien de plus en fait)

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 13:06:58

Il n'est -normalement- pas strictement nécessaire de modifier tes headers.

Mais tu peux utiliser les headers suivants:

<?php
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');
?>
<!-- Ou -->
<?php header("Content-type: text/javascript"); ?>

Le premier est à préférer, internet explorer peut poser problème ;p.

Have fun.

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 13:11:54

Et il ne faut pas changé la date d'expiration ??
Je veux dire comment ça devrait fonctionné ?

EDIT :
(corrigé moi si j'ai pas compris...)
En gros quand on fait une modification, on enregistre la date.
Après pour l'affichage, on prend cette dans et on la place dans le header : header('Expires: date ici GMT'); ?

Merci encore beaucoup

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 13:30:23

Nan, en fait les headers tu mets ça sans modifier.

C'est à cause d'internet explorer, parfois quand on actualise (même via ajax) il ne réactualise pas le contenu... C'est... Légèrement embêtant

.
Donc on lui met une date de cache super vieille pour qu'il actualise la prochaine :') . Enfin c'est ce que MOI j'ai compris XD.
Après je doute que IE7 comporte encore de "bug".

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 13:37:46

Ha ben alors ça marche pas

Bizarrement

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 13:41:08

Ah non mais ce n'est pas en ajoutant les headers que ça marchera mieux. Les navigateurs savent s'en passer.

Il me faut plus que "ça ne marche pas" pour t'aider, tu t'en doute.
Décris moi ce qui se passe, ce que tu as tenté de faire.

As tu testé ton code PHP sans ajax ? Peut être que si tu envoyais tes données via GET au lieu de l'url ça irait mieux, as tu essayé ?

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 13:46:16

En gros j'ai l'impression qu'il ne va plus rien chercher du tout ...

Avant ma page était une extension .html puis j'ai changé en .php pour justement pouvoir mettre les headers.

Dans le 1er cas (avec .html) il affichais bien les info de la page demander (la page ou il y a le json) mais le isModified ne semblait pas fonctionné ...

Dans le 2ème cas quand la page est en .php et qu'il y a les même info dessus, juste avec des headers en + (et même sans ça pose le même problème...) ben il ne m'affiche plus rien bizarrement ...

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 13:49:53

Erf mais le principe du premier justement c'est que ça force à l'actualisation.

Met juste

<?php
header('Content-type: application/json');
?>

Mais c'est assez zarb ton problème je ne pige pas bien, les headers c'est des messages uniquement pour les navigateurs.
Personnellement je mets mes headers dans un soucis de compatibilité, je n'en ai jamais eu réellement besoin !

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 13:56:38

Alors, avec l'extension .php et sans ifModified ça marche bien

Mais bon la ça fonctionne simplement grace au settimeout() donc on perd l'interet du ifModified ...

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 14:20:27

Nan mais de toutes façons ton problème c'était le ifModified !

Je viens seulement de faire tilt. Ça ne peut pas fonctionner si il n'y a pas systématiquement success et comme ton ifModified il permet de ne plus avoir le fameux success systématiquement...

C'est bidon.
* se tape la tête sur un mur *

sooo C'est quoi le blem-pro ?

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 14:44:53

Heu pas tout compris

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 18:10:00

Citation : jquery doc

ifModified (type Boolean):
Default: false
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. In jQuery 1.4 this technique also checks the 'etag' specified by the server to catch unmodified data.

Autrement dit. Si le contenu de ton fichier n'est pas modifié, la fonction success ne s'exécute pas.
Si elle ne s'exécute pas tu n'as plus de setTimeout() parce que (normalement) tu l'as mis dans la fonction success !
En revanche tu pourrais surement mettre ton setTimeout() dans complete, à priori elle devrait s'exécuter sans problème...

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

22 août 2010 à 19:00:31

Comme ça :

$.ajax({
	url: 'chat/'+id+'.php', 
	dataType: 'json', /* delete ça au cas ou  */
	//cache: false,
	ifModified: true,
	complete: function(){setTimeout(function(){ chargerFenetre(id) }, 1000);},
	success: function(data){
         /* exécution */
        }
});

???

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

22 août 2010 à 22:02:17

Ouais c'est ça

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

24 août 2010 à 11:29:48

Petit up

J'ai modifié totalement le message et le titre, pour synthétisé le problème !

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github

Nek'

24 août 2010 à 14:09:31

Perso j'aurais plutôt mis la fonction en dehors du .ready...

Sinon voici ton code commenté pour que tu comprennes

function chargerContenu() {
	// Démarrage d'une requête ajax
	$.ajax({
		url: 'fichierACharger.php', // On charge le fichier fichierACharger.php	
		ifModified: true, // Si ifModified est à true, depuis le dernier chargement du fichier si le contenu est modifié alors success s'éxécute, si le contenu du fichier n'a pas changé success ne s’exécutera pas.
		complete: function(data){ // Je modifie en "complete" car success ne s'éxécutera pas forcément si le contenu du fichier n'a pas changé
			
			// Il faut systématiquement relancer la requête ajax sinon le script s'arrête, ça semble évident
			
			setTimeout(chargerContenu(), 5000);
		},
		success: function(data) { $("#contenu").append(data); } // onSuccess on peut ajouter notre contenu...
	});
}
chargerContenu();

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

Cryde

24 août 2010 à 14:49:27

Ca ne marche toujours pas ...
Tu as essayé ?
Prend le "code" que j'ai donné et tu verra ...
Modifie manuellement le fichier et tu verra qu'il ne se passe rien :/

EDIT :

Ca marche mais que avec les fichiers html ... va savoir pourquoi ... (1er prob)
Bref un autre est le remplissage de la console firefox ! (en gros il trouve rien qui a été modifier donc il affiche une belle erreur à chaque rechargement

(2eme prob))

Erreur : aucun élément trouvé
Fichier Source : /dossierTestIfMod/fichierACharger.html
Ligne : 1

Donc tu as une idée pour modifié ça ?
En tout merci on avance

Mes projets : WhoisRedJohn, fatidique et MusicAll. Mon Github