[AJAX] Mise en place de listes liées

Version imprimable

Voir 40 message(s) de cette discussion en une page

25/02/2015, 21h32
Silverbox

bon j'ai installer firebug, mais ceci est nouveau pour moi, et il ne me donne pas d'erreur sur mon index.php .

j'ai activer la console et cliquer sur Erreur, il ne m'affiche rien.

Il te faut commencer par corriger le HTML de ta page
- une ID doit être unique
- une DIV ne possède pas d'événement onchange, c'est sur les SELECT qu'il faut les mettre

en gros il faut que tu arrives à ça, c'est suffisant...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<fieldset style="width: 570px">
    <legend>SPRING RATE CALCULATOR</legend>
    <label>Marque</label>
    <select name='marque' id='marque' onchange='go()'>
        <option value='0'>Aucune</option>
        <option value='1'>HONDA</option>
        <option value='2'>KAWASAKI</option>
        <option value='3'>KTM</option>
        <option value='4'>SUZUKI</option>
        <option value='5'>YAMAHA</option>
    </select>
    <label>Modèle</label>
    <select name='modele' id='modele' onchange='go2()'>
        <option value="">Choisissez un modèle</option>
    </select>
    <label>Année</label>
    <select name='annee' id='annee' onchange="loadPage( this);">
        <option value="">Choisissez l'année</option>
    </select>
</fieldset>

A lire également : Maîtriser Firebug, l'indispensable extension Firefox pour le développement web

oui, comme c'était avant de faire la dernière modif que tu m'as donner pour ouvrir les pages.

mais alors ou je mets ce que tu m'as dit de mettre (voir ci dessous)
Code:

1 2 3 4 5 6 7 8 <option value="honda/125cr2007.html">2007</option> <option value="honda/125cr2006.html">2006</option> <option value="honda/125cr2005.html">2005</option> <option value="honda/125cr2004.html">2004</option> <option value="honda/125cr2003.html">2003</option> <option value="honda/125cr2002.html">2002</option> <option value="honda/125cr2001.html">2001</option> <option value="honda/125cr2000.html">2000</option>
etc etc ..... ???

y'a un truc que je pige pas :(

25/02/2015, 22h24
NoSmoking

ce code doit être généré dynamiquement lorsque tu fais ta requête via la fonction Go2() et mis dans le SELECT ID="annee" au retour, exactement comme tu l'as fait pour les modèles.

Citation:
Envoyé par NoSmoking
:zen: tu y es presque ;).

tu dois te retrouver avec un SELECT année qui devrait ressembler à cela, ce ne sont surement pas les vraies valeurs mais bon
Code:

1 2 3 4 5 6 7 <select onchange="loadPage( this);"> <option value="">Choisissez l'année</option> <option value="spring/honda/125cr2007.html">2007</option> <option value="spring/honda/125cr2008.html">2008</option> <option value="spring/honda/125cr2009.html">2009</option> <option value="spring/honda/125cr2010.html">2010</option> </select>
donc ??

:calim2:

25/02/2015, 22h31
Silverbox

ah !!
ok je vais voir comment j'ai fais pour modèle ;)

mais on est pas loin que ça fonctionne ;) héhé
25/02/2015, 22h41
NoSmoking

oui je sous entendais après requête donc... (manquais quand même l'ID :oops:)

:zen: tu touches au but ;).
25/02/2015, 23h28
Silverbox
re

bon alors j'ai supprimer ces lignes là (une en exemple ici)

Code:

<option value="spring/honda/125cr2007.html">2007</option>

dans cette partie, puisque je croyais que c'était là qu'il fallait les mettrent
Code:

1 2 3 4 5 <label>Année</label> <div id='annee2' style='display:inline'> <select onchange="loadPage( this);"> <option value="">Choisissez l'année</option> </select>
et maintenant le menu déroulant ANNEE n'affiche plus les années ..... GRRRR!!!!!!! :ptdr:
26/02/2015, 09h32
Bovino

Code:

<div id='annee2' style='display:inline'>

Une div en display inline, ça me rappelle vaguement quelque chose... :koi:
Ah, j'y suis, un <span> peut-être ! :aie:

Tu serais pas du genre à t'intéresser aux voitures qui n'ont que deux roues et un guidon à la place du volant ?
26/02/2015, 12h01
Silverbox

LOL ^^

bein oui je le dis depuis le début que c'est pour la moto :P

après je ne sais pas d'où çà vient, j'ai tellement chercher des tutos et autres infos pour arriverà m'en sortir, que j'ai copier/coller des codes pour tester, vu que je suis une bite dans ce domaine très complexe et je ne suis ABSolument pas dévellopeur ou programateur informatique.

bref quand je vais y arriver , je vais être super heureux, surtout qu'en plus là c'est juste la face visible de l'icberg, va y avoir tout le reste ensuite, mais le reste ne sera juste que de la duplication de page avec remplacement des infos, donc très long mais faisable pour mon niveau à raz les paquerettes :aie:

1 pièce(s) jointe(s)

Citation:
Envoyé par NoSmoking
Il te faut commencer par corriger le HTML de ta page
- une ID doit être unique
- une DIV ne possède pas d'événement onchange, c'est sur les SELECT qu'il faut les mettre

en gros il faut que tu arrives à ça, c'est suffisant...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <fieldset style="width: 570px"> <legend>SPRING RATE CALCULATOR</legend> <label>Marque</label> <select name='marque' id='marque' onchange='go()'> <option value='0'>Aucune</option> <option value='1'>HONDA</option> <option value='2'>KAWASAKI</option> <option value='3'>KTM</option> <option value='4'>SUZUKI</option> <option value='5'>YAMAHA</option> </select> <label>Modèle</label> <select name='modele' id='modele' onchange='go2()'> <option value="">Choisissez un modèle</option> </select> <label>Année</label> <select name='annee' id='annee' onchange="loadPage( this);"> <option value="">Choisissez l'année</option> </select> </fieldset>
A lire également : Maîtriser Firebug, l'indispensable extension Firefox pour le développement web
Je suis comme le Terminator, je reviens car je n'ai jamais terminer :p lol

bon bref après cette petite ligne humoristique histoire de décompresser un peu, j'ai donc fait ce que tu m'écris juste au dessus.

et voilà le résultat :-( putainnnnnn j'en peux plusssss . :ptdr:

Pièce jointe 170228

26/02/2015, 21h10
NoSmoking
Citation:
Code:

1 2 3 4 5 <label>Année</label> <div id='annee2' style='display:inline'> <select onchange="loadPage( this);"> <option value="">Choisissez l'année</option> </select>

et maintenant le menu déroulant ANNEE n'affiche plus les années ..... GRRRR!!!!!!! :ptdr:
regarde bien le code que je t'ai proposé
Code:

1 2 3 4 <label>Année</label> <select name='annee' id='annee' onchange="loadPage( this);"> <option value="">Choisissez l'année</option> </select>
je dirais que tu manques d'ID,:ptdr:, sur le dernier SELECT.

Si tu as respecté ce code aucune raison que, avec le code que tu nous a montré jusque là, cela ne fonctionne pas.
26/02/2015, 22h11
Silverbox

ouhlaaa !!! bon j'ai mis ton dernier code

alors maintenant la moitiée des années ne s'affiche plus, et les pages de celles qui s'affichent sont rediriger vers des n° (souvent les mêmes) et pas vers mes pages html de chaque modèles.

heuuuu !!!!!
27/02/2015, 19h15
Silverbox

Bon j'ai remis comme c'était les années sont revenues.

alors maintenant çà marche à peu près, reste que quand je choisis une année, je suis rediriger sur une page avec un chiffre et non l'url que j'ai mis dans la bdd.

exemple : http://www.maxxracing.fr/spring/32
et donc affichage de

Not Found

The requested URL /spring/32 was not found on this server.

et par exemple je retrouve ce n° 32, pour un autre modèle de marque et année différente ?? hummm.

si je crée une page 32.html et que je la met dans le dossier "spring" j'aurais la page en fonction du modèle, mais elle s'affichera aussi pour un autre modèle et marque ?? qui aura je ne sais pourquoi la même id alors que ce n'est pas le cas dans ma bdd, j'ai refais 3 fois le listage et tout est ok, pas de duplication d'id etc..

a oui aussi autre chose, je voudrais que lorsque je choisis la marque, que ça ne m'ouvre pas automatiquement la liste modèle sur le 1er modèle de la liste, car dans ce cas ça ne m'ouvre pas aussi directement les années, donc par exemple j'ouvre Honda, ça ouvre directement CR125R et la dans année, rien ne s'ouvre automatiquement, mais pour pouvoir ouvrir la liste année du modèle CR125R je suis obliger de changer de modèle et de revenir sur CR125R pour que la liste année s'ouvre (et elle se mets automatiquement sur la 1ere année), ce que j'aimerais éviter aussi car sinon la également je suis obliger de changer d'année et revenir pour pouvoir être rediriger sur la page.

alors je veux que Marque filtre les modèles qui eux filtrent les années, mais que modéle et année ne s'ouvrent pas automatiquement, pour pouvoir faire la sélection directe et pas faire des aller/venus entre les modèles et années pour pouvoir choisir ce que l'on veut et donc perdre du temps et faire fuir le visiteur.
27/02/2015, 19h22
Silverbox

ensuite : pourquoi je ne tombe pas à l'ouverture d'une page, dans son dossier et url, comme spécifié dans ma bdd.

exemple pourquoi : Honda - CR125R - 2007
s'ouvre dans /spring/1
au lieu de /spring/honda/125cr2007.html

???

et pour finir j'aimerais que modèle ne disparaisse pas quand on change de marque, ou là il faut réactualiser la page pour avoir des menus de départ.
28/02/2015, 10h27
NoSmoking

Pourrais tu nous mettre à jour un lien que l'on ait une vue d'ensemble de la situation actuelle, je dois admettre que je me perds un peu dans l'évolution vers la solution.
28/02/2015, 16h31
Silverbox

j'ai déjà poster le lien, mais tiens le revoilà
c'est simple et tu vas comprendre direct ce qui cloche ;)

http://www.maxxracing.fr/spring/

Après relecture de la discussion, ... une pause..., je crois qu'il est bon de reprendre quand même la chronologie des choses.

On va commencer par le HTML qui, et je l'avais zappé, n'est pas adapté à Explorer qui interdit d'accéder au HTML d'un SELECT et comme de plus tu renvoies le code HTML complet du SELECT, <select >... </select>, cela va forcément coincer à un moment ou à un autre.

Donc il faut encapsuler tes différents SELECT dans des éléments qui eux seront modifiés lors de tes appels.

Voila le HTML que je te propose
Code:

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 <body> <form> <fieldset> <legend>SPRING RATE CALCULATOR</legend> <label>Marque</label> <span id="span_marque"> <select id="marque" onchange="go()"> <option value=''>Aucune</option> <?php mysql_connect( "monsite.mysql.db", "monlogin", "monmotdepasse"); mysql_select_db( "mabasededonnee"); $res=m ysql_query( "SELECT * FROM marque ORDER BY nom"); while($row=m ysql_fetch_assoc($res)){ echo "<option value='".$row[ "id"]. "'>".$row[ "nom"]. "</option>"; } ?> </select> </span> <label>Modèle</label> <span id="span_modele"> <select id="modele" onchange="go2()"> <option value="">Choisissez un modèle</option> </select> </span> <label>Année</label> <span id="span_annee"> <select id="annee" onchange="loadPage( this);"> <option value="">Choisissez l'année</option> </select> </span> </fieldset> </form> </body>
Maintenant il faut modifier légèrement tes fonctions de requête Ajax pour tenir compte de cette structure, ajout dans les SPAN des SELECT en retour. Tu pourras observer que dans la fonction go(), j'ai rajouté un "nettoyage" du SELECT année, regardes j'ai commenté le code à ces endroits.
Code:

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 function getXhr() { var xhr = null; if (window.XMLHttpRequest) xhr = new XMLHttpRequest(); else if (window.ActiveXObject) { try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } function go(){ var xhr = getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ leselect = xhr.responseText; // on remplace le contenu actuel du SPAN modele par le new SELECT modele document.getElementById('span_modele').innerHTML = leselect; // on remplace le contenu actuel du SPAN annee par le new SELECT annee leselect = '<select id="annee" onchange="loadPage( this);"><option value="">Choisissez l\'année</option></select>'; document.getElementById('span_annee').innerHTML = leselect; } } xhr.open("POST","modele.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); oSel = document.getElementById('marque'); xhr.send("idMarque=" +oSel.value); } function go2(){ var xhr = getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ leselect = xhr.responseText; // on remplace le contenu actuel du SPAN annee par le new SELECT annee document.getElementById('span_annee').innerHTML = leselect; } } xhr.open("POST","annee.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); oSel = document.getElementById('modele'); xhr.send("idModele=" +oSel.value); } function loadPage( obj){ // obj est le select qui à déclenché la fonction if( obj.value !==""){ // si valeur indiquée, donc pas "Choisissez l'année" window.location = obj.value; // on redirige vers la page mentionnée dans value } }
Il reste à regarder du coté du PHP, il devient IMPERATIF que tu renvoies les bonnes informations.

J'ai vu que dans le retour de modele.php on obtenait...

Code:

<select name='modele' id='modele' onchange='goAnnee()'><option value='16'>RM125</option><option value='...

...la fonction goAnnee n'étant pas définie cela plantera.
Il te faut donc pour modele.php retourner

Code:

<select name='modele' id='modele' onchange='go2()'><option value="">Choisissez un modèle</option><option value='16'>RM125</option><option value='...

modification du nom de la fonction et ajout d'une OPTION vide autorisant le change sur la sélection en première position.

Traitons le cas de annee.php, voilà le retour que l'on obtient, par exemple

Code:

<select name='annee' id='annee' ><option value='159'>2009</option><option value='160'>2008</option><option value='...

ce retour est incorrect.

Il faut faire référence à la fonction de redirection, loadPage(), ajouter une OPTION vide autorisant le change sur la sélection en première position ET surtout ne pas renvoyer des value='12' mais contenant la référence du fichier à afficher par exemple

Code:

<select id="annee" onchange="loadPage( this);"><option value="">Choisissez l'année</option> <option value="spring/honda/125cr2007.html">2007</option>

Attention au chemin de tes fichiers par rapport à ton fichier HTML, celui qui fait tes requêtes.

Voilà normalement cela devrait fonctionner si je n'ai pas fais de coquille. (Chaque détail peut avoir son importance!)

[EDIT] Correction coquille dans code.

01/03/2015, 22h17
Silverbox

Bonsoir ;)

et bien c'est vraiment cool de ta part, il est vrai que je ne savais pas trop dans quel ou quel fichier il fallait agir, là c'est carrément plus clair.
je vais donc essayer tout cela dessuite ;)

sinon une question (c'est juste pour savoir) comment fais tu pour voir çà ?? quand tu parle de retour..

Code:

<select name='modele' id='modele' onchange='goAnnee()'><option value='16'>RM125</option><option value='...

je ne sais pas comment voir ce genre d'infos et ça me servirais sans doute je pense pour plus tard ;)

sinon tu parles d'explorer mais perso j'utilise firefox, mais bon c'est sur il faut que ça marche au moins sur les 2 ;)

bon aller, je vais faire les modifs et je te tiens au jus ;)

bonne fin de dimanche soir ;)
01/03/2015, 23h15
Silverbox

pour modele.php et annee.php c'est bien dans ces deux fichiers que je dois modifier hein ?? pas dans index.php !!!

et je mets çà après echo "

?

Voir 40 message(s) de cette discussion en une page