[AJAX] Récupérer $_POST actualisé par AJAX

Version imprimable

25/02/2008, 13h27
me-to-you93

[AJAX] Récupérer $_POST actualisé par AJAX
Bonjour à tous

Alors voila mon probleme, j'ai dans un formulaire, utilisé AJAX pour actualiser une seconde liste deroulante à partir d'une premiere, puis actualiser une zone de texte à partir de la deuxieme... Tout ça marche bien (que sur firefox d'ailleurs je sais pas si c'est normal).

et maintenant, dans ma page de vérification du formulaire, je pensais pouvoir récuperer normalement les valeurs actualisées (notament la selection sur la deuxieme liste) en $_POST, mais PHP ne la trouve pas. C'est comme si le submit n'envoyait que les données présentes au premier affichage de la page, et donc que les parties actualisées par AJAX n'en font pas partie.

il ne rentre donc pas dans la condition suivante
Code:

1 2 3 if(isset($_POST['codeRef'])) { }
Comment je peux faire ? si vous voulez une autre partie du code demandez le moi.

Merci
25/02/2008, 18h05
tavarlindar

Bonjour,

Je suis en plein dans l'étude d'ajax ...

Pourrais-tu nous mettre faire part de ton code ?

oui bien sûr.

Pour simplifier le code et ne pas trop surcharger la discussion, j'ai retiré certains éléments qui peuvent faire paraitre ce script défaillant mais il marche :D.

Alors voici le code HTML:

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
 
<table align="center" border="0">
<tr>
      <form id="commande" name="commande" method="POST" enctype="multipart/form-data" action="vcommande.php">
</tr>
<tr>
      <td width="150" class="form">Fournisseur:</td>
      <td><!-- Jai simplifié, normalement la liste va chercher les fournisseurs dans la base de données -->
      <select name="idFournisseur" align="center" onChange="javascript:getRefs();"> 
	<option value= "0" selected>- - - - - - - -</option><? 
	<option value= "1">Four1</option>
	<option value= "2">Four2</option>				
      </select>
      </td>
</tr>
<tr id="refs">
     <!--Cest ce tr qui sera actualisé par ajax pour afficher la liste des references en fonction du fournisseur	-->
     <td width="150" class="form">Ref produit:</td>
     <td>
          <select name="codeRef">
               <option value="0">- - - - - - - -</option>
          </select>
     </td>
</tr>

La fonction AJAX getRefs() appelée par le onChange de la liste:

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
 
function getRefs() 
{
creerRequete();	/* initalise la variable globale "requete" */
 
var monForm = document.getElementById('commande');	
var fournisseurs = monForm.idFournisseur;	/* On récupère la valeur sélectionnée dans la liste déroulante */
var four = "";
 
for (i = 0; i < fournisseurs.options.length; i++)
{
     if (fournisseurs.options[i].selected) 
     {
          four += fournisseurs.options[i].value;
     }
}
 
var url = 'references.php?four='+four;	/* On définie l'url à appeller en passant cette valeur */
requete.open('GET', url, true);    /* Préparation d'une requête asynchrone de type GET */
 
requete.onreadystatechange = function() 
{
     if(requete.readyState == 4)		/* 4 signifie que l'état est "complete" */
     {
          if(requete.status == 200)	/* code HTTP si tout est ok */
          {
               document.getElementById('refs').innerHTML = requete.responseText;	/* Traitement de la réponse, on met à jour notre tr via son id*/
          }
     }
};
 
requete.send(null);		/* Effectue la requête */
}

La page references.php qui va traiter le resultat d'AJAX

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
$four = isset($_GET['four']) ? $_GET['four'] : false;
 
if($four != false)
{	?>
<td width="150" class="form">Ref produit:</td>
<td>	
     <select name="codeRef" id="codeRef" align="center" onChange="javascript:getLibArticle();">
     <? 
     $req = "ma requete";
     $req2 = mysql_query($req)or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
 
     while($donnees = mysql_fetch_array($req2))	// On parcours toutes les ref 
     {
          echo '<option value='.$donnees['codeRef'].'>'.$donnees['codeRef'].'</option>';
     }
?>
     </select>
</td>
<?  }

27/02/2008, 18h22
Herode

Pour récupérer quelque chose dans $_POST côté serveur, il faut avoir utilié la méthode "post" côté client.
Or, si je lis bien ton code :

Code:

requete.open('GET', url, true); /* Préparation d'une requête asynchrone de type GET */

;)
28/02/2008, 11h37
me-to-you93

Oui tu as raison mais le GET que tu vois là sert pour transmettre la variable à ma page references.php, qui elle même est alors inclue dans le formulaire apres actualisation d'AJAX.

Dans references.php, je récupère bien un GET pour avoir le resultat de la requete XMLHttpRequest:

Code:

$four = isset($_GET['four']) ? $_GET['four'] : false;

Par contre j'ai bien un POST pour soumettre mon formulaire:

Code:

<form id="commande" name="commande" method="POST" enctype="multipart/form-data" action="vcommande.php">

Cependant, j'ai quand même essayé de récuperer un $_GET apres validation du formulaire, et effectivement il n'existe pas non plus.
28/02/2008, 13h50
Herode

Ha oui, autant pour moi, j'avais lu trop vite... :oops:
La déclaration de ton formulaire semble incorrecte : balise fermante </form> absente et de toutes façons, il faudrait la placer dans le <tr> où la balise ouvrante a été déclarée. Si tu déclares ta balise <form> correctement avant et après la <table>, ça pourrait aller mieux.
28/02/2008, 15h39
me-to-you93

Oh oui c'etait ça !! ça marche maintenant.

En fait je comprenais pas parce que les autres variables je les récupérait bien, il me manquait que celles actualisées par AJAX. Je suis pas sur de comprendre pourquoi ça marche mieu en encadrant le <table> par mon form plutot que l'inverse, mais c'est pas grave.

Merci beaucoup Herode ! :yaisse2:
28/02/2008, 15h47
Herode
Citation:

Envoyé par me-to-you93

Je suis pas sur de comprendre pourquoi ça marche mieu en encadrant le <table> par mon form plutot que l'inverse, mais c'est pas grave.

Mieux vaudrait, pourtant ;)
La raison est que si ton élément n'est pas bien formé, donc pas conforme au DOM, tu n'as aucune garantie que les navigateurs vont le traiter correctement. Dans ton cas, il y avait deux erreurs sur ton élément <form>, qui était donc
- ignoré du navigateur lors du submit
- traité différemment au niveau du rendu visuel, le résultat dépendant de la tolérance des navigateurs aux erreurs.

Les deux erreurs sont :
1 - balise non fermée
2 - si tu mets <form> à l'intérieur de la table, ce qui est possible, il faut refermer avec la balise </form> selon les normes d'imbrication. En particulier, une suite comme
Code:

1 2 3 4 5 6 <tr> <form> [autres balises sauf la balise </form>] </tr> [autres balises sauf la balise </form>] </form>
est illégale : on peut imbriquer des balises, on ne peut pas les spaghettiser :P
28/02/2008, 16h24
me-to-you93

Je vois, seulement ce que j'ai oublié de te dire c'est que je n'avais pas mis tout le code dans mon premier message, mais je fermais bien mon <form> plus bas, et avant de fermer mon <table>. C'est juste qu'en changeant l'ordre d'imbrication, c'est à dire <table> dans <form> et non plus <form> dans <table> que ça a marché.

Et sinon aurais tu une idée pourquoi cela ne fonctionne pas sous IE ?
j'ai remarqué que cela fonctionnait en utilisant un <span> au lieu d'un <tr> pour rafraichissement, mais avec le span le champ actualisé etait en dehor du tableau donc formulaire tout moche !
Avec le <tr>, firefox fait ça comme il faut mais IE ne fai rien on peut voir en bas "Erreur sur la page" avec un logo JavaScript.
28/02/2008, 17h22
Herode

Sans doute. Quel est le code HTML correspondant aux différents cas ?
29/02/2008, 09h42
me-to-you93

Comment ça aux différents cas ? tu veux dire avec le <tr> et avec le <span> ?
29/02/2008, 09h46
Herode

Oui

Alors avec le <tr>

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
 
<form id="commande" name="commande" method="POST" enctype="multipart/form-data" action="vcommande.php">
<table align="center" border="0">
<tr>
      <td width="150" class="form">Fournisseur:</td>
      <td><!-- Jai simplifié, normalement la liste va chercher les fournisseurs dans la base de données -->
      <select name="idFournisseur" align="center" onChange="javascript:getRefs();"> 
	<option value= "0" selected>- - - - - - - -</option> 
	<option value= "1">Four1</option>
	<option value= "2">Four2</option>				
      </select>
      </td>
</tr>
<tr id="refs">
     <!--Cest ce tr qui sera actualisé par ajax pour afficher la liste des references en fonction du fournisseur	-->
     <td width="150" class="form">Ref produit:</td>
     <td>
          <select name="codeRef">
               <option value="0">- - - - - - - -</option>
          </select>
     </td>
</tr>
</table>
</form>

Et avec le <span> c'est la même chose:

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
 
<form id="commande" name="commande" method="POST" enctype="multipart/form-data" action="vcommande.php">
<table align="center" border="0">
<tr>
      <td width="150" class="form">Fournisseur:</td>
      <td><!-- Jai simplifié, normalement la liste va chercher les fournisseurs dans la base de données -->
      <select name="idFournisseur" align="center" onChange="javascript:getRefs();"> 
	<option value= "0" selected>- - - - - - - -</option> 
	<option value= "1">Four1</option>
	<option value= "2">Four2</option>				
      </select>
      </td>
</tr>
<span id="refs">
     <!--Cest ce span qui sera actualisé par ajax pour afficher la liste des references en fonction du fournisseur	-->
     <tr>
          <td width="150" class="form">Ref produit:</td>
          <td>
               <select name="codeRef">
                    <option value="0">- - - - - - - -</option>
               </select>
          </td>
     </tr>
</span>
</table>
</form>

Et la page qui actualise tout ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$four = isset($_GET['four']) ? $_GET['four'] : false;
 
if($four != false)
{	?>
<td width="150" class="form">Ref produit:</td>
<td>	
     <select name="codeRef" id="codeRef" align="center" onChange="javascript:getLibArticle();">
     <? 
     $req = "ma requete";
     $req2 = mysql_query($req)or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
 
     while($donnees = mysql_fetch_array($req2))	// On parcours toutes les ref 
     {
          echo '<option value='.$donnees['codeRef'].'>'.$donnees['codeRef'].'</option>';
     }
?>
     </select>
</td>
<?  }

29/02/2008, 10h34
Herode

Dans le deuxième cas, le <span> n'est pas autorisé ici, c'est pourquoi les navigateurs ne fournissent pas le rendu auquel tu t'attends.
Dans le cas du <tr>, une erreur dans le code HTML mais ça vient peut-être du copier-coller ?

Code:

<option value= "0" selected>- - - - - - - -</option><?

<select> n'a pas d'attribut "align" non plus, je crois.
A part ces deux détails, le code HTML a l'air bon sur cet extrait. L'erreur sous IE vient sans doute du "<?" en trop s'il y est vraiment, sinon il faut examiner le code javascript de mise à jour dans le traitement AJAX.
29/02/2008, 10h52
me-to-you93

Oui effectivement c'est à cause du copier-coller, car normalement j'ai une requete SQL pour afficher la liste déroulante, la j'avais mis des exemples basiques pour simplifier (je modifie ça dans mon copier-coller) mais ce n'est donc malheureusement pas de là que vient le problême. :(

Sinon tu devais avoir raison pour le align="center" sur le <select> puisque ça n'a rien changé, mais avec le span j'ai toujours le problême de la position.

Le code JS est plus haut, je ne vois pas ce que je pourrais changer surtout que je ne maitrise pas vraiment AJAX.

Pourquoi le span n'est-il pas autorisé ici ?
29/02/2008, 11h58
Herode

Citation:

Envoyé par me-to-you93

Pourquoi le span n'est-il pas autorisé ici ?

Heu... par définition de l'élément <table> Mais je ne vais pas te faire un cours HTML ici, voir plutôt les références sur ce thème. ;)

Citation:

Envoyé par me-to-you93

Le code JS est plus haut, je ne vois pas ce que je pourrais changer surtout que je ne maitrise pas vraiment AJAX.

Haaaaaaaa, tu parles de ça :

Code:

document.getElementById('refs').innerHTML = requete.responseText;

innerHTML n'est pas un élément standard. Personnellement, je ne l'utilise pratiquement jamais et surtout pas pour remplir des tables, le comportement est beaucoup trop aléatoire. Pour remplir un noeud texte simple, à la rigueur, et encore... Je préfère utiliser responseXML au niveau ajax + les manipulations DOM. Si tu veux vraiment utiliser innerHTML, je ne peux pas t'aider beaucoup sur ce coup là, désolé... Peut-être auras-tu moins de problèmes en faisant innerHTML juste sur le contenu du <select> plutôt que sur le <tr> lui-même, mais dans tous les cas, puisque ce n'est pas standard, le résultat n'est pas garanti : ni sur tous les navigateurs, ni dans la durée.
29/02/2008, 13h00
me-to-you93

Ah ben nan moi je veux bien utiliser autre chose ! lol. :D

Mais y'a quoi d'autre comme balises JS pour remplacer le innerHTML ? :?
01/03/2008, 18h02
dasdeb

Pas d'accord.
Le innerHTML fonctionne justement très bien dans tous les navigateurs.
L'autre solution est de saucissonner ce que tu veux insérer pour reconstruire l'arbre DOM. C'est lourd, très lourd pour le poste sur lequel ça s'effectue, surtout s'il s'agit d'un ordi pas tout jeune.
03/03/2008, 09h09
me-to-you93

Merci mais j'ai finalement réussi à obtenir ce que je voulais avec le innerHTML en mettant l'id sur le <td> et non plus sur le <tr>. Tout bête mais simple et efficace !

Merci pour vos réponses à tous :yaisse2: