[AJAX] Maj d'1 table mysql avec ajax, javascript en cliquant sur un radiobutton

Version imprimable

Bonjour,
Je souhaitais faire la mise à jour d'une table mysql avec une méthode ajax (pas très pure :? ).
Alors voilà sur ma page php un tableau avec avec des radiobutton; et je voudrais quant je clique sur l'un d'eux, mettre à jour ma table.
page.php

Code:

1
2
3
4
5
6
echo '<tr><td>...</td>
			<td>...</td>
			<td>
<input type="radio" name="fragment_ref" id="fragment_ref" value="'.$B3['ID'].'" '.($B3['fragment_ref']===true?'checked':'').' onchange="changeFragmentRef('.$B3['ID_citation'].', '.$B3['ID'].')"/>
			</td>
			</tr>';

le javascript (vous reconnaitrez le code de siddh)

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
function getXhr(){
	var xhr = null;
	if(window.XMLHttpRequest) // Firefox et autres
		xhr = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	else { // XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		xhr = false;
	}
	return xhr;
}
 
/**
* Méthode qui sera appelée sur le onchange du select
*/
function changeFragmentRef(id_cit, frag_ref){
 
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
			alert('Mise à jour du fragment de référence ok');
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","action_ajax.php",true);
 
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	//  poster les arguments
	xhr.send("fragment_ref="+frag_ref+"&id_cit="+id_cit);
	alert("id_cit = "+id_cit+" et frag_ref = "+frag_ref);
}

et la page php, action_ajax.php, qui devrait faire l'action qu'elle ne fait pas

Code:

1
2
3
4
5
6
7
<?php
$db = new db();
$sql='UPDATE citations SET ID_fragment_ref = :ID_fragment_ref 
                WHERE ID = :id_citation';
$req = $db->res->prepare($sql);
$temp = $req->execute(array('ID_fragment_ref' => $_POST["fragment_ref"], 'id_citation' => $_POST["id_cit"]));
?>

Mais je n'ai aucun message d'erreur, et la table n'est pas mise à jour; je précise que les 2 variables, id_cit et frag_ref, sont définit. :calim2:

21/06/2011, 10h09
bewidia

A première vue, le code a l'air correct. Regarde dans les logs serveur si tu peux, la fonction php retourne peut-être une erreur.
Les librairies SQL pour traiter les requêtes sont bien disponibles dans ta fonction php ? Tu n'inclues rien donc je ne sais pas.

Dans tous les cas, je pense que tu devrais tester si l'update s'est bien passé pour retourner quelque-chose au javascript qui fera quelque-chose en fonction.
21/06/2011, 10h13
andry.aime
Bonjour,

Essaie de faire un alert sur le retour de la requête AJAX.
Code:

1 2 3 if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); }
Coté php ajoute des echo

Code:

echo $_POST["fragment_ref"];

Sinon, montre nous le code HTML généré pour le formulaire mais pas le php

A+.

Merci de votre aide !
Apparemment, les includes se font bien: xhr.js pour la fonction changeFragmentRef(..), et j'ai ajouté un require_once pour inclure la class db.class.inc.php qui permet l'accès à la base par PDO dans le fichier action_ajax.php. Mais cela ne change rien.

J'ai essayé d' afficher les POST dans action_ajax.php mais ils n'apparaissent jamais, c'est comme si cette page n'était jamais executée.

Ensuite, je ne passe jamais dans la condition

Code:

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

( c'est pas bon signe docteur? :oops: ) et si je place des alert ailleurs: alert(xhr.responseText) n'affiche rien, bien qu'il y est bien un objet XMLHttpRequest.

Voici le code généré pour page.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<tbody><tr><td width="10px">
 
<a href="..." relation onclick="javascript:nv=window.open('...','nv','height=200,width=600,location=no,scrollbars=yes,menubars=no,toolbars=no,resizable=yes,status=yes');nv.opener=self;return false;;" title="Supprimer cette relation" target="_blank"><img src="images/delete.png" alt="-"/></a>
</td><td width="10px">
<a href="..." relation onclick="javascript:nv=window.open('...','nv','height=600,width=640,location=no,scrollbars=yes,menubars=no,toolbars=no,resizable=yes,status=yes');nv.opener=self;return false;;" title="Modifier cette référence critique" target="_blank"><img src="images/edit.png" alt="-"/></a>
</td><td><span style="text-decoration: underline;">Culottes</span>.</td><td>g226_7_f_107__v____</td>
			<td>PP</td>
			<td>
				<input type="radio" name="fragment_ref" id="fragment_ref" value="2030"  onchange="changeFragmentRef(679, 2030)"/>
			</td>
			</tr><tr><td width="10px">
<a href="..." relation onclick="javascript:nv=window.open('...','nv','height=200,width=600,location=no,scrollbars=yes,menubars=no,toolbars=no,resizable=yes,status=yes');nv.opener=self;return false;;" title="Supprimer cette relation" target="_blank"><img src="images/delete.png" alt="-"/></a>
</td><td width="10px">
<a href="..." relation onclick="javascript:nv=window.open('...','nv','height=600,width=640,location=no,scrollbars=yes,menubars=no,toolbars=no,resizable=yes,status=yes');nv.opener=self;return false;;" title="Modifier cette référence critique" target="_blank"><img src="images/edit.png" alt="-"/></a>
</td><td><span style="text-decoration: underline;">Culotte</span>. [...] Percy.</td><td>g226_7_f_108__r____</td>
 
			<td>PP</td>
			<td>
				<input type="radio" name="fragment_ref" id="fragment_ref" value="2031" checked onchange="changeFragmentRef(679, 2031)"/>
			</td>
			</tr><tr><td width="10px">...

Re,

Essaie de faire

Code:

1
2
3
4
5
6
7
8
9
xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4){
			if (xhr.status==200 || xhr.status==0){
                           alert(xhr.responseText);
                           }else{
                           alert (xhr.status);
                        }
		}

et retire cette partie

Citation:

alert("id_cit = "+id_cit+" et frag_ref = "+frag_ref);

A+.

21/06/2011, 11h36
andry.aime

:alerte: Un id doit être unique dans un document :alerte:
Et utilise l’événement onclick à la place de onchange.

A+.
21/06/2011, 12h06
tigunn
Alors, j'ai utilisé l'evt onclick, ainsi qu'un id unique (effectivement c'est moins conflictuel).
J'ai viré le alert en fin de fonction changeFragmentRef();
et remplacé le contenu de xhr.onreadystatechange = function () {} par
Code:

1 2 3 4 5 6 7 if(xhr.readyState == 4){ if (xhr.status==200 || xhr.status==0){ alert(xhr.responseText); }else{ alert (xhr.status); } }
Il m'affiche un statut 404, donc il n'arrive pas à trouver mon fichier action_ajax.php ? mais il est dans le même répertoire.
J'ai essayé
Code:

1 2 3 4 xhr.open("POST","action_ajax.php",true); xhr.open("POST","./action_ajax.php",true); // et meme: xhr.open("POST",".\action_ajax.php",true);
rien n'y fait j'ai toujours xhr.status=404 :calim2:

-----------------------------------------------------------
Pour limiter les possibilités d'erreur, j'ai définit mes 2 fonctions javascript dans la page.php qui se trouve maintenant dans le même répertoire que action_ajax.php; et le xhr.status a changé en 500 => pb sur le serveur.
Mais quel pb?? :calim2:
21/06/2011, 13h37
andry.aime

Re,

Le fichier qui fait la requête AJAX (en non pas le fichier javascript) et le fichier action_ajax.php sont dans le même répertoire?
Si tu es sous linux, vérifie la casse.

A+.
21/06/2011, 13h54
tigunn

page.php et action_ajax.php sont dans le même répertoire: www
J'ai enlevé la déclaration des fonctions javascript utilisées pour les remettre dans xhr.js;
et j'ai replacé xhr.js dans www/jscripts.

Pas d'autres modifs, et maintenant le statut est 500 - internal Server Error. DOnc il doit trouver action_ajax.php?!

Sinon, le serveur de dev est une distrib linux.
21/06/2011, 15h18
andry.aime

Met tes projets dans un dossier mais pas directement dans www.
21/06/2011, 15h27
tigunn

c'est le cas : c'est l'arborescence qui est ainsi :
Serveur/NomProjet/www_NomProjet (et non www)
21/06/2011, 17h13
tigunn

UN grand merci à vous deux, et un très humble pardon :oops: ;
j'ai trouvé l'erreur qui venait bien d'un include mal fait, la classe db dans action_ajax.php qui nécessitait l'include du fichier de conf (où est définit entre autre le nom de la bdd =>ah j'ai honte :oops: )
Mais il a tout de même fallut que j'aille dans les logs du serveur, pour comprendre.
Enfin, ça marche ! :ccool:

@siddh: Très bon code en fait!