Discussion :

[ns_deux]

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.

[Eusebius]

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.

[ns_deux]

Je sais j'ai dejà un fonction ajax mais elle fonctionne pas pour ce menu deroulant voila mon code :

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
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
 
<script type="text/javascript">
function getElement(id) 
{
	var Elem;
 
	if(document.getElementById) 
	{
		if (typeof document.getElementById(id) == "object") 
			Elem = document.getElementById(id);
				else 
					Elem = void(0);
	} 
	else if(document.all) 
	{
		if (typeof document.all[id] == "object") 
			Elem = document.all[id];
				else 
					Elem = void(0);
	} 
	else if(document.layers) 
	{
		if (typeof document[id] == "object") 
			Elem = document[id];
				else 
					Elem = void(0);
	}
	else Elem = void(0);
 
	return Elem;
}
 
 
var xhr = null;
 
function getXhr()
{
	if (window.XMLHttpRequest) 
	{
		xhr = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)  // if IE
	{ 
		var ieversions = ['Msxml2.XMLHTTP',
						  'Microsoft.XMLHTTP',
						  'Msxml2.XMLHTTP.5.0',
						  'Msxml2.XMLHTTP.4.0',
						  'Msxml2.XMLHTTP.3.0'
						 ]; 
 
		for(var i=0; !xhr && i<ieversions.length; i++) 
		{ 
			try
			{
				xhr = new ActiveXObject(ieversions[i]);
			} 
			catch(e) 
			{ 
				xhr = null;
			}
		}
	}
 
	if(!xhr)// XMLHttpRequest non supporté par le navigateur
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
}
 
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function requete(page,select,form,target,target1,target2,target3,target4)
{
	getXhr();
 
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4)
		{		
		if(xhr.status == 200 || xhr.status == 304)
			eval(xhr.responseText);
		}
	};
 
	xhr.open("POST",page,true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send("form="+escape(form)+"&type="+escape(select.id)+"&id="+escape(select.value)+"&target="+escape(target)+"&target1="+escape(target1)+"&target2="+escape(target2)+"&target3="+escape(target3)+"&target4="+escape(target4));
}
</script>
 
.........
 
 
<select name="oam" id="oam" onClick="javascript:requete('requete_oam.php',this,'formulaire');"  />
        <?php
        $oam=$_GET["oam"];
        echo '<option value="'.$oam.'">'.$oam.'</option>';
        while ($row1= mysql_fetch_array($result1, MYSQL_ASSOC)) 
        {$var1= $row1["oam"];
        echo '<option value="'.$var1.'">'.$var1.'</option>';
        }
        ?>
	</select>

Ca c ma page principale. et voila le code de ma page requete_oam.php

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
 
<?php
 
 
if(!empty($_POST) || !empty($_GET))
{
	if(isset($_POST['type']))
		$type = strip_tags($_POST['type']);
			elseif(isset($_GET['type']))
				$type = strip_tags($_GET['type']);
					else
						$type = '';
 
	if(isset($_POST['id']))
		$id = strip_tags($_POST['id']);
			elseif(isset($_GET['id']))
				$id = strip_tags($_GET['id']);
					else
						$id = '';
 
	if(isset($_POST['form']))
		$form = strip_tags($_POST['form']);
			elseif(isset($_GET['form']))
				$form = strip_tags($_GET['form']);
					else
						$form = '';
 
 
 
 
 
	require("connect_atelier.php");
 
 
	if($type == 'oam')
	{
		if($id != '')
		{
			$req = 'SELECT oam FROM oam WHERE oam="'.$id.'"';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );  
			echo "<select name='oam' id='oam'>";
		        echo '<option value=""></option>';
       			while ($row= mysql_fetch_array($res, MYSQL_ASSOC)) 
       			{$var1= $row["oam"];
       			echo '<option value="'.$var1.'">'.$var1.'</option>';  
       			echo "</select>";
       			}
 
 
		}
 
 
 
	}
}
?>

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 pense
Merci d'avance

[berceker united]

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

[ns_deux]

J'ai essaye ton truc mais ca ne marche pas j'ai surement une erreur dans mon code voilà une partie de mon script:

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
 
	function 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('oam').innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("GET","requete_oam.php",true);
				xhr.send(null);
			}
 
................
 
voilà mon select : 
 
 
<div id='oam' style='display:inline' onclick='go()'>
      <select name='oam' id='oam' style="width:240" >
        <option value=''></option>
      </select>
      </div>

et voila le code de ma requete_oam.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
        echo "<select name='oam' id='oam' style='width:240'>";
        echo "<option value=''></option>";
        require("connect_atelier.php");
        $req = 'SELECT DISTINCT oam FROM oam ';   
        $res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
        while($row = mysql_fetch_assoc($res)){
                echo "<option value='".$row["oam"]."'>".$row["oam"]."</option>";
                }
        echo "</select>";  
?>

Merci encore

[berceker united]

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

Code :

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

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

- As-tu testé que le div reçoit bien le contenu ?

- As-tu fais le test sous FireFox et regardé dans le debuger de ce dernier ?

[ns_deux]

- 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

[ns_deux]

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 :

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

[berceker united]

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.

Code :

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

document.getElementById('oam').value = varTemp;

Attention tu n'as pas placé d'id dans ton menu .

- Si ça provient d'autre <select> tu prend ça valeur et tu l'affecte à oam apres qu'Ajax ait fait son boulot.

Code :

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

document.getElementById('autreselect').value = document.getElementById('oam').value;

[ns_deux]

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?

[berceker united]

tu n'as pas un autre evenement de type onmouseup ? qui fonction en générique ?

[ns_deux]

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

[berceker united]

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>

[ns_deux]

voila le message apres avoir fait ce que tu as dit :

Code :

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

1
2
3
4
 
<select name='oam' id='oam' style='width:240;'>
<option value=''></option>
</select>

[FremyCompany]

haa surement trouvé! tu as le même nom d'id pour <div> et ton <select>

+1

[ns_deux]

Non je l'ai modifié ca dejà desole.....
je vous redonne l'ensemble mais je pense pas que ca change grand chose regardez....

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
 
function 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
					document.getElementById('div'+val).innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du Get
				xhr.open("GET",page,true);
				xhr.send(null);
}
 
..............................................
 
<div id='divoam' onClick='recharge("requete_oam.php","oam")'>
      <select name='oam' id='oam' style="width:240" >     
      <option value=''></option>
      </select>
      </div>

et la pas requete_oam.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<?php
        echo "<select name='oam' id='oam' style='width:240'>";
        echo "<option value=''></option>";
        require("connect_atelier.php");
        $req = 'SELECT DISTINCT oam FROM oam ';   
        $res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
        while($row = mysql_fetch_assoc($res)){
                echo "<option value='".$row["oam"]."'>".$row["oam"]."</option>";
                }
        echo "</select>";  
?>

[ns_deux]

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

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
 
function 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(document.getElementById('div'+val).innerHTML);
						//document.getElementById('div'+val).innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du Get
				xhr.open("GET",page,true);
				xhr.send(null);
}

et voilà le resultat sur le pop up

Code :

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

1
2
3
4
 
<select name="oam" id="oam" style="width:240;" >     
      <option value=""></option>
      </select>

En fait il reprends les infos de la page principale et pas celle de ma requete.

[ns_deux]

Par contre ce qui est bizarre ce que lorsque je modifie mon code comme cà :

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
function 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);
}

Voila la reponse :

Code :

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

1
2
3
4
5
6
7
 
<select name="oam" id="oam" style="width:240;" >     
      <option value=""></option>
 <option value="valeur1">valuer1</option>
 <option value="valeur2">valeur2</option>
 <option value="valeur3">valeur3</option>
      </select>

Bref toutes les valeurs de ma requete et donc le resultat attendu mais il n'est pas affecté à document.getElementById('div'+val).innerHTML....
Je comprends pas

[berceker united]

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

Code :

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

eval(xhr.responseText);

ton div est egal à divoam ?

[ns_deux]

Excuse moi mais j'ai pas compris ce que tu me demandes faire là avec le :

Code :

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

1
2
 
eval(xhr.responseText);

Desole, je debute.
l'id de mon div est bien : divoam.