[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