Discussion :

[van___fanel]

Bonsoir,

je souhaiterai réaliser un petit outil fonctionnel sur une interface d'administration, et je me suis dit, plutot que d'envoyer le formulaire, fais le en AJAX.
Ce que je souhaite faire : Sur une page pour ajouter un screenshot, je dois d'abord choisir le client auquel est lié ce screenshot, puis je dois choisir le projet auquel est lié ce screenshot. Et lorsque je choisis un client dans mon premier <select> (crée via une boucle qui liste ma bdd), je voudrai que le <select> des projets se remplisse tout seul avec la liste des projets, en n'y écrivant que les projets lié au client choisi avant.

Donc voilà, je suis allé voir quelques tutos, histoire de choper des morceaux de script, et de comprendre un peu en les bidouillant :

Le formulaire d'ajout de screenshot :

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
<form action="screenshots_add.php" name="ajout" method="post" enctype="multipart/form-data">
	<table width="100%" cellspacing="0" cellpadding="10" class="niv2">
	  <tr>
		<td>Client :</td>
		<td>
		<select name="client_id" onChange="findProjets(this.value)">
		<option value="">Choisir le client</option>
		<?php
                $sql =  "SELECT client_id, client_entreprise
                                FROM CLIENTS
                                ORDER BY client_id";
                $query = mysql_query($sql);
                while($result = mysql_fetch_array($query))
                {
                        echo '<option value="'.$result['client_id'].'">'.$result['client_entreprise'].'</option>';
                }
                ?>
		</select>
		</td>
	  </tr>
	  <tr>
		<td width="10%">Nom du projet :</td>
		<td>
		<?php
                include 'ajax.php';
                ?>
		</td>
	  </tr>
	  <tr>
		<td>Screenshot :</td>
		<td><input type="file" name="screenshot" size="30" /></td>
	  </tr>
	  <tr>
		<td></td>
		<td><input type="submit" name="submit" value="Envoyer" style="width:100px;" /></td>
	  </tr>
	</table>
	</form>

Le fichier ajax.php, que j'inclue là ou devrait apparaitre le <select> des projets :

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
<script type="text/javascript">
function writediv(texte)
{
	document.getElementById('pseudobox').innerHTML = texte;
}
 
function findProjets(id_client)
{
	if(id_client != '')
	{
 
		if(texte = file('http://127.0.0.1/Projects/Web%20Spoken/site/admin/find_projets.php?client_id='+id_client))
			writediv('ça marche');
	}
}
 
function file(fichier)
{
	if(window.XMLHttpRequest) // FIREFOX
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else
		return(false);
	xhr_object.open("GET", fichier, false);
	xhr_object.send(null);
	if(xhr_object.readyState == 4) 
		return(xhr_object.responseText);
	else return(false);
}
</script>
<?php
echo '<select name="projet_id">';
while($result = mysql_fetch_assoc($query))
{
        echo '<option value="'.$result['client_id'].'">'.$result['client_entreprise'].'</option>';
}
echo '</select>';
echo '<div id="pseudobox"></div>';
?>

Et enfin, le fichier findProjets.php, que je demande de lire via le Javascript, dans la fonction findProjets() :

Code :

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

1
2
3
4
5
6
7
8
9
<?php
include 'header.php';
 
// ON CHERCHE LES PROJETS DE CE CLIENT
$sql =  "SELECT projet_id, projet_nom 
                FROM projets 
                WHERE projet_client_id = '".$_GET['client_id']."'"
$query = mysql_query($sql);
?>

Résultat : Une fois que je selectionne un client, le <div> avec écrit 'ça marche' apparait. Mais le <select> des projets ne se rempli pas.

Qu'est ce qui ne va pas dans mes scripts ?

(pour info, j'ai bien des clients et des projets liés à ces clients dans ma table, le problème ne vient pas de là).

[jeje13009]

salut,

si j'ai bien compris, tu veux choisir dans un premier select un client, et qu'en fonction de ton choix le deuxième select contienne une liste correspondante ?

pourquoi la page contenant le formulaire ne génèretait-elle pas directement les différentes listes possibles pour le second select en fonction de tous les idClient trouvés en remplissant le premier (via un script PHP je parle)...
ainsi, une fois ta page de formulaire chargé, ta page contient tout ce dont elle a besoin, une simple fonction javascript remplit ensuite le 2nd select...

sinon, si tu veux rester sur un principe de génération en live de la liste du 2nd select, il me semble que tu démultiplies un peu trop les fichiers (notamment imbriqués les uns dans les autres) et les fonctions... je pense qu'on peut simplifier, je réfléchis à la chose et reposterai un bout de code d'ici peu

[van___fanel]

Effectivement c'est tout à fait ce que je veux faire.

Effectivement ça serait possible de simplifier, et que le fichier soit généré avec tout ce qu'il faut direct. mais j'ai saisi cette occasion pour me lancer dans l'AJAX, car c'est un cas quand même assez facile.

Si effectivement tu pouvais me trouver une solution (je demande pas le script deja tout fait, mais simplement de mettre en avant mes erreurs), ca serait vraiment super.

[jeje13009]

bonjour,

je viens de mieux regarder ton code... ce que tu constates est tout à fait normal, puisque lorsque tu inclues ton fichier ajax.php, le code js est chargé (et exécutable) et la partie php (pour remplir le second select) est interprété (donc sans id client !)...

tu es bien pourtant bien parti avec le remplissage de ton premier select.

Ton formulaire modifié :

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
<html><head>
<script type="text/javascript">
function file(fichier)
{
	if(window.XMLHttpRequest) // FIREFOX
		xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
		xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else
		return(false);
	xhr_object.open("GET", fichier, false);
	xhr_object.onReadyStateChange{
                  if(xhr_object.readyState == 4) document.getElementById('select_projet').innerHTML = xhr_object.responseText;
	      else document.getElementById('pseudobox').innerHTML = 'listing des projets en cours...';
                  }
             xhr_object.send(null);
 
}
</script>
</head>
<body>
<form action="screenshots_add.php" name="ajout" method="post" enctype="multipart/form-data">
	<table width="100%" cellspacing="0" cellpadding="10" class="niv2">
	  <tr>
		<td>Client :</td>
		<td>
		<select name="client_id" onChange="file('http://127.0.0.1/Projects/Web%20Spoken/site/admin/find_projets.php?client_id='+this.value);">
		<option value="">Choisir le client</option>
		<?php
                $sql =  "SELECT client_id, client_entreprise
                                FROM CLIENTS
                                ORDER BY client_id";
                $query = mysql_query($sql);
                while($result = mysql_fetch_array($query))
                {
                        echo '<option value="'.$result['client_id'].'">'.$result['client_entreprise'].'</option>';
                }
                ?>
		</select>
		</td>
	  </tr>
	  <tr>
		<td width="10%">Nom du projet :</td>
		<td>
		<select name="select_projet" disabled='disabled'></select>
		<div id="pseudobox"></div></td>
	  </tr>
	  <tr>
		<td>Screenshot :</td>
		<td><input type="file" name="screenshot" size="30" /></td>
	  </tr>
	  <tr>
		<td></td>
		<td><input type="submit" name="submit" value="Envoyer" style="width:100px;" /></td>
	  </tr>
	</table>
	</form></body></html>

ton fichier ajax.php ne contiendra alors plus que la fonction de rechreche dans ta bdd et l'echo de retour, comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
$sql =  "SELECT projet_id, projet_entreprise
                                FROM CLIENTS 
                                ORDER BY projet_id 
                                WHERE client_id=$client_id";
                $query = mysql_query($sql);
                
while($result = mysql_fetch_assoc($query))
{
        echo '<option value="'.$result['projet_id'].'">'.$result['projet_entreprise'].'</option>';
}
?>

******
petit edit :

Code :

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

1
2
3
4
5
6
<tr>
		<td width="10%">Nom du projet :</td>
		<td>
		<select name="select_projet" disabled='disabled'></select>
		<div id="pseudobox"></div></td>
	  </tr>

à modifier par, 1ere option :

Code :

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

1
2
3
4
5
<tr>
		<td width="10%">Nom du projet :</td>
		<td>
		<div id="select projet"></div></td>
	  </tr>

donc ajax.php devient :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
$sql =  "SELECT projet_id, projet_entreprise
                                FROM CLIENTS 
                                ORDER BY projet_id 
                                WHERE client_id=$client_id";
                $query = mysql_query($sql);
echo "<select name="select_projet" disabled='disabled'>";
while($result = mysql_fetch_assoc($query))
{
        echo '<option value="'.$result['projet_id'].'">'.$result['projet_entreprise'].'</option>';
}
echo "</select>";
?>

ou par, 2eme option :

Code :

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

1
2
3
4
5
6
7
<tr>
		<td width="10%">Nom du projet :</td>
		<td>
		<select name="select_projet" disabled='disabled'>
<option value="">Choisir le projet</option>
</select>
	  </tr>

donc ajax.php devient :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
$sql =  "SELECT projet_id, projet_entreprise
                                FROM CLIENTS 
                                ORDER BY projet_id 
                                WHERE client_id=$client_id";
                $query = mysql_query($sql);
$a=1;
while($result = mysql_fetch_assoc($query))
{
        echo "document.form[0].elements['select_projet'].options[".$a."] = new Option('".$result['projet_entreprise']."','".$result['projet_id']."');";
$a++;
}
echo "document.form[0].elements['select_projet'].disabled = false;";
?>

et dans la fonction file() on aura :

Code :

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

1
2
3
4
 
xhr_object.onReadyStateChange{
                  if(xhr_object.readyState == 4) eval(xhr_object.responseText);
	      }

=> la deuxième méthode me parait plus intéressante puisque le champ select sera afficher des le départ, mais en grisé tant qu'un client n'a pa été sélectionné ! j'ai zappé le message d'attente dans la deuxieme méthode mais on peut très facilement le rajouter
le code est à tester, il y a peut-êter quelques bugs à corriger (dsl), d'autant que c'est la première fois que j'utilise éval...

tiens moi au courant

[van___fanel]

Bon, pas mal d'heures de travail dessus, et ça ne marche toujours pas.

Il semblerait que le script boude la ligne du xhr_object.open("GET", fichier, true);
comme tu peux le voir, à coté du deuxieme select, j'ecris le ReadyState du script, il est toujours sur 1 (qui correspond à l'envoi des données). J'ai fait d'autres tests (avec des alerts), l'id du premier select est bien envoyé vers la requete. Et la requete semble elle aussi être correcte. Vois-tu ce qui cloche ?

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
<script type="text/javascript">
	function file(fichier)
	{
		var xhr_object = null;
		if(window.XMLHttpRequest) 		// FIREFOX
			xhr_object = new XMLHttpRequest();
		else if(window.ActiveXObject) 	// IE
			xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
		else  							// XMLHttpRequest non supporté par le navigateur
        	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
		xhr_object.open("GET", fichier, true);
		xhr_object.onReadyStateChange
		{
			if(xhr_object.readyState == 4)
			{
				document.getElementById('select_projet').innerHTML = xhr_object.responseText;
			}
			else 
			{
				document.getElementById('pseudobox').innerHTML = 'listing des projets en cours : ReadyState = '+xhr_object.readyState;
			}
		}
		xhr_object.send(null);	
	}
 
	</script>
	<form action="screenshots_add.php" name="ajout" method="">
	<table width="100%" cellspacing="0" cellpadding="10" class="niv2">
	  <tr>
		<td>Client :</td>
		<td>
		<select name="client_id" onChange="file('ajax.php?client_id='+this.value);">
		<option value="">Choisir le client</option>
		<?php
                $sql =  "SELECT client_id, client_entreprise
                                FROM CLIENTS
                                ORDER BY client_id";
                $query = mysql_query($sql);
                while($result = mysql_fetch_array($query))
                {
                        echo '<option value="'.$result['client_id'].'">'.$result['client_entreprise'].'</option>';
                }
                ?>
		</select>
		</td>
	  </tr>
	  <tr>
		<td>Nom du projet :</td>
		<td>
		<select name="select_projet">
		<option value="">Choisir le projet</option>
		</select>
		<span id="pseudobox"></span>
		</td>
	  </tr>

[jeje13009]

slt,

si le readystate t'affiche 1, c'est que la ligne que tu mentionnes n'est pas ignorée... mais la comme ca je ne vois pas...

faudrait que tu fasse un alert sur la variable "fichier" et voir ce qu'il t'affiche, je pense que ca vient de la et du coup il progresse pas pck il bug... ou alors c'est tout simplement au niveau du fichier php...

tiens moi au courant et je regarde aussi de mon coté