[AJAX] Utilisation Ajax

Version imprimable

18/05/2006, 14h11
nicoweb371

[AJAX] Utilisation Ajax

Bonjour,

J'ai suivi le tutorial suivant :

http://siddh.developpez.com/articles/ajax/

Impeccable, j'ai pu l'adapter pour une de mes applications.
Petit souci, je souhaite faire la même chose, mais avec 3 listes déroulantes (choix de la 1ère => incremente la deuxième => choix de la deuxième => incrémente la 3ème).
Comment faire ?
Car pour le moment, je cale !
Si vous voulez mon code dite le moi

Merci

Salut nico ,

J'ai eu le même besoin que toi il y a quelques semaines ...

Si tu as pris le tuto de siddh ça risque d'aller vite ;)

Alors d 'abord il faut que tu rendes la fonction go generique , en lui passant 3 parametres : la source , l'adresse de la page web , et l'id pour le resultat
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function go( src , page , result ) { page = page + ".php"; // ou ".asp" ça depend du langage of course .... document.getElementById(result).innerHTML = leselect; ... xhr.open("POST",page,true); ... sel = document.getElementById(src); ... xhr.send("Query="+scherche);
ensuite dans ton code il faut appeler la fonction go proprement donc dans ton onchange ou onclick de ton select passe les bons arguements ex :

Code:

onchange='go("leselect" , "la-page-ou-je-vais-faire-la-requete","le div ou je veux le resultat")

voila Mr a priori ça rox ;) keep me in touch dude...

Citation:
Envoyé par NeHuS
Salut nico ,

J'ai eu le même besoin que toi il y a quelques semaines ...

Si tu as pris le tuto de siddh ça risque d'aller vite ;)

Alors d 'abord il faut que tu rendes la fonction go generique , en lui passant 3 parametres : la source , l'adresse de la page web , et l'id pour le resultat
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function go( src , page , result ) { page = page + ".php"; // ou ".asp" ça depend du langage of course .... document.getElementById(result).innerHTML = leselect; ... xhr.open("POST",page,true); ... sel = document.getElementById(src); ... xhr.send("Query="+scherche);
ensuite dans ton code il faut appeler la fonction go proprement donc dans ton onchange ou onclick de ton select passe les bons arguements ex :

Code:

onchange='go("leselect" , "la-page-ou-je-vais-faire-la-requete","le div ou je veux le resultat")

voila Mr a priori ça rox ;) keep me in touch dude...
Pas tout saisie, tu peux m'en dire plus stp ?
Merci !

Aller je vais prendre un exemple concret pour que tu saisisses ;)

exemple en asp ( mais en php c 'est kif kif bourricot comme dirait je sais plus qui )

Code:

1
2
3
4
5
6
7
 
 
<select id="firstSelect" onchange='go("firstSelect","firstPageHttpRequest","firstDiv")' >
            <%
                 Call FillFirstSelect() // procedure qui rempli le select d'option 
            %>
            </select>

la procedure que voila :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
sub FillFirstSelect()
 
'connexion a la db etc...
if not rs.eof then 
            Response.Write("<option value='-1'> Please select </option>")
            do while not rs.eof 
        Response.Write("<option value= '" & rs(0) & "'>" & rs(0) & "</option>")
                rs.movenext                                                             
            Loop
        end if
        rs.close
end sub

la page firstPageHttpRequest.asp // ou php peu importe uniquement la methode pour recuperer la valeur du post et la connexion a la db changeront

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
req = request.form("Query")
if (req <> "" )  then
 
'requete sql
WHERE machin='" & req &  "'"
....
'generation des options du second select
if not rs.eof then 
response.write "<div id="firstDiv">
response.write "<select name='secondselect' id='secondselect' onchange='go(""secondselect"",""secondPageHttpRequest"",""secondDiv"")' >'"
 
do while not rs.eof 
            Response.Write("<option value= '" & rs(0) & "'>" & rs(1) & "</option>")
rs.movenext                                                             
        Loop
    end if
...
response.write "</select></div>
....

la page secondPageHttpRequest.asp ... est la meme que la premiere ...

En esperant avoir etait plus concret ;)

19/05/2006, 08h16
nicoweb371

Salut,

Merci pour cette réponse.
Cependant, j'ai toujours un problème pour incrémenter ma 3ème liste à partir de la deuxième. Lorque je fais un choix sur ma deuxième liste, il ne se passe rien, comme si il ne rentrait pas dans la fonction go.
J'y comprend rien !

J'ai pourtant mis la fonction go en générique avec 3 paramètres.
Aucun pb de la 1ère à la deuxième.

D'ou peut venir mon erreur ?

Merci
19/05/2006, 09h11
nicoweb371

C'est bon j'ai réussi !!
Merci beaucoup !
05/06/2006, 19h41
ns_deux

Probleme Ajax - php

"Salut,

Merci pour cette réponse.
Cependant, j'ai toujours un problème pour incrémenter ma 3ème liste à partir de la deuxième. Lorque je fais un choix sur ma deuxième liste, il ne se passe rien, comme si il ne rentrait pas dans la fonction go.
J'y comprend rien !

J'ai pourtant mis la fonction go en générique avec 3 paramètres.
Aucun pb de la 1ère à la deuxième.

D'ou peut venir mon erreur ?

Merci"

"C'est bon j'ai réussi !!
Merci beaucoup !"

Salut, J'ai exactement le meme probleme que toi en php et je n'ai toujours pas resolu le probleme. J'ai egalement la premiere fonction qui fonctionne mais la deuxieme ne marche pas. J'aimerais egalement en faire plusieurs sur la meme page c possible?
Comment as tu fait puisque tu as trouve la reponse apparement?
Merci d'avance
06/06/2006, 00h35
NeHuS

peu importe le language du coté serveur , montre nous ton code qui envoie et ceui qui reçoit et traite la reponse
06/06/2006, 06h53
ns_deux

Probleme Ajax

voilà une partie de mon code:
-----------------------------page principale----------------------------------
<script type='text/javascript'>
var xhr = null;

function getXhr(){
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
}

/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(valeur,page,resultat){
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){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById(resultat).innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST",page,true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de la valeur
sel = document.getElementById(valeur);
idvaleur= sel.options[sel.selectedIndex].value;
xhr.send("id"+valeur+"="+idvaleur);
}

</script>

<form method="post" name="formulaire" action="base_enreg_saisie_materiel.php">
<table width="100%" border="0">
<tr>
<td width="29%"><div align="right"><strong>Nom du matériel :</strong></div></td>
<td width="25%"><strong><strong>
<select name='materiel' id='materiel' onChange="go('materiel','requete_modele.php','modele')">
<?php
$materiel=$_GET["materiel"];
echo '<option value="'.$materiel.'">'.$materiel.'</option>';
while ($row= mysql_fetch_array($result, MYSQL_ASSOC))
{$var= $row["materiel"];
echo '<option value="'.$var.'">'.$var.'</option>';
}
?>
</select>
</strong></strong></td>
<td width="6%"> </td>
<td width="40%"></td>
</tr>
<tr>
<td><div align="right"><strong>Type de matériel : </strong></div></td>
<td><strong>
<div id='modele' style='display:inline'>
<select name='modele' id='modele' onChange="go('modele','requete_processeur.php','processeur')"> <------là ca marche plus.
<option value='-1'></option>
</select>

-----------------------------requete_modele.php qui marche nickel---------
<?php
echo "<select name='modele'>";
if(isset($_POST["idmateriel"])){
require("connect_atelier.php");
$req = 'SELECT DISTINCT modele FROM fiche_type WHERE materiel="'.$_POST["idmateriel"].'" ';
$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["modele"]."'>".$row["modele"]."</option>";
}
}
echo "</select>";

------------------------------------requete_processeur.php qui merde------
<?php

if(isset($_POST["idmodele"])){
require("connect_atelier.php");
$req = 'SELECT processeur FROM fiche_type WHERE modele="'.$_POST["idmodele"].'"';
$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
$row = mysql_fetch_assoc($res);
$resultat=$row["processeur"];
}

echo '<input type="text" name="processeur" id="processeur" readonly value="'.$resultat.'" />';
?>
--------------------------------------------------------------------------

Voilà au chargemement du premier go() pas de soucis par contre il ne modifie pas la frequence processeur associé au modele quand se dernier est selectionné
Merci d'avance
06/06/2006, 14h28
NeHuS

yop dans requete_model.php
il faut que tu rajoutes des tag a ta balise select au lieu de

Code:

echo "<select name='modele'>";

essaye :

Code:

echo "<select name='modele' id='modele' onchange='go(....)>";

keep me in touch
06/06/2006, 14h43
kankrelune

leselect n'est définnit nul part dans ton code... .. .

Quand tu as des erreurs avec javascript le premier reflexe doit être de regarder la console de debbugage (sous Mozilla ou Firefox) pour voir d'où peuvent venir les erreurs... .. . ;)

@ tchaOo°
07/06/2006, 07h05
ns_deux

Ajax

leselect est declaré dans ma fonction :
function go(valeur,page,resultat){
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){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById(resultat).innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST",page,true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de la valeur
sel = document.getElementById(valeur);
idvaleur= sel.options[sel.selectedIndex].value;
xhr.send("id"+valeur+"="+idvaleur);
}

J'ai pas d'erreur dans le debuggage firefox
En fait le premier menu deroulant se passe nickel puisque c'est une requete simple mysql.
Le deuxieme menu fonctionne aussi tres bien avec la fonction ajax et me donne bien les modeles relatif a mon materiel.
Par contre, au changement du modele avec onchange, je n'ai pas les caracteristiques de mon modele par exemple la frequence de mon processeur.

C'est comme si il ne voulait pas reccupere mon div de mon deuxieme menu deroulant. J'ai essaye avec la method GET en passant en parametre un modele et j'ai bien mon resultat de ma page requete_processeur.php par contre je n'arrive pas à le recupperer dans ma page principale base_saisie_materiel.php.
voilà mon div de recuperation que j'ai oublie de vous transmettre. Le pobleme vient peut etre de là.

<tr>
<td><div align="right"><strong>Type de processeur : </strong></div></td>
<td>
<div id='processeur' style='display:inline'>
<input type="text" name="processeur" id="processeur" readonly > </div>
</td>
<td> </td>
<td> </td>
</tr>
07/06/2006, 10h05
NeHuS

as tu essayé ce que je t ai dit ?
07/06/2006, 12h15
ns_deux

Ajax

Oui, desolé d'avoir oublié ce detail mais effectivement j'ai rajouté l'id dans le select de mon requete_modele.php mais pas mieux.
Merci

et comme ça... .. .

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
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
 
<script type="text/javascript">
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 go(valeur,page,resultat)
{
	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)
		{		
			if(xhr.status == 200 || xhr.status == 304)
				// On se sert de innerHTML pour rajouter les options a la liste
				document.getElementById(resultat).innerHTML = xhr.responseText;
		}
	};
 
	// Ici on va voir comment faire du post
	xhr.open("POST",page,true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments  ici, l'id de la valeur
	var select = document.getElementById(valeur);
	var idvaleur = select.options[select.selectedIndex].value;
	xhr.send("id"+valeur+"="+idvaleur);
}
</script>

@ tchaOo°

07/06/2006, 18h50
ns_deux

Ajax

Merci pour le code mais c'est encore pire car là ma premiere requete ne fonctionne meme plus. :(
Pour info j'utilise firefox.
Merci quand meme

Je pense que le problème vient du fait que tu as plusieurs tags avec le même id... .. .

cependant je trouve que tu te complique la vie autant au niveau du javascript (mettre à jour tout la div plutot que les otpion du select) que du php (une page par select t'as pas finit)... voici comment je ferais... .. .

le javascript...

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
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
<script type="text/javascript">
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 updateSelect(select,form,target)
{
    getXhr();
    
    xhr.onreadystatechange = function()
    {
        if(xhr.readyState == 4)
        {        
            if(xhr.status == 200 || xhr.status == 304)
                eval(xhr.responseText);
        }
    };
    
    xhr.open("POST","updateSelect.php",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));
}
</script>

le 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
25
26
27
28
29
30
31
32
33
34
35
36
37
<form method="post" id="formulaire" action="base_enreg_saisie_materiel.php">
  <table width="100%" border="0">
    <tr>
      <td width="29%"><div align="right"><strong>Nom du mat&eacute;riel :</strong></div></td>
      <td width="25%"><strong><strong>
        <select name="materiel" id="materiel" onChange="javascript:updateSelect(this,'formulaire','modele')">
            <?php

            $materiel = $_GET["materiel"];

            echo '<option value="'.$materiel.'">'.$materiel.'</option>';
                
            while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 

                echo '<option value="'.$row['materiel'].'">'.$row['materiel'].'</option>';

            ?>
        </select>
      </strong></strong></td>
      <td width="6%">&nbsp;</td>
      <td width="40%"></td>
    </tr>
    <tr>
      <td><div align="right"><strong>Type de mat&eacute;riel : </strong></div></td>
      <td><strong>
        <div style="display:inline">
          <select name="modele" id="modele" onChange="javascript:updateSelect(this,'formulaire','processeur')">
            <option value="">--------</option>
          </select>
        </div>
        </td>
    </tr>
    <tr>
      <td><div align="right"><strong>Processeur : </strong></div></td>
      <td><strong><input type="text" name="processeur" id="processeur" readonly value="" /></td>
    </tr>
</table>

et la page de traitement (je l'ais appelée updateSelect.php)...

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
34
35
36
37
38
39
40
41
42
43
44
<?php

if(!empty($_POST))
{
    $type = isset($_POST['type']) ? strip_tags($_POST['type']) : 'materiel';
    $id = isset($_POST['id']) ? strip_tags($_POST['id']) : '';
    
    require("connect_atelier.php");
    
    if($type == 'modele')
    {
        if(!empty($id))
        {
            $req = 'SELECT processeur FROM fiche_type WHERE modele=\''.$id.'\'';   
        
            $res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
            $row = mysql_fetch_assoc($res);
        
            echo 'document.getElementById("processeur").value = "'.$row["processeur"].'";';
        }
        else echo 'document.getElementById("processeur").value = "";';
    }
    elseif($type == 'materiel')
    {
        $form = isset($_POST['form']) ? strip_tags($_POST['form']) : 'formulaire';
        $target = isset($_POST['target']) ? strip_tags($_POST['target']) : 'materiel';
        
        echo 'var select = document.forms["'.$form.'"].elements["'.$target.'"];
        select.options.length = 0;
        document.getElementById("processeur").value = "";'; 
        
        if(!empty($id))
        {
            $req = 'SELECT DISTINCT modele FROM fiche_type WHERE materiel=\''.$id.'\' ';   
            $res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
            
            while($row = mysql_fetch_assoc($res)) 
                echo 'select.options[select.options.length] = new Option("'.$row["modele"].'");'; */
        }
    }
   // Autant de elseif que de traitement à faire (tu peux aussi faire un switch) 
}

?>

Voili voilou... .. .

@ tchaOo°

07/06/2006, 22h27
ns_deux

et tu trouves ca plus simple lol
pas pour moi lol
j'ai quand meme essaye ton truc mais ca marche pas mieux et comme tout a l'heure, ma premiere requete ne fonctionne meme plus avec ton systeme
Désole
merci quand meme pour tout tes efforts
08/06/2006, 10h27
NeHuS

kANKRELUNE >> il est obligé de passer par un div pour remplir les options du select , en effet IE et les innerhtml c'est pas le grand amour en ce qui concerne les select ....

sinon ns_trois :) ton premier fonctionne hummm cela veut dire que ta fonction go est ok , aloirs soit ton second select n'appelle pas cette fonction ( as tu fais des alert dans la fonction go pour voir si elle est bien appelé au onchange du select ) soit le resultat ne va pas dans la zone texte ( ton resultat processeur si je ne m'abuse...)

tiens moi au courant
08/06/2006, 12h57
ns_deux

Ajax

Tu as tous a fait raison par contre je debute en javascript et php et je ne sais pas faire de tels controles.
Comment puis-je faire? ;-)
Merci
08/06/2006, 14h03
NeHuS
c'est tres simple en ce qui concerne la fonction go :
Code:

1 2 3 4 5 6 function go( valeur , page , resultat ) { alert("Fonction go appelée >> \n - valeur : " + valeur + "\n - page appelée : " + page + "\n -Destination resulat : " + resultat ); }
voila tu mets ça dans ta fonction ( au début par exemple ) , pour le premier select tu vas avoir un alert donc avec les infos qui vont bien .

Si pour le second select il y a un probleme ( rien ne s'affiche ça veut dire que la fonction go dans le onchange n'est pas bien defini )

Si l'alert se passe bien c'est le resultat qui n'est pas bon et dans ce cas le innerhtml ou dans la page principale tu as ecrit ça ?
Code:

1 2 <input type="text" name="processeur" id="processeur" readonly value="'.$resultat.'" />'

Citation:

Envoyé par NeHuS

kANKRELUNE >> il est obligé de passer par un div pour remplir les options du select , en effet IE et les innerhtml c'est pas le grand amour en ce qui concerne les select ....

Non il n'est pas obligé de passer par une div... où est ce que tu as vu du innerHTML dans mon code... .. !

Le code que je donne marche parfaitement sous IE, MOzilla/Firefox et Opéra... seul petit bug avec IE c'est qu'il ne veut pas afficher le processeur dans le champs text une fois les deux select sélectionnées... mais c'est à cause de l'id qui ne se transmet pas... .. .

Le problème ne vient pas de mon code mais surement des requetes sql qui génèrent une erreure... .. .

Donc reprennons... .. .

Page testSelect.php (tu peux l'appeler comme tu veux... .. .

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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<html>
<head>
<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 updateSelect(select,form,target)
{
	getXhr();
 
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4)
		{		
			if(xhr.status == 200 || xhr.status == 304)
			{
				getElement("debug").innerHTML = xhr.responseText;
				eval(xhr.responseText);
			}
		}
	};
 
	xhr.open("POST","updateSelect.php",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));
}
</script>
</head>
<body>
<form method="post" id="formulaire" action="base_enreg_saisie_materiel.php">
  <table width="100%" border="0">
    <tr>
      <td width="29%"><div align="right"><strong>Nom du mat&eacute;riel :</strong></div></td>
      <td width="25%"><strong>
        <select name="materiel" id="materiel" onChange="javascript:updateSelect(this,'formulaire','modele');">
			<option value="">------</option>
			<option value="test">test</option>
			<option value="pwet">pwet</option>
			<option value="plop">plop</option>
			<?php
                        /*
                                $materiel = $_GET["materiel"];
                                echo '<option value="'.$materiel.'">'.$materiel.'</option>';
                                
                                while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
                                        echo '<option value="'.$row['materiel'].'">'.$row['materiel'].'</option>';
                                        */
                        ?>
        </select></strong>
		</td>
    </tr>
    <tr>
      <td><div align="right"><strong>Type de mat&eacute;riel : </strong></div></td>
      <td><strong>
        <div style="display:inline">
          <select name="modele" id="modele" onChange="javascript:updateSelect(this,'formulaire','processeur');">
            <option value="">------</option>
          </select>
		</div>
		</td>
	</tr>
	<tr>
      <td><div align="right"><strong>Processeur : </strong></div></td>
      <td><strong><input type="text" name="processeur" id="processeur" readonly value="" /></td>
	</tr>
	</form>
</table>
<br />
responseText :
<div id="debug"></div>
</body>
</html>

Page updateSelect.php

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
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
<?php
 
//echo '<pre>';
//print_r($_POST);
//echo '</pre>';
 
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 = '';
 
	if(isset($_POST['target']))
		$target = strip_tags($_POST['target']);
			elseif(isset($_GET['target']))
				$target = strip_tags($_GET['target']);
					else
						$target = '';
 
	//require("connect_atelier.php");
	$options = array(
					'test' => array('test 1','test 2','test 3'),
					'pwet' => array('pwet 1','pwet 2','pwet 3'),
					'plop' => array('plop 1','plop 2','plop 3')
					);
 
 
	if($type == 'modele')
	{
		if($id != '')
		{
			/*$req = 'SELECT processeur FROM fiche_type WHERE modele="'.$id.'"';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
			$row = mysql_fetch_assoc($res);
 
			echo 'getElement("'.$target.'").value = "'.$row["processeur"].'";';*/
 
			echo 'getElement("'.$target.'").value = "Intel '.$id.'";';
		}
		else echo 'getElement("'.$target.'").value = "";';
	}
	else
	{
		echo 'getElement("processeur").value = "";
		var select = document.forms["'.$form.'"].elements["'.$target.'"];
		select.options.length = 0;
		select.options[select.options.length] = new Option("------");'; 
 
		if($id != '')
		{
			/*$req = 'SELECT DISTINCT modele FROM fiche_type WHERE materiel=\''.$id.'\' ';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
 
			while($row = mysql_fetch_assoc($res)) 
				echo 'select.options[select.options.length] = new Option("'.$row["modele"].'");'; */
 
			foreach($options[$id] as $option)
				echo 'select.options[select.options.length] = new Option("'.$option.'");'; 
		}
	}
}
?>

Ca c'est le premier test... une fois que tu as constaté que ça marche tu décommante le code php dans la page html et vire les options test,pwet et plop... dans la page php tu décommente le code de requete et tu commente

Code:

echo 'getElement("'.$target.'").value = "Intel '.$id.'";';

Code:

1
2
3
 
foreach($options[$id] as $option)
	echo 'select.options[select.options.length] = new Option("'.$option.'");';

Si ça marche pas tu devrais avoir le code retourné par la page php qui apparait en bas de la page html... dis nous les erreurs qu'il y a... si y a pas d'erreur essaye de simuler la requete sur la page php en passant les paramètres via l'url je l'ais modifié pour qu'elle accept les $_GET[*]

@ tchaOo°

ps : et plutot que de dire que tu trouve ça plus compliqué... n'hésite pas à demander une explication sur ce que tu ne comprend pas... .. . ;)

08/06/2006, 18h28
ns_deux

Ajax

J'ai essaye ton truc NeHus et effectivement j'ai un probleme sur mon deuxieme select. Sur le premier j'ai bien l'alerte mais pas sur le deuxieme.
Mon go() est donc mal defini mais je comprends pas pourquoi.
C'est comme si il ne prenait pas mon choix dans le menu deroulat modele en compte.
Où est-ce qu k'ai merdé dans ma page? :roll:
08/06/2006, 18h46
kankrelune

:roll:

@ tchaOo°

Ajax

Merci pour la commande js

"alert("Fonction go appelée >> \n - valeur : " + valeur + "\n - page appelée : " + page + "\n -Destination resulat : " + resultat );"

Ca m'a permis de regler un soucis. Maintenant j'arrive a faire fonctionner ton alert sur les deux fonctions. En fait, il fallait que je mette le onchange dans ma page requete_modele.php.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php echo "<select name='modele' id='idmodele' onChange=\"go('modele','requete_processeur.php','processeur')\">"; if(isset($_POST["idmateriel"])){ require("connect_atelier.php"); $req = 'SELECT DISTINCT modele FROM fiche_type WHERE materiel="'.$_POST["idmateriel"].'" ORDER BY modele ASC'; $res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() ); while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row["modele"]."'>".$row["modele"]."</option>"; } } echo "</select>";
Par contre ca ne regle pas tout a fait mon soucis car le resultat n'arrive toujours pas dans mon input text.
C'est quand meme le but au final lol :D

09/06/2006, 18h55
ns_deux

Ajax

Salut kankrelune,
j'ai essaye tes script mais rien ne marche et je n'ai pas de message d'erreur.
Par contre ce que j'ai fait plus haut à l'aide du control de NeHus fonctionne du moins ces deux controles se lancent et donc les deux fonctions go() marche mais je n'ai qu'un resultat celui du second select mais rien de nouveau sur mon input text.
Cela viendrait-il du innerHTML?
09/06/2006, 19h59
kankrelune

8O

Je sais pas comment tu fais... le code que je t'ais mis marche sous IE,Mozilla/Firefox,Opera... le seul bug que j'ais pu constater c'est la mise à jour du champs texte sous IE... .. .

Tu as testé avec le code en l'état sans décomanter les requetes sql... .. ?

@ tchaOo°

ps : innerHTML est utilisé nul part dans mon code... .. .

salut Kankrelune,
Pour pouvoir faire ton truc j'ai tout vire de ma page sauf ce que tu m'a demande de faire ca donne cà :

base_saisie_materiel.php :

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
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
<html>
<head>
<?php
 
require("connect_atelier.php");
?>
<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 updateSelect(select,form,target)
{
	getXhr();
 
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4)
		{		
			if(xhr.status == 200 || xhr.status == 304)
			{
				getElement("debug").innerHTML = xhr.responseText;
				eval(xhr.responseText);
			}
		}
	};
 
	xhr.open("POST","updateSelect.php",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));
}
</script>
</head>
<body>
<form method="post" id="formulaire" action="base_enreg_saisie_materiel.php">
  <table width="100%" border="0">
    <tr>
      <td width="29%"><div align="right"><strong>Nom du mat&eacute;riel :</strong></div></td>
      <td width="25%"><strong>
        <select name="materiel" id="materiel" onChange="javascript:updateSelect(this,'formulaire','modele');">
			<?php
                
                                $materiel = $_GET["materiel"];
                                $select = 'SELECT DISTINCT materiel FROM materiel ORDER BY materiel desc';
                                $result = mysql_query($select,$connect) or die ('Erreur : '.mysql_error() );
                                echo '<option value="'.$materiel.'">'.$materiel.'</option>';
                                while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) 
                                        echo '<option value="'.$row['materiel'].'">'.$row['materiel'].'</option>';
                                
                        ?>
        </select></strong>
		</td>
    </tr>
    <tr>
      <td><div align="right"><strong>Type de mat&eacute;riel : </strong></div></td>
      <td><strong>
        <div style="display:inline">
          <select name="modele" id="modele" onChange="javascript:updateSelect(this,'formulaire','processeur');">
            <option value="">------</option>
          </select>
		</div>
		</td>
	</tr>
	<tr>
      <td><div align="right"><strong>Processeur : </strong></div></td>
      <td><strong><input type="text" name="processeur" id="processeur" readonly value="" /></td>
	</tr>
	</form>
</table>
<br />
responseText :
<div id="debug"></div>
</body>
</html>

et pour updateSelect.php :

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
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
 
<?php
 
//echo '<pre>';
//print_r($_POST);
//echo '</pre>';
 
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 = '';
 
	if(isset($_POST['target']))
		$target = strip_tags($_POST['target']);
			elseif(isset($_GET['target']))
				$target = strip_tags($_GET['target']);
					else
						$target = '';
 
	//require("connect_atelier.php");
	$options = array(
					'test' => array('test 1','test 2','test 3'),
					'pwet' => array('pwet 1','pwet 2','pwet 3'),
					'plop' => array('plop 1','plop 2','plop 3')
					);
 
 
	if($type == 'modele')
	{
		if($id != '')
		{
			/*$req = 'SELECT processeur FROM fiche_type WHERE modele="'.$id.'"';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
			$row = mysql_fetch_assoc($res);
 
			echo 'getElement("'.$target.'").value = "'.$row["processeur"].'";';*/
 
			/*echo 'getElement("'.$target.'").value = "Intel '.$id.'";';  */ }
		else {
		echo 'getElement("'.$target.'").value = "";';  }
	}
	else
	{
		echo 'getElement("processeur").value = "";
		var select = document.forms["'.$form.'"].elements["'.$target.'"];
		select.options.length = 0;
		select.options[select.options.length] = new Option("------");'; 
 
		if($id != '')
		{
			/*$req = 'SELECT DISTINCT modele FROM fiche_type WHERE materiel=\''.$id.'\' ';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
 
			while($row = mysql_fetch_assoc($res)) 
				echo 'select.options[select.options.length] = new Option("'.$row["modele"].'");'; */
 
		       /*	foreach($options[$id] as $option)  
				echo 'select.options[select.options.length] = new Option("'.$option.'");';  */
		}
	}
}
?>

Et voilà le message d'erreur qu'il me retourne lorsque je choisis un element de mon premier select:

responseText :
getElement("processeur").value = ""; var select = document.forms["formulaire"].elements["modele"]; select.options.length = 0; select.options[select.options.length] = new Option("------");

et quand je ne decommante pas avec pwet.... ca donne :

responseText :
getElement("processeur").value = ""; var select = document.forms["formulaire"].elements["modele"]; select.options.length = 0; select.options[select.options.length] = new Option("------");select.options[select.options.length] = new Option("pwet 1");select.options[select.options.length] = new Option("pwet 2");select.options[select.options.length] = new Option("pwet 3");

10/06/2006, 14h28
kankrelune

A première vu il n'y a aucune erreur dans le code retourné... as tu vérifié que le contenu du select ne changeait pas car j'ais laisser le "------" en première option même une fois que celui ci est mis à jour... .. .

@ tchaOo°
10/06/2006, 16h08
ns_deux

Ajax

Merci à toi ca y est ca marche du moins avec tes pages php. j'arrive à faire mes deux requetes et à obtenir le resultat atendu.
Par contre je n'arrive pas à l'integrer dans ma page initiale. Si je vire
responseText :
<div id="debug"></div>
ca marche plus.
Bizarre
10/06/2006, 17h01
kankrelune
Non c'est normal... .. .

remplace...
Code:

1 2 3 4 5 6 if(xhr.status == 200 || xhr.status == 304) { getElement("debug").innerHTML = xhr.responseText; eval(xhr.responseText); }
Par
Code:

1 2 3 if(xhr.status == 200 || xhr.status == 304) eval(xhr.responseText);
;)

@ tchaOo°

ps : par contre j'ais toujours pas trouvé d'où venait le bug avec le input text sous IE... mais bon... j'ais pas cherché non plus ça doit pas être sorcier... .. .

Ajax

Alors toi, tu es vraiment trop fort. Là tu m'epates. Comme on dit : Respect Man.
je vais juste abuser un peu et apres je t'embete plus.
voilà. En fait, ma requete sur le modele me donne trois ellement : le processeur que tu as resolu avec brio, la capacité disque dur et la ram du PC.
J'ai toute ces infos sur une requete :

Code:

1
2
3
4
 
	$req = 'SELECT processeur,disque,ram FROM fiche_type WHERE modele="'.$id.'"';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
			$row = mysql_fetch_assoc($res);

Tu comprends bien que j'ai 3 input text du meme type que processeur.
Comment puis-je faire pour afficher les trois en meme temps sur le select de mon modele?

voilà le code de ma page principale

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<form method="post" name="formulaire" action="base_enreg_saisie_materiel.php">
  <table width="100%" border="0">
    <tr>
      <td width="29%"><div align="right"><strong>Nom du mat&eacute;riel :</strong></div></td>
      <td width="25%"><strong><strong>
        <select name='materiel' id='materiel' onChange="javascript:requete('requete_materiel.php',this,'formulaire','modele');">
          <?php
	$materiel=$_GET["materiel"];
	echo '<option value="'.$materiel.'">'.$materiel.'</option>';
	while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) 
	{$var= $row["materiel"];
	echo '<option value="'.$var.'">'.$var.'</option>';
	}
	?>
        </select>
      </strong></strong></td>
      <td width="6%">&nbsp;</td>
      <td width="40%"></td>
    </tr>
    <tr>
      <td><div align="right"><strong>Type de mat&eacute;riel : </strong></div></td>
      <td><strong>
        <div id='modele'>
          <select name='modele' id='modele' onChange="javascript:requete('requete_materiel.php',this,'formulaire','processeur');">
            <option value='-1'></option>
          </select>
          </div>
      </strong></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      
      <td><div align="right"><strong>Type de processeur : </strong></div></td>
      <td><strong><input type="text" name="processeur" id="processeur" readonly value="" />
      </strong></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div align="right"><strong>Capacit&eacute; du disque dur : </strong></div></td>
      <td>
          <input type="text" name="disque" id="disque" readonly >
             </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div align="right"><strong>Capacit&eacute; de la m&eacute;moire vive : </strong></div></td>
      <td>
          <input type="text" name="ram" id="ram" readonly /></div></td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>

J'ai essayé cà mais ca marche pas. Ca me met la ram sur le input du processeur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	require("connect_atelier.php");

	
	if($type == 'modele')
	{
		if($id != '')
		{
			$req = 'SELECT processeur,disque,ram FROM fiche_type WHERE modele="'.$id.'"';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
			$row = mysql_fetch_assoc($res);
			
			echo 'getElement("'.$target.'").value = "'.$row["processeur"].'";'; 
			echo 'getElement("'.$target.'").value = "'.$row["disque"].'";';
			echo 'getElement("'.$target.'").value = "'.$row["ram"].'";';
		
		}
	
	}

Ajax

C'est bon j'ai trouvé voilà ce que j'ai fait

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
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
 
<?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 = '';
 
	if(isset($_POST['target']))
		$target = strip_tags($_POST['target']);
			elseif(isset($_GET['target']))
				$target = strip_tags($_GET['target']);
					else
						$target = '';
 
	if(isset($_POST['target1']))
		$target1 = strip_tags($_POST['target1']);
			elseif(isset($_GET['target1']))
				$target1 = strip_tags($_GET['target1']);
					else
						$target1 = '';
 
	if(isset($_POST['target2']))
		$target2 = strip_tags($_POST['target2']);
			elseif(isset($_GET['target2']))
				$target2 = strip_tags($_GET['target2']);
					else
						$target2 = '';
 
 
	require("connect_atelier.php");
 
 
	if($type == 'modele')
	{
		if($id != '')
		{
			$req = 'SELECT processeur,disque,ram FROM fiche_type WHERE modele="'.$id.'"';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
			$row = mysql_fetch_assoc($res);
 
			echo 'getElement("'.$target.'").value = "'.$row["processeur"].'";';
		        echo 'getElement("'.$target1.'").value = "'.$row["disque"].'";';
		        echo 'getElement("'.$target2.'").value = "'.$row["ram"].'";';
		}
 
	}
	else
	{
		echo 'getElement("processeur").value = "";
		var select = document.forms["'.$form.'"].elements["'.$target.'"];
		select.options.length = 0;
		select.options[select.options.length] = new Option("");'; 
 
		if($id != '')
		{
			$req = 'SELECT DISTINCT modele FROM fiche_type WHERE materiel=\''.$id.'\' ';   
			$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
 
			while($row = mysql_fetch_assoc($res)) 
			echo 'select.options[select.options.length] = new Option("'.$row["modele"].'");'; 
 
 
		}
	}
}
?>

Voilà ca marche j'espere que j'ai pas fait d'erreur? en tout cas ca marche
Encore Merci pour tout. Sans toi j'etais perdu
;)

;)

Il pourrait être pas mal de remplacer...

Code:

1
2
3
4
5
 
else
{
	echo 'getElement("processeur").value = "";
	var select = document.forms["'.$form.'"].elements["'.$target.'"];

par

Code:

1
2
3
4
5
6
7
 
else
{
	echo 'getElement("processeur").value = "";
        getElement("disque").value = "";
        getElement("ram").value = "";
	var select = document.forms["'.$form.'"].elements["'.$target.'"];

Mais c'est du détail... .. . ;)

@ tchaOo°

Ajax

salut à tous,
voilà j'utilise un script que l'on m'a fourni ici pour mettre à jour des menus déroulant et ca fonctionne tres bien avec tout ce qu'on a fait precedemment.
Par contre, quand je veux raffaichir un menu deroulant sur lui meme ca marche pas. Ca marche qu'avec un lien mais ca recharge ma page et je comprends pas pourquoi et je veux surtout pas recharger ma page alors que ca marche bien avec le reste.

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
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
104
105
106
107
108
109
 
<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>
 
.............................
 
<div id="divoam" onclick="javascript:requete('requete_oam.php','oam','formulaire','divoam');">
       <?php
        echo "<select name='oam' id='oam' style='width:240' >";
        echo "<option value=''></option>";
        $req10 = 'SELECT DISTINCT oam FROM oam ';
        $res10 = mysql_query($req10,$connect) or die ('Erreur : '.mysql_error() );
        while($row10 = mysql_fetch_assoc($res10)){
        echo "<option value='".$row10['oam']."'>".$row10['oam']."</option>";
        }
        echo "</select>";
        ?>      
	</div>
      </td>
      <td><a href="param_oam.php" onClick="window.open(this.href); return false;"><strong><img src="./icone/enreg.gif" alt="image"></strong></a></td>
      <td><strong><a href="" onclick="javascript:requete('requete_oam.php','oam','formulaire','divoam');"><img src="./icone/rechargement.gif" alt="image" ></td>
    </tr>

et le code de ma page requete_oam.php

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 <?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 = '';
 
	if(isset($_POST['target']))
		$target = strip_tags($_POST['target']);
			elseif(isset($_GET['target']))
				$target = strip_tags($_GET['target']);
					else
						$target = '';
 
 
	if($type == 'oam')
	{
		if($id != '')
		{       
		$str = "<select name='oam' id='oam' style='width:240'>\n";
        	$str.= "<option value=''></option>\n";
		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)){
		        $str.="<option value='".$row['oam']."'>".$row['oam']."</option>";
		}
	        $str.="</select>";  
		echo 'document.getElementById("'.$target.'").innerHTML = '.$str.';';
 
		}
 
	}
 
}
 
 
?>

Je comprends pas ce qui va pas. Ca marche avec mon lien de raffraichissement mais ca recharge ma page alors que ca marche pas quand je clique sur mon menu.