[AJAX] Mise en place de listes liées

**Silverbox** · 25/02/2015, 21h32

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.

**NoSmoking** · 25/02/2015, 21h47

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 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
<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

**Silverbox** · 25/02/2015, 22h02

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 html :

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

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

**NoSmoking** · 25/02/2015, 22h24

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.

**Silverbox** · 25/02/2015, 22h30

Envoyé par NoSmoking

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 html :

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

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 ??

**Silverbox** · 25/02/2015, 22h31

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

mais on est pas loin que ça fonctionne

héhé

**NoSmoking** · 25/02/2015, 22h41

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

tu touches au but

.

**Silverbox** · 25/02/2015, 23h28

re

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

Code html :

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

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

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

Code html :

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

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!!!!!!!

**Bovino** · 26/02/2015, 09h32

Code html :

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

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

Une div en display inline, ça me rappelle vaguement quelque chose...

Ah, j'y suis, un <span> peut-être !

Tu serais pas du genre à t'intéresser aux voitures qui n'ont que deux roues et un guidon à la place du volant ?

**Silverbox** · 26/02/2015, 12h01

LOL ^^

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

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

**Silverbox** · 26/02/2015, 18h52

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 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
<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 .

Nom : Sans titre.jpg
Affichages : 119
Taille : 38,3 Ko

**NoSmoking** · 26/02/2015, 21h10

Code html :

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

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!!!!!!!

regarde bien le code que je t'ai proposé

Code html :

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

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,

, 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.

**Silverbox** · 26/02/2015, 22h11

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 !!!!!

**Silverbox** · 27/02/2015, 19h15

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.

**Silverbox** · 27/02/2015, 19h22

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.

**NoSmoking** · 28/02/2015, 10h27

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.

**Silverbox** · 28/02/2015, 16h31

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/

**NoSmoking** · 01/03/2015, 20h24

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 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
<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 :

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
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 html :

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

<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 html :

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

<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 html :

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

<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 html :

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

<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.

**Silverbox** · 01/03/2015, 22h17

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 :

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

<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

**Silverbox** · 01/03/2015, 23h15

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 "

?

[AJAX] Mise en place de listes liées

AJAX

Discussions similaires

Partager

Partager