Discussion :

[me-to-you93]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(isset($_POST['codeRef']))
{
}

Comment je peux faire ? si vous voulez une autre partie du code demandez le moi.

Merci

[tavarlindar]

Bonjour,

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

Pourrais-tu nous mettre faire part de ton code ?

[me-to-you93]

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 .

Alors voici le code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
<?  }

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[Herode]

Ha oui, autant pour moi, j'avais lu trop vite...
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.

[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 !

[Herode]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.

[Herode]

Sans doute. Quel est le code HTML correspondant aux différents cas ?

[me-to-you93]

Comment ça aux différents cas ? tu veux dire avec le <tr> et avec le <span> ?

[Herode]

Oui

[me-to-you93]

Alors avec le <tr>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
<?  }

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

[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 ?

[Herode]

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.

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[me-to-you93]

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

Mais y'a quoi d'autre comme balises JS pour remplacer le innerHTML ?

[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.

[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