Discussion :

[stephw57]

Bonjour,

Je débute en Ajax et je suis confronté à un problème ou plutôt une question...

J'ai un formulaire sur mon site avec un liste déroulante donc l'événement onchange appele une fonction ajax. Cette fonction ajax appele en POST une page PHP qui selon la première liste déroulante ajoute d'autre liste déroulante dont le contenu est filtré toujours dans ce php appelé.

Tout fonctionne très bien par contre pour valider mon formulaire j'ai un input de type submit et je pensais utiliser simplement le PHP pour mettre à jour ma BDD mais le problème c'est que les listes déroulantes ajouté par la page PHP appelé par la fonction Ajax n'existe pas dans le code source de départ donc je recois des erreur de variable inexistante ce que je comprend.

Ma question est : comment faire pour mettre à jour ma base de donnée ? Je ne peux pas rappeler une fonction ajax puisque le getElementById appeleront des Id qui n'existe pas à l'origine....

Si quelqu'un peu m'éclairer cela serait aimable.

[utopman]

Bonjour steph,

Il est tout a fait possible de faire ce que tu envisages de faire.
L'idée lorsque l'on modifie le DOM dynamiquement c'est qu'il garde une certaine logique.
Actuellement, tu peux récupérer les données de ton premier formulaire en ajax, mais a la fin, tu finis pas soumettre une requette HTTP POST en cliquant sur le bouton send si j'ai bien compris.
le mécanisme du navigateur est d'inclure dans la requete les variables qui se trouvent dans la balise form a laquelle appartient le bouton de soumission.
Donc, si tu fais apparaitre une liste dans le formulaire qui est censé être soumis normalement, tu pourras récupérer les valeurs lors de la soumission comme d'habitude en récupérant les données de la requête HTTP.
J'avoue ne pas avoir testé ce cas la , mais je suis plutôt sur de moi

[stephw57]

Merci pour ta réponse. Mais je dois te contredire ou préciser peut-être ca depend comment tu as percus mon problème.

En fait je choisi un entré dans une listbox qui déclanche une action javascript Ajax qui va se charge de faire une requete sql (via un fichier externe PHP). Cette requete va donner un resultat que je recupere avec responseText et qui contient le code necessaire à l'affichage d'autres liste déroulante qui n'existe pas dans le fichier PHP de base contenant les fondements de mon formulaire. Ma requete Ajax va me remplir, en fait, un ligne de tableau <tr id="truc"> avec un <select> et des <option>.

Ajax rempli de façon "virtuelle" si on peu dire ce formulaire car si j'affiche mon code source jamais je ne vois apparaitre les champs généré par Ajax (normal car la page PHP n'est pas rafraichie donc contient toujours mon code initial qui ne contient pas les liste "optionnelle".

Je ne sais pas si je suis clair mais j'ai trouvé la solution entre temps.

Pour ceux que cela interesse je vais tenter d'illustrer :

Ma page1.php contient un tableau avec a un moment donnée

Code :

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

1
2
<select id="machin" onchange="ajax()"><option>...</option></select>
<tr id="truc"></tr>

Ma fonction ajax() appel comme il se doit ma page2

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
function ajax(){
 
get_Xhr();
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		if (xhr.responseText != ''){
			document.getElementById('truc').innerHTML = xhr.responseText;
		}
	}
}
	xhr.open('POST','page2.php',true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	var machin = document.getElementById('machin').value;
	xhr.send("machin="+machin);
}

Ma page2.php contient la requete sql qui dit

Code :

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

1
2
3
SELECT * FROM table WHERE ID="machin"
// Tout le code pour traiter la requête
echo '<td><select name="newlistbox"><option value="1">blabla</option> etc... </select></td>' //reponse à ma fonction ajax

Ma fonction ajax() termine en modifiant mon fichier page1.php initial "temporairement"

Code :

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

document.getElementById('truc').innerHTML = xhr.responseText;

ce qui fera que virtuellement mon code initial sera transformé pour devenir :

Code :

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

<tr id="truc"><td><select name="newlistbox"><option value="1">blabla</option> etc... </select></td></tr>

Qui va provoqué l'affichage de ma listbox

Mais la listbox "newlistbox" n'existe pas à la base et donc quand je fais mon submit il ne la connait pas.

Il suffit donc de creer des input de type hidden dans page1.php

Code :

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

1
2
<input type="hidden" name="machin_hid" /> //Qui va conserver mon choix de la listbox initiale
<input type="hidden" name="bidule_hid" />

et dans page2.php modifier ma balise select en ajoutant un evenement

Code :

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

<select name="newlistbox" onchange="javascript:getElementById('mon hidden').value = this.value"><option value="1">blabla</option> etc... </select>

sans oublier de modifier ma fonction ajax() en conséquence pour alimenter pour stocker le choix de ma premiere liste déroulante originale

Code :

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

1
2
3
4
...
var machin = document.getElementById('machin').value;
document.getElementById('machin_hid').value = type;
xhr.send("machin="+machin);

Une fois les champs <input> de type hidden présent à l'origine sur page1.php alimenté ils seront donc accessible via $_POST['xxx_hid']...

j'espère avoir été clair sinon n'hésitez pas à demander

Bonjour steph,

Il est tout a fait possible de faire ce que tu envisages de faire.
L'idée lorsque l'on modifie le DOM dynamiquement c'est qu'il garde une certaine logique.
Actuellement, tu peux récupérer les données de ton premier formulaire en ajax, mais a la fin, tu finis pas soumettre une requette HTTP POST en cliquant sur le bouton send si j'ai bien compris.
le mécanisme du navigateur est d'inclure dans la requete les variables qui se trouvent dans la balise form a laquelle appartient le bouton de soumission.
Donc, si tu fais apparaitre une liste dans le formulaire qui est censé être soumis normalement, tu pourras récupérer les valeurs lors de la soumission comme d'habitude en récupérant les données de la requête HTTP.
J'avoue ne pas avoir testé ce cas la , mais je suis plutôt sur de moi