[AJAX] Utilisation Ajax

**nicoweb371** · 18/05/2006, 14h11

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

**NeHuS** · 18/05/2006, 14h39

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**nicoweb371** · 18/05/2006, 14h47

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

 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 !

**NeHuS** · 18/05/2006, 15h04

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

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

**nicoweb371** · 19/05/2006, 08h16

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

**nicoweb371** · 19/05/2006, 09h11

C'est bon j'ai r�ussi !!
Merci beaucoup !

**ns_deux** · 05/06/2006, 19h41

"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

**NeHuS** · 06/06/2006, 00h35

peu importe le language du cot� serveur , montre nous ton code qui envoie et ceui qui re�oit et traite la reponse

**ns_deux** · 06/06/2006, 06h53

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

**NeHuS** · 06/06/2006, 14h28

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

essaye :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

keep me in touch

**kankrelune** · 06/06/2006, 14h43

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�

**ns_deux** · 07/06/2006, 07h05

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>

**NeHuS** · 07/06/2006, 10h05

as tu essay� ce que je t ai dit ?

**ns_deux** · 07/06/2006, 12h15

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

**kankrelune** · 07/06/2006, 18h00

et comme �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
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�

**ns_deux** · 07/06/2006, 18h50

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

**kankrelune** · 07/06/2006, 21h03

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 :

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

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

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

**ns_deux** · 07/06/2006, 22h27

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

**NeHuS** · 08/06/2006, 10h27

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