Version imprimable
Bonjour à tous,
Voilà j'ai une page php avec un menu deroulant à partir d'une requete mysql et à cote un bouton-lien qui renvoie sur une nouvelle page php pour mettre à jour cette base si l'option n'est pas présente dans le menu deroulant. Une fois le rajout effectué, j'aimerais mettre à jour mon menu deroulant sans recharger ma page initiale.
Est-ce possible?
Merci d'avance.
Pas en PHP : une exécution en PHP est toujours sur le serveur, donc il faut un rechargement.
Ajax peut sans doute faire ce que tu recherches.
Je sais j'ai dejà un fonction ajax mais elle fonctionne pas pour ce menu deroulant voila mon code :
Ca c ma page principale. et voila le code de ma page requete_oam.phpCode:
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
mais ca marche pas pour le menu deroulant. la fonction fonctionne pour d'autre element donc c vient pas de ma fonction mais putot de ma page requete_oam.php je penseCode:
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
51
52
53
54
55
56
57
Merci d'avance
J'ai pas regardé ton code parce que j'ai la fleme grave surtout un lundi. Je peux te dire que ça fonctionne. Tu as deux moyen.
1 : tu fabrique de toute piece ton menu select coté client et le menu select actuel est placé dans un div. AJAX va appelé le fichier php qui va générer le code html du select et va afficher le contenu dans le div contenant l'ancien select.
2 : Soit tu alimentes le select en construisant les fonctionns javascript coté client. En faite c'est php qui genere cette fonction. Je t'avous que je me rappelle plus trop comment ajouter un élément d'un select mais c'est facile à trouver.
Edit apres avoir eu le courage de lire une partie de ton code :aie: tu as pris la premiere solution. Je crois que ton eval ne va pas fonctionner. fait ceci
//mondiv c'est le div contenant l'ancien <select>.
document.getElementById(mondiv).innerHTML = xhr.responseText;
J'ai essaye ton truc mais ca ne marche pas j'ai surement une erreur dans mon code voilà une partie de mon script:
et voila le code de ma requete_oam.phpCode:
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
Code:
2
3
4
5
6
7
8
9
10
11
12
Merci encore
Dans l'idée c'est ça .
- As-tu executé le fichier requete_oam.php seul pour voir s'il y avait pas une erreur coté php ?
- As-tu testé qu'il rentrait bien dans
- As-tu testé que le div reçoit bien le contenu ?Code:if(xhr.readyState == 4 && xhr.status == 200){
- As-tu fais le test sous FireFox et regardé dans le debuger de ce dernier ?
- As-tu executé le fichier requete_oam.php seul pour voir s'il y avait
pas une erreur coté php ?
--> oui et il me donne bien la liste des mes oam
------------------------------------------------------------------------
- As-tu testé qu'il rentrait bien dans
if(xhr.readyState == 4 && xhr.status == 200)
--> je sais pas faire cà
------------------------------------------------------------------------
- As-tu testé que le div reçoit bien le contenu
--> oui. par contre, il m'affiche un autre select dans lequel je peux pas cliquer. A mon avis mon go() ne devrais pas etre dans mon div. Enfin je crois.
------------------------------------------------------------------------
- As-tu fais le test sous FireFox et regardé dans le debuger de ce
dernier
--> oui. aucun bug sous firefox
J'ai modifié deux trois trucs et ca marche presque. par contre le select ne veut pas garder l'element selectionner et s'efface de suite.
Voilà le code modifier :
Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26function go(){ 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){ // On se sert de innerHTML pour rajouter les options a la liste document.getElementById('divoam').innerHTML = xhr.responseText; } } // Ici on va voir comment faire du post xhr.open("GET","requete_oam.php",true); xhr.send(null); } ................ <div id='divoam' onClick='go()'> <select name='oam' style="width:240" > </select> </div>
Quel est le scénario ?
- Tu sélectionnes un élément de ton <select> et le contenu de ce même <select> change ?
Tu stocke la valeur sélectionné dans une variable et lorsque l'ajax fait son travail tu affecte la cette variable à la "value" du select.Attention tu n'as pas placé d'id dans ton menu ;) .Code:document.getElementById('oam').value = varTemp;
- Si ça provient d'autre <select> tu prend ça valeur et tu l'affecte à oam apres qu'Ajax ait fait son boulot.
Code:document.getElementById('autreselect').value = document.getElementById('oam').value;
Et bien en faite, quand je cliques sur mon select et que je lache, le mecu disparait. Par contre, quand je maintiens le click, j'ai bien mon menu avec les modif mais je ne peux rien selectionner. Ca s'efface aussitot et le select redevient vierge.
Pourquoi?
tu n'as pas un autre evenement de type onmouseup ? qui fonction en générique ?
Ca marche pas mieux avec onMouseUp et ca marche plus du tout si je mets onChange.
Tout s'efface aussitot. Bizarre
J'y comprends rien
C'est bizarre car j'ai l'impression que ton div est a nouveau affecté mais à quelque chose de vide. Peut être que c'est la page php qui genere le select qui se recharge à vide mais fais un test de ton div apres toute opération AJAX
alert(document.getElementById(ton div).innerHTML)
ou
Le style='display:inline' qui se trouve dans le div qui ma fois ne sert pas là.
haa surement trouvé! tu as le même nom d'id pour <div> et ton <select>
voila le message apres avoir fait ce que tu as dit :
Code:
2
3
4
+1Citation:
Envoyé par berceker united
Non je l'ai modifié ca dejà desole.....
je vous redonne l'ensemble mais je pense pas que ca change grand chose regardez....
et la pas requete_oam.phpCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Code:
2
3
4
5
6
7
8
9
10
11
12
13
"C'est bizarre car j'ai l'impression que ton div est a nouveau affecté mais à quelque chose de vide. Peut être que c'est la page php qui genere le select qui se recharge à vide mais fais un test de ton div apres toute opération AJAX
alert(document.getElementById(ton div).innerHTML)
ou
Le style='display:inline' qui se trouve dans le div qui ma fois ne sert pas là."
fonction modifiée :
et voilà le resultat sur le pop upCode:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
En fait il reprends les infos de la page principale et pas celle de ma requete.Code:
2
3
4
Par contre ce qui est bizarre ce que lorsque je modifie mon code comme cà :
Voila la reponse :Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18function recharge(page,val){ 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){ // On se sert de innerHTML pour rajouter les options a la liste alert(xhr.responseText); //document.getElementById('div'+val).innerHTML = xhr.responseText; } } // Ici on va voir comment faire du Get xhr.open("GET",page,true); xhr.send(null); }
Bref toutes les valeurs de ma requete et donc le resultat attendu mais il n'est pas affecté à document.getElementById('div'+val).innerHTML....Code:
2
3
4
5
6
7
Je comprends pas
Je t'avouerais que je ne comprend, là j'étais en train de faire un peut d'AJAX pour controler mes champs mais je fais un peut pret la même chose que toi et capte pas pourquoi. Au lieu de le placer dans le dive tu fais
ton div est egal à divoam ?Code:eval(xhr.responseText);
Excuse moi mais j'ai pas compris ce que tu me demandes faire là avec le :
Desole, je debute.Code:
2
l'id de mon div est bien : divoam.