[AJAX] onReadyStateChange ne fonctionne pas sur Firefox

04 déc. 2007, 18:09

Bonjour,

J'ai mis en place un processus de sauvegarde automatique AJAX pour un backoffice avec un éditeur FCKEDitor. Ce processus se passe en x temps :
1) lecture du contenu de l'éditeur
2) affichage d'une image animée pour la sauvegarde (dans un div id=loader)
3) envoi de la sauvegarde
4) affichage d'un texte indiquant la sauvegarde (dans un div id=saveHour)

soit donc

Code : Tout sélectionner

var xhr = createXMLHttpRequestObject ();
//Fonction de sauvegarde automatique de l'instance de l'éditeur
function SaveTimer (firstTime) {
	  if (firstTime == false) {
	  		//Lecture du contenu de l'éditeur (value ne suffit pas) et conversion pour envoi via une URL
				var oFCK = FCKeditorAPI.GetInstance("TEXTE"); 
				data = "ID=1023&TEXTE=" + encodeURIComponent (oFCK.GetXHTML());
				//Affichage de l'horloge et masquage du texte de sauvegarde
				document.getElementById('saveHour').style.visibility = 'hidden';
				document.getElementById('saveHour').style.display = 'none';
				document.getElementById('loader').style.visibility = 'visible';
				document.getElementById('loader').style.display = '';
				//Envoi de la sauvegarde en post
				xhr.open("POST", "mod_ajaxpost.php", true);
				xhr.onReadyStateChange = ResponseSave;
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                  
				xhr.send(data);
    }
    //Relance de la sauvegarde au bout de 100 secondes
    setTimeout("SaveTimer(false)",100000);
}

//Fonction lancée à la fin de la création de l'éditeur et qui assure que FCKeditorAPI est créé
function FCKeditor_OnComplete( editorInstance ) {
		document.getElementById('loader').style.visibility = 'hidden';
		document.getElementById('loader').style.display = 'none';
		SaveTimer(true);
}

Jusque là tout va bien : les sauvegardes sont lancées sous IE et Firefox C'est là que ça ne va plus

Code : Tout sélectionner

function ResponseSave() {
	if (xhr.readyState == 4) {
				//Masquage de l'horloge et affichage du texte de sauvegarde
				document.getElementById('loader').style.visibility = 'hidden';
				document.getElementById('loader').style.display = 'none';
				var dt=new Date();
				if (xhr.responseText == "ok") {
					document.getElementById('saveHour').innerHTML = "<i>Sauvegardé à : "+dt+"</i>";
				} else {
					document.getElementById('saveHour').innerHTML = "<font color=red>Problème de sauvegarde à : "+dt+"</font>";
				}
				document.getElementById('saveHour').style.visibility = 'visible';
				document.getElementById('saveHour').style.display = '';
	}
}

Sous IE, pas de problème. L'image dans loader est masquée et l'heure de sauvegarde affichée. Sous Firefox, rien à faire : la fonction ResponseSave n'est jamais appelée (j'ai essayé en mettant une alerte juste avant le test de xhr.readyState. J'ai également essayé sans succès avec la syntaxe

Code : Tout sélectionner

xhr.onReadyStateChange = function () {
...
}

Il n'y a pas de plantage puisque les sauvegardes continuent à se faire au rythme de 100 secondes. Mais il n'y a pas de mise à jour de l'affichage.

Qu'est-ce qui cloche ? Merci

05 déc. 2007, 12:02

Pas d'erreur JS dans la console de Firefox ?

Dans ta fonction createXMLHttpRequestObject(), ton objet xhr est bien créé avec un new XMLHttpRequest() dans le cas où tu es sous firefox ?

06 déc. 2007, 00:01

et question bête : le status

Code : Tout sélectionner

xhr.readyState == 4 && xhr.status == 200

06 déc. 2007, 09:57

Merci pour vos réponses :

Pas d'erreur JS dans la console de Firefox ?

Des erreurs de css qui n'ont rien à voir, mais aucune erreur JS hélas.

Dans ta fonction createXMLHttpRequestObject(), ton objet xhr est bien créé avec un new XMLHttpRequest() dans le cas où tu es sous firefox ?

L'objet est créé (cf code ci-dessous) et il fonctionne, du moins pour les fonctions open et send

Code : Tout sélectionner

function createXMLHttpRequestObject () {
	var objRequest = null;
	try {
		objRequest = new ActiveXObject ('MSXML2.XMLHTTP');
	}
	catch (Error) {
		try {
			objRequest = new ActiveXObject ('Microsoft.XMLHTTP');
		}
		catch (Error) {
			try {
				objRequest = new XMLHttpRequest ();
				alert ("FF");
			}
			catch (Error) {
				objRequest = false;
			}
		}
	}
	return objRequest;
}

et question bête : le status

aucune question n'est bête.

J'ai positionné le status, mais il ne se passe rien sous FF

d'ailleurs le code

Code : Tout sélectionner

function ResponseSave() {
	alert ("ResponseSave");
}

ne fonctionne pas sous Firefox.

06 déc. 2007, 11:50

Et si ....

... tu écris le nom de la propriété en minuscules ?

Code : Tout sélectionner

xhr.onreadystatechange = ResponseSave;

Ou que tu la déclares avant de faire le open() ?

06 déc. 2007, 17:03

Et si ....

... tu écris le nom de la propriété en minuscules ?

Bien joué !

Code : Tout sélectionner

xhr.onreadystatechange = ResponseSave;

et il faut garder

Code : Tout sélectionner

xhr.setRequestHeader(...)

Là, il ne faut pas de minuscules, sinon ça ne marche pas non plus

Ca ne serait pas des unixeux qui auraient développé Firefox ?

Merci beaucoup.

(tu peux mettre résolu).

[AJAX] onReadyStateChange ne fonctionne pas sur Firefox

Qui est en ligne