[AJAX] Mise en place de listes liées

**Silverbox** · 17/01/2015, 23h23

Bonjour à toutes et à tous et meilleur voeux.

je viens vers vous pour m'aider à chercher quelque chose que je ne sais pas ou chercher, en effet je ne suis pas un pro de la programation et ne connait donc pas les bons termes exacts , c'est pour cela que votre aide va m'être précieuse, car même si je n'y connait rien j'aime bien tout faire par moi même , à moins que je trouve un système tout fait, ce qui me convient encore mieux.

donc voilà ma demande, je ne sais pas si je dois chercher dans base de données, formulaires ou autre..

je voudrais pour mon site (que j'ai créer en suivant vos explications ) y installer un système (avec mots de passe ou non.. à voir) qui me permettrait (ou à mes visiteurs) de chercher dans une base de donnée (je pense que c'est çà) préremplie par moi avec des infos correspondant à la recherche demandée via un formulaire (je pense) .

le visiteur arrive sur la page en question ou il doit choisir (par exemple) une marque de produit, puis quand la marque est choisie , il peut choisir parmis les produits de cette marque, et ensuite la référence du produit. il clique sur ok pour valider son choix et il tombe sur une page qui lui donne les infos dont il a besoins, mais ensuite il a besoins d'infos plus poussées, il clique donc sur un lien dans cette page ou il doit remplir un formulaire qui une fois validé va le rediriger sur la même page (ou presque) ou il était juste avant, mais cette fois çi avec beaucoup plus de détails affichés (tout en conservant les infos du 1er affichage de la page avant la recherche en profondeur)

je ne sais pas si je m'exprime bien, donc j'ai trouver un site qui propose le même style d'arborescence de recherche, que ce que je veux faire, si çà peut vous aider à savoir dans quelle partie du site je dois chercher, ou si vous avez la réponse directe avec un truc tout prêt.

pour info mon site est hébergé sur ovh, mais je n'ai pas vu de module pour ce genre de chose, il n'y a que joomla, wordpress et prestashop.

Merci pour votre aide et voilà le lien de ce que je veux faire, en exemple.

bonne soirée et désolé si j'écris en minuscule mais j'ai eu un accident de moto et j'écris avec un seul doigt et de la main opposée à celle que j'utilise depuis ma naissance.

lien : http://racetech.com/ChooseVehicle.aspx

pour la recherche approfondie qui ouvre un formulaire par dessus la page, sur le site ci dessus on doit cliquer sur

Calculate Spring Rates and Display Available Springs

**Silverbox** · 18/01/2015, 18h16

re bonjour, je veux juste savoir comment s'appelle ce que j'ai besoins et ainsi renommer le titre de mon post, ou aller le poster dans une autre section.

merci encore à ceux qui veulent bien me venir en aide, même si je sais très bien que ce n'est pas une obligation.

c'est dur d'être nouveau sur un forum

.

**joel.drigo** · 20/01/2015, 00h29

Salut,

Je n'y connais rien en développement Web, et encore moins en Joomla, Prestashop ou Wordpress, mais je dirais que ce tu cherches s'appelle "listes liées". Et pour Joomla, tu devrais probablement poser ta question ici : http://www.developpez.net/forums/f52...ts/cms/joomla/, après avoir consulté les discussions concernant ta question (en tapant "joomla listes liées" dans le champ de recherche).

**Silverbox** · 20/01/2015, 17h25

Bonsoir Joel et merci de t'être pencher sur ma demande.

Je vais regarder liste liée comme tu me l'indique (je ne savais même pas que ça exstait

) parcontre mon site est seulement de 4 ou 5 pages en html , il n'est pas fait sous joomla ou autre comme je crois que tu as dû comprendre.

Merci donc pour cet aiguillage, j'espère que celà va me mener vers ce que je recherche, encore mille merci de m'avoir répondu même si ce n'est peut ètre pas la solution, c'est déjà bien sympa

**Silverbox** · 16/02/2015, 00h06

bon bein j'en suis toujours au même point + d'un mois après sans avoir eu plus de réponse.

tanpis pour moi

**joel.drigo** · 16/02/2015, 00h51

Salut,

Désolé, en effet, j'avais compris que tu cherchais une solution particulière joomla. Pour du web AJAX, sans autre techno que HTML et JavaScript, tu as un exemple de listes liées ici.

**Silverbox** · 16/02/2015, 20h21

Salut Joel
ne t'inquiètes pas, je n'en ai pas après toi car tu es le seul a t'être pencher sur ma demande et je t'en remercie

j'ai bien été chercher du coté des listes liées comme tu m'as dit, et j'ai trouver une a faire avec un bdd mais ça ne fonctionne pas, je pense qu'il doit y avoir un bug dans le code, et une autre ou tout ce fait dans 2 fichiers sans bdd.

maintenant le soucis est qu'il faut que j'arrive à liée plusieurs listes et aussi qu'à la fin de la sélection , cette sélection mènne quelque part, hors sur tout les tuto que j'ai suivis, à la fin de la sélection des listes dans les menus déroulants qui sont crées, et bien ............ "bref rien, c'est le vide , et ils n'en disent pas plus, donc quand on ne sait pas le faire on reste bloquer à quelque chose qui ne sert à rien.
moi j'aimerais qu'à la fin de la sélection, par exemple

Marque > Modèle > Année , ça dirige vers la page en question et qu'ensuite dans cette page à l'aide d'un formulaire (que je devrais pouvoir arriver à faire) de cases à cochées et une zone de texte à remplir, après validation on tombe sur la page définitive (la même avec + d'infos) qui indique donc les réglages requis pour telle ou telle personne.

rien de bien compliquer pour quelqu'un qui s'y connait, mais pour moi je n'arrètte pas de chercher depuis le jour ou tu m'a dit de voir les listes liées, mais je n'ai pas plus avancer.

Donc je n'ai pas encore été voir ton nouveau lien, je vais le faire et je te tiens au courrant

Merci par avance

**Kreepz** · 17/02/2015, 09h00

Bonjour,

Si j'ai compris, tu souhaite une fois que la personne à choisi Marque > Modèle > Année qu'il soit redirigé vers une page?

**Silverbox** · 17/02/2015, 16h42

Bonjour Kreepz

c'est exactement çà

j'ai suivis le dernier lien de Joel, qui m'a déjà mieux aider à faire une ébauche de ce que je désire, même si ça ne fonctionne pas vraiment.
mais ensuite comme dans tout les autres tuto que j'ai pu voir, ils ne disent pas comment faire ensuite.

je pense qu'il doit y avoir une façon de faire, sinon je ne vois pas à quoi ça servirait ces listes.
Mais je ne sais pas le faire, je n'ai rien trouver car je ne sais pas quoi chercher, ce doit être un mot bien pécis (comme pour liste liées) mais lequel ??
donc je pateauge

la avec le tuto, j'ai essayer de créer une 3ème liste, mais j'ai du mal m'y prendre car je n'arrive pas à afficher les années et pire, ça fait disparaitre les deux menus déroulant pour n'afficher que la 1ère partie, je m'arrache le peu de cheveux qu'il me reste

**Silverbox** · 17/02/2015, 16h49

en image c'est plus parlant

donc là j'ai tout
Nom : selec1.jpg
Affichages : 200
Taille : 25,4 Ko

la après la sélection de la marque, j'ai le 1er modèle de la liste qui s'affiche mais la liste "année" a disparue
Nom : selec2.jpg
Affichages : 186
Taille : 16,5 Ko

Nom : selec2.jpg
Affichages : 186
Taille : 16,5 Ko

et la quand je reviens pour choisir une marque, le modèle disparait (ou presque, car disparition du texte de remplacement) et année n'est toujours pas là.
Nom : selec3.jpg
Affichages : 164
Taille : 15,0 Ko

Nom : selec3.jpg
Affichages : 164
Taille : 15,0 Ko

**Silverbox** · 17/02/2015, 16h57

je vous met les codes.

ici la bdd (la partie année que j'ai rajoutée, je n'ai pas tout rempli en années c'est juste pour tester)

Code sql :

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
67
68
69
70
71
72
73
74
75
76
CREATE TABLE `marque` (
  `id` tinyint(4) NOT NULL auto_increment,
  `nom` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
);
 
insert into `marque` values 
(1,'HONDA'),
(2,'KAWASAKI'),
(3,'KTM'),
(4,'SUZUKI'),
(5,'YAMAHA');
 
CREATE TABLE `modele` (
  `id` tinyint(4) NOT NULL auto_increment,
  `modele` varchar(50) NOT NULL,
  `idMarque` tinyint(4) default NULL,
  PRIMARY KEY  (`id`)
) ;
 
insert into `modele` values 
(1,'CR125R',1),
(2,'CR250R',1),
(3,'CRF250R',1),
(4,'CRF450R',1),
(5,'KX125',2),
(6,'KX250',2),
(7,'KX250F',2),
(8,'KX450F',2),
(9,'125SX',3),
(10,'144SX',3),
(11,'150SX',3),
(12,'250SX',3),
(13,'250SX-F',3),
(14,'350SX-F',3),
(15,'450SX-F',3),
(16,'RM125',4),
(17,'RM250',4),
(18,'RM-Z250',4),
(19,'RM-Z450',4),
(20,'YZ125',5),
(21,'YZ250',5),
(22,'YZ250F',5),
(23,'YZ450F',5);
 
CREATE TABLE `annee` (
  `id` tinyint(4) NOT NULL auto_increment,
  `annee` varchar(50) NOT NULL,
  `idModele` tinyint(4) default NULL,
  PRIMARY KEY  (`id`)
) ;
 
insert into `annee` values 
(1,'2007',1),
(2,'2006',1),
(3,'2005',1),
(4,'2004',1),
(5,'2008',2),
(6,'2007',2),
(7,'2006',2),
(8,'2005',2),
(9,'2015',3),
(10,'2014',3),
(11,'2013',3),
(12,'2012',3),
(13,'2011',3),
(14,'2010',3),
(15,'2009',3),
(16,'2015',4),
(17,'2014',4),
(18,'2013',4),
(19,'2012',4),
(20,'2015',5),
(21,'2014',5),
(22,'2013',5),
(23,'2012',5);

le fichier : marque.php

Code html :

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 
		<title>SUSPENSION SPRING RATE</title>
		<script type='text/javascript'>
 
                        function getXhr(){
                                var xhr = null; 
                                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; 
                                } 
                                return xhr;
                        }
 
                        /**
                        * Méthode qui sera appelée sur le click du bouton
                        */
                        function go(){
                                var xhr = 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('modele').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open("POST","ajaxModele.php",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 l'auteur
                                sel = document.getElementById('marque');
                                idmarque = sel.options[sel.selectedIndex].value;
                                xhr.send("idMarque="+idmarque);
                        }
                </script>
	</head>
	<body>
		<form>
			<fieldset style="width: 570px">
				<legend>Sélection moto</legend>
				<label>Marque</label>
				<select name='marque' id='marque' onchange='go()'>
					<option value='-1'>Aucune</option>
					<?
                                                mysql_connect("###.mysql.db","###","###");
                                                mysql_select_db("###");
                                                $res = mysql_query("SELECT * FROM marque ORDER BY nom");
                                                while($row = mysql_fetch_assoc($res)){
                                                        echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
                                                }
?>
				</select>
				<label>Modèle</label>
				<div id='modele' style='display:inline'>
				<select name='modele'>
					<option value='-1'>Choisir un modèle</option>
				</select>
 
				<label>Année</label>
				<div id='annee' style='display:inline'>
				<select name='annee'>
					<option value='-1'>Choisir une année</option>
				</select>
 
				</div>
			</fieldset>
		</form>
	</body>
</html>

le fichier ajaxModele.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='modele'>";
	if(isset($_POST["idMarque"])){
		mysql_connect("###.mysql.db","###","###");
		mysql_select_db("###");
		$res = mysql_query("SELECT id,modele FROM modele 
			WHERE idMarque=".$_POST["idMarque"]." ORDER BY modele");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["modele"]."</option>";
		}
	}
	echo "</select>";
?>

et enfin le fichier ajaxAnnee.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='annee'>";
	if(isset($_POST["idModele"])){
		mysql_connect("###.mysql.db","###","###");
		mysql_select_db("###");
		$res = mysql_query("SELECT id,annee FROM annee 
			WHERE idModele=".$_POST["idModele"]." ORDER BY annee");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["annee"]."</option>";
		}
	}
	echo "</select>";
?>

alors oui une erreur j'ai fait, mais je ne sais pas ou car j'y vais un peu au pif avec le peu d'infos que je trouve

et pour la redirection vers une page, bein idem !!! je suis perduxxx

**Kreepz** · 18/02/2015, 08h25

Bonjour,

Alors tu dis à ta première liste onchange='go()' c'est bien, mais pour les autres listes, quand tu vas choisir un élèment de l'une d'elle que se passe t'il ? A aucun moment tu ne leurs dis pour Modèle et Année que faire sur un onchange.

Pour modèle c'est la même chose que pour marque et pour année il faudrait que tu lui dise d'aller chercher la page qui correspond aux choix effectués.

**Silverbox** · 18/02/2015, 17h45

Merci bien

en fait je n'ai fais que copier bêtement un tuto, j'ai juste changer le nom des "régions" et "départements" , mais si déjà il y a une erreur dans le codage, c'est sur que ça ne m'aide pas et ceux qui sont comme moi et qui débuttent la dedans

donc je vais essayer de voir ou il faut rajouter çà : onchange='go()' et quoi faire pour que ça fonctionne.
encore du creusage de tête en perspective pour moi, mais merci pour la piste à suivre

comme d'ab je tiens au jus.

**Silverbox** · 18/02/2015, 21h44

bon alors j'ai essayer çà dans mon fichier modele et mon fichier année et maintenant le modèle revient automatiquement sur le 1er de la liste, et les années ne s'affichent toujours pas, et même résultat ensuite tout disparait sauf la marque

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
echo "<select name='modele' id='modele' onchange='go()'>";
if(isset($_POST["idMarque"])){
	mysql_connect("####.mysql.db","####","####");
	mysql_select_db("####");
	$res = mysql_query("SELECT id,modeles FROM modele 
		WHERE idMarque=".$_POST["idMarque"]." ORDER BY modeles");
	while($row = mysql_fetch_assoc($res)){
		echo "<option value='".$row["id"]."'>".$row["modeles"]."</option>";
	}
}
echo "</select>";
?>

**Kreepz** · 19/02/2015, 08h51

Ta fonction go() a l'air de ne remplir de ne fonctionner que pour générer le <select> du modèle.
Et ce que tu souhaite c'est générer le <select> de l'année en plus.

Je pense qu'il faut que tu fasse soit une seconde fonction, soit que tu la complète pour qu'elle fonctionne pour tes deux select.
Mais si tu veux faire au plus simple pour toi tu fais une fonction goAnnee() par exemple en t'aidant du code de l'autre fonction.

Et dans ton ajaxModele.php :

Code :

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

1
2
echo "<select name='modele' id='modele' onchange='goAnnee()'>";

**Silverbox** · 19/02/2015, 16h55

Ok merci

heureusement qu'il y a encore sur terre des personnes qui ont des connaissances et qui aiment partager

je vais essayer çà , on va y arriver à force. c'est vrai que c'est difficile quand on ne comprend pas, sur un autre forum c'est moi qui aide les autres, là je me sent heuu comment dire .... Très nul (ce que je suis dans ce domaine :p )

aller, je vais essayer et je te dis la suite

**Silverbox** · 19/02/2015, 21h14

bon bein je ne dois pas faire comme il faut, j'ai essayer 200 trucs différents et ça ne change rien

**Kreepz** · 20/02/2015, 09h20

Le mieux ce serait que tu montre ce que tu as essayé?

**Silverbox** · 20/02/2015, 17h01

Ok, mais je ne voudrais pas faire de pub pour mon site

c'est sur que pour comprendre, le mieux c'est de poster alors voilà ma page en question.

http://www.maxxracing.fr/spring/index/marque.php

donc là quand on arrive sur la page, c'est ok au niveau des choix puis > on choisis la marque (c'est encore ok) et s'affiche la liste des modèles, là aussi c'est ok mais en même temps la liste des années disparait

hors il faudrait pouvoir choisir une année et dès qu'une année est choisie, que l'on soit rediriger vers la page qui concerne la moto en question, celle que l'on a choisie.

ensuite dans cette dernière page je ferais un petit formulaire qui permettra d'affiner la recherche, mais déjà il faut que je puisse franchir cette 1ère étape des 3 listes liées.

**Silverbox** · 21/02/2015, 14h55

Olé

bon hier soir, en continuant à chercher sur le net, j'ai trouver un truc qui m'a + ou - indiquer comment je pourrais m'en sortir, j'ai tester et oh miracle, j'ai maintenant mes 3 listes qui vont être cherchées dans ma bdd par les 3 menus déroulant. Youpi !!

voir ici : http://www.maxxracing.fr/spring/index/bis/index.php

alors maintenant une autre question, comment faire pour quele choix d'une année pour un modèle d'une marque, me redirige directement vers une page avec les infos de cette moto ?

autre chose, la liste des années est inversée, je voudrais que la 1ère année affichée soit par exemple: 2015 à 2000 et pas 2000 à 2015, je dois toucher quelque chose ou çà ??

enfin un dernier bug, quand je met le menu déroulant "marque" sur "aucune" il me vire les info du menu "modèle" alors que j'aimerais qu'il revient sur choix, et de même pour l'année ça serait top.

en tout cas, une lueur d'espoir en ce jour pluvieux.

[AJAX] Mise en place de listes liées

AJAX

Discussions similaires

Partager

Partager