formulaire dynamique

[vidzo]

Bonjour,

Je souhaiterai savoir si il est possible de créer un formulaire dynamique suivant les caractérostiques suivantes:

Un premier select liste les différentes catégories de collections contenues dans une table collection.

En fonction de la catégorie choisie, un deuxième select apparait, avec la liste des collections contenues dans la categorie.

La table collection possède les champs suivants: (id, categorie, nom)

Chaque collection possède des objets.

Après avoir choisi la collection, un troisième select apparait, avec la liste des objets contenus dans cette collection.

Il faut en choisir un.

Une liste contenant les différents magasins dans lequel l'objet est disponible apparait.

A chaque objet est associé un certain nombre de caractéristiques (le nb de caracteristique peut varier selon l'objet). Chaque caractéristique peut prendre plusieurs valeurs.

Lorsqu'un objet est sélectionné, un nouveau select apparait pour chaque caractéristique, contenant toutes les valeurs que la caractéristique peut prendre.

En fonction du renseignement des différentes caractéristiques, la liste des magasins se met à jour.

Certaines combinaisons de valeurs peuvent à nouveau engendrer de nouvelles caractéristique, qui devront à nouveau s'afficher et proposer des valeurs dans un select.

Je voudrais que ce formulaire soit effectué sans recharger la page.

Est-il possible de coder l'ensemble de ce formulaire en javascript/ajax avec jquerry?

Je découvre ces différents languages (d'après ce que j'ai compris, ajax et jquerry ne sont pas des languages), et je voudrai donc savoir si ce que je cherche à faire est réalisable avant de me lancer.

[captain_torche]

Oui, c'est tout à fait possible, rassure-toi.

Dans le principe : avec Jquery (qui n'est rien d'autre qu'une bibliothèque de fonctions JavaScript), tu détectes le changement sur ton premier select. Tu récupères la valeur de l'option, que tu envoies via AJAX à une page PHP, qui te génèrera du XML ou de l'HTML directement, qui te servira à construire ton second select, et ainsi de suite.

Toutefois, il faut aussi prévoir que certains de tes clients n'auront pas JavaScript. Il faudra prévoir pour ce cas, une version "en dur", avec des rechargements de page.

Je trouve également que limiter l'affichage de tes produits à des select uniquement, risque d'être très réducteur. Pourquoi se priver d'une navigation plus classique, qui permet de présenter également d'autres produits ?

[cyberlaura]

Bonjour vidzo,

ce que tu demandes est tout à fait possible avec Ajax, ou plutôt avec XMLHttpRequest. Mais pour ne pas trop mettre les mains dans le cambouis, il existe des framework tels que jquery, prototype ou MooTools qui ont l'avantage de regrouper plusieurs simplifications de code, mais surtout d'être compatibles avec (presque) tous les navigateurs.

Le principe de XMLHttpRequest est d'appeler avec javascript une page sur le serveur qui va renvoyer un résultat. Ce résultat pourra être utilisé pour par exemple remplir un select.

Pas possible ça : grillé par captain_torche à 7h du mat'.

Modifié 10 Juillet 2009 par cyberlaura

[vidzo]

Bon, je me lance alors !

Si je bloque sur un problème, je solliciterai peut etre à nouveau votre aide.

Toutefois, il faut aussi prévoir que certains de tes clients n'auront pas JavaScript. Il faudra prévoir pour ce cas, une version "en dur", avec des rechargements de page.

Je trouve également que limiter l'affichage de tes produits à des select uniquement, risque d'être très réducteur. Pourquoi se priver d'une navigation plus classique, qui permet de présenter également d'autres produits ?

En fait, je travaille sur une appli qui sera utilisée en interne dans une entreprise, donc toutes les machines ont javascript.

J'ai pris les categories, collections, objets etc pour exemple, mon formulaire permettra de choisir des evenements parmi des release et daffficher une liste de warnings en fonction de parametres et de valeurs choisies.

Je suis un cahier des charges, et on me demande d'utiliser des select.

Je me débrouille en php/MySQL, j'espere que la decouverte de js ne sera pas trop fastidieuse

[captain_torche]

Ok, dans ce cas je comprends mieux

L'avantage des bibliothèques comme jQuery, c'est qu'elles permettent de charger directement du code HTML dans le DOM, ça simplifie énormément la phase d'affichage

[vidzo]

J'ai essayer de coder l'affichage du second select en fonction du premier. Je bloque déja.

Je copie mon code, si vous voyez une erreur flagrante, n'hésitez pas à m'en faire part.

J'ai une page visualisation.php:

<table id='formulaire'>
	<tr id='tr_type'>
		<td ><b>Type de release :</b></td><td><?php include('_select_type_release.php')?></td>
	</tr>
	<tr id='tr_nom'>
	</tr>
</table>

Une page _select_type_release.php:

<select  id='select_type' name='select_type' onchange="loadNoms(this)">

	<option value='void_type'>Choose a type of release</option>

	<?php
		include("includes/connexion.php");


		$query = "SELECT * FROM release GROUP BY type";
		$rq = mysql_query($query) or die(mysql_error());

		while ($row=mysql_fetch_assoc($rq))
		{
			$type = $row["type"];

			echo "<option value='$type'>$type</option>";
		}

		mysql_close();

	?>
</select>

Une page _select_nom_release.php:

<select id='select_nom' name='select_nom'>
	<option value='void_nom'>Choose a release</option>
	<?php
		include("includes/connexion.php");


		$var=$_POST['var'];


		$query = "SELECT id, nom FROM release WHERE type='$var' ";
		$rq = mysql_query($query) or die(mysql_error());
		while ($row=mysql_fetch_assoc($rq))
		{
			$id_release = $row["id"];
			$nom = $row["nom"];

			echo "<option value='$id_release'>$nom</option>";
		}	

		mysql_close();
	?>
</select> 

Une page ajax.js:

function loadNoms(strthis)
{
	var param = strthis.value;
    var selected_type = document.getElementById("select_type").options[document.getElementById("select_type").selectedIndex].value;

	$.ajax
	(
		{
			type: "POST",
			url: "_select_nom_release.php",
			data: "var="+param,
			success: 
			function(msg)
			{
				$("#tr_nom").append("<td class='title'><b> Nom :</b></td><td>"+ msg +"</td>");
			}
		}
		if(selected_type=="void_type") $("#tr_nom").hide();
		else $("#tr_nom").show();
	);
}

Et enfin, je déclare jquerry et ajax.js dans une page head.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>

<title>Outil de gestion </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="/styles/style.css" />
</head>

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="ajax.js"></script> 
<div id="haut">
<a href="/"><img src="/images/Banniere.png" alt="bann"/></a>
</div>

Le premier select s'affiche correctement, mais lorsque je sélectionne une valeur, rien ne se passe, le deuxième select n'apparait pas.

Je n'arrive pas vraiment à voir d'ou vient le problème...

Modifié 10 Juillet 2009 par vidzo

[captain_torche]

Ta fonction loadNoms() se lance bien ? vérifie le avec un alert.

Sinon, puisque tu utilises jquery, ça sera plus facile de l'utiliser pour l'ensemble de ton code javaScript, et pas uniquement pour l'appel AJAX.

Pour éviter de mettre du JavaScript dans ton code HTML, tu peux mettre un listener sur le champ (Je code à l'aveuglette, tu devras sûrement modifier des choses)

$('#select_type').change(function() {
$.post(
// ton code ici
);
});

Par contre, en l'état ton code ajoutera constamment une nouvelle ligne à ton tableau, à chaque changement dans le select.

Pour éviter ce désagrément, pense bien à supprimer cette ligne (si elle existe) avant de l'ajouter à nouveau.

[vidzo]

J\'avance petit à petit.

Oui, ma fonction loadNoms se lance bien.

Mon deuxième select ne s\'affichait pas à cause de ces 2 lignes dans la page ajax.js:

 if(selected_type==\"void_type\") $(\"#tr_nom\").hide();
else $(\"#tr_nom\").show();

Lorsque je les met en commentaire, le deuxième select s\'affiche (clap clap). Par contre, il est vide. Je vais essayer de voir d\'ou ca vient.

J\'ai réglé le probleme d\'ajout de ligne à mon tableau à chaque changement dans le select en ajoutant cette ligne:

$(\"#tr_nom\").empty();

Sinon, puisque tu utilises jquery, ça sera plus facile de l\'utiliser pour l\'ensemble de ton code javaScript, et pas uniquement pour l\'appel AJAX.

Pour éviter de mettre du JavaScript dans ton code HTML, tu peux mettre un listener sur le champ (Je code à l\'aveuglette, tu devras sûrement modifier des choses)

Je t\'avoue que je pensai pouvoir utiliser jquerry partout en le déclarant dans le head.

$(\'#select_type\').change(function() {

$.post(

// ton code ici

);

});

Ce code la, je le mettrai ou? Dans la page ajax.js?

[vidzo]

Le deuxième select ne se remplit pas, car la variable $var n'est pas transmise. En effet, quand je rentre en "dur" le contenu variable dans la requete sql, le champ se remplit.

J'essai donc de "récapituler" le chemin que prend la variable:

- Dans le premier formulaire, la valeur sélectionnée dans le select est réupérée par la fonction loadNoms :

 <select  id='select_type' name='select_type' onchange="loadNoms(this)">

- Dans la fonction loadNoms, cette valeur est récupérée dans une varable param:

 function loadNoms(strthis)
{
	var param = strthis.value;

- Dans cette même fonction, on créer une variable var qui contient param, et qui est envoyé par POST à l'url du deuxieme select:

data: "var="+param,

- Dans le deuxième select, on créer une variable $var contenant $_POST['var']:

$var=$_POST['var'];

Mais cette variable $var ne contient rien au final. D'ou vient le probleme?

Est ce que cela vient du fait que la valeur que je recupère dans le premier select est une chaine de caractère, pas un int?

[captain_torche]

Juste après "var param = strthis.value;", fais un "alert(param)". Tu as quelque chose ?

[vidzo]

L'alert renvoie bien le résultat voulu.

[vidzo]

D'après mes recherches, il faudrait que j'insère ces lignes:

 param.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		param.send(data);

Le problème; c'est que je sais pas du tout dans quelle page insérer ces lignes.

Il faudrait aussi que j'insère cela pour assurer l'affichage sur mozilla et IE:

if(window.ActiveXObject)
    {
        //Internet Explorer
        var param = new ActiveXObject("Microsoft.XMLHTTP") ;
    }//fin if
    else
    {
        //Mozilla
        var param = new XMLHttpRequest();
    }//fin else



        //Ouverture du fichier en methode POST
        param.open("POST", page);

    param.onreadystatechange = function()
    {


		content.innerHTML = param.responseText;

    }    

Même problème, je ne sais pas ou insérer le code. Je le met à l'intérieur de ma fonction loadNoms, dans la page ajax.js? En dehors de la fonction? Dans le head? Je suis un peu perdu...