[AJAX] AJAX sous chrome

Bonjour,

J'ai bien fait une recherche sur internet sous le même titre que celui ci-dessus, mais je n'ai trouvé que des vieux sujets qui n'ont pas résolu mon problème.

J'ai réalisé une requête AJAX en pompant sur un tutoriel. J'ai donc réussi à mettre en place cette action et l'ayant testée sur FF, IE 9 et 12, je peux vous dire que ça marche du tonnerre et j'utiliserai très régulièrement l'AJAX dorénavant. Mon problème est que Google Chrome ne reconnait pas du tout cette requête, ou plutôt, je ne sais pas trop ce qu'il fait, car ça tourne, ça occulte un moment le div "contentForm" puis ça recharge la page. Aucune erreur ne m'est retournée (bon, elle doit certainement avoir lieu dans le fichier "traitRsvp.php").

Est-ce quelqu'un verrait l'erreur dans mes script ? Je suis quand même allusiné de voir quelque chose fonctionner sous IE et pas Chrome!!!

Merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var xhr = null;
function request(callback) {
 
	if (result != document.getElementById("captcha-input").value) {
		alert("<?php echo $trad_mauvais_control; ?>");
		return;
	}
 
	var id = encodeURIComponent(document.getElementById("nomID").value);
	if (id == -1) {
		alert("<?php echo $trad_oubli_nom; ?>");
		return;
	}
	function test(champ) {
		return (document.getElementById(champ).value == "") ? 0 : encodeURIComponent(document.getElementById(champ).value);
	}
	var aperoAdult = test("aperoAdult");
	var aperoEnfant = test("aperoEnfant");
	var souperAdult = test("souperAdult");
	var souperEnfant = test("souperEnfant");
	var lang = "<?php echo $lang; ?>";
 
	if (xhr && xhr.readyState != 0) { // Si il y a déjà une requête en cours
		xhr.abort(); // On annule la nouvelle requête !
	}
 
	xhr = getXMLHttpRequest();
 
	document.getElementById("contentForm").innerHTML =
					'<center><img src="images/loader.gif" alt="loading" /></center>';
 
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
			callback(xhr.responseText);
		} else if (xhr.readyState < 4) { // En cours de chargement
		}
	};
 
	xhr.open("GET", "images/traitRsvp.php?id=" + id +
									"&aperoAdult=" + aperoAdult +
									"&aperoEnfant=" + aperoEnfant +
									"&souperAdult=" + souperAdult +
									"&souperEnfant=" + souperEnfant +
									"&lang=" + lang, true);
	xhr.send(null);
}
 
function readData(sData) {
	document.getElementById("contentForm").innerHTML = sData;
}

Fichier oXHRS.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<?php 
$bdi = mysqli_connect('localhost', 'root', 'dadou130','mariage');
$lang = (isset($_GET["lang"])) ? $_GET["lang"] : 'fr';
include "../images/lang.php";
header("Content-Type: text/plain");
 
$id = (isset($_GET["id"])) ? $_GET["id"] : NULL;
$aperoAdult = (isset($_GET["aperoAdult"])) ? $_GET["aperoAdult"] : 0;
$aperoEnfant = (isset($_GET["aperoEnfant"])) ? $_GET["aperoEnfant"] : 0;
$souperAdult = (isset($_GET["souperAdult"])) ? $_GET["souperAdult"] : 0;
$souperEnfant = (isset($_GET["souperEnfant"])) ? $_GET["souperEnfant"] : 0;
 
$requete ="UPDATE personne SET
				aperoAdult=".$aperoAdult.",
				aperoEnfant=".$aperoEnfant.",
				souperAdult=".$souperAdult.",
				souperEnfant=".$souperEnfant."
				WHERE id=".$id;
 
$retourBDD = mysqli_query($bdi, "SELECT prenom FROM personne WHERE id=".$id);
$ligne = mysqli_fetch_array($retourBDD);				
if (mysqli_query($bdi, $requete)) {
	echo '<h3>Merci '.$ligne[0].', '.$trad_sql_ok.'</h3>';
} else {
	echo '<h3>'.$trad_erreur_sql.'</h3>.';
}
?>

Et fichier oXHRS.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}

heu rassures moi , tu n'as pas les **************** dans ton code si ?

Non, non, ce sont des espaces.

Une erreur lors du copier-coller, je ne sais pas d'où ça vient.

Je vais essayer de modifier ça

Ca vient de certains navigateurs qui remplacent les espaces insécables ou les tabulations par ces * et c'est vrai que c'est un peu perturbant...

Tests effectués, mais toujours rien

Pour ceux qui voudraient tester par eux même, voici le lien: www.miriam-david.ch/web (vous pouvez essayer une inscription au hasard, je viderai la BDD par la suite).

Pour l'instant, j'ai maintenant également testé la page traitRsvp.php sur Chrome (en donnant un ID existant), elle marche.
J'ai également controlé le lien envoyé par la requête via une alerte et ça me donne ça: images/traitRsvp.php?id=13&aperoAdult=14&aperoEnfant=16&souperAdult=18&souperEnfant=20&lang=fr
Donc pas de soucis

N'y aurait-il personne ayant une idée supplémentaire, je colle là.

Bonjour,
ajoutes un type="button" à ton BUTTON

Code:

<button type="button" onclick="request(readData);" class="btn overlay pink rounded variant-font custom-primary">Enregistrer</button>

comme il se trouve dans une FORM, dont on ne sait à quoi elle sert, il est de type submit donc soumet le formulaire.

Salut NoSmocking,

T'es vraiment trop fort, il suffisait d'enlever la balise FORM que je n'utilisais pas en effet.
Maintenant ça marche sur Chrome.

Merci, merci, merci