Discussion :

[Invité]

Salut à tous, comme mon titre l'indique je possède dans mon formulaire un champ pour sélectionner une catégorie, je voudrais maintenant qu'un autre select apparaisse après avoir sélectionné une des catégories. Un autre select qui contient des sous-categories.

A savoir mes categories et sous categories sont dans des tables différentes.

Voici ce que j'ai réussi à faire pour le moment ...

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
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js" /></script>
<script type="text/javascript">
 
$('#incident_category_id').on('change', function() { //WHEN USER CHANGES FIRST OPTION
var fromVal = $(this).val(); //MAKE VARIABLE OF SELECTED CHOICE
document.write("Test");
 
var myDiv = document.getElementById("myDiv");
 
//Create array of options to be added
 
foreach($db->query("SELECT * FROM sous_categories WHERE categorie_id = '$fromVal'") as $row) {
     $array[] = array("id" => $row['id'], "name" => $row['name']);
};
//Create and append select list
var selectList = document.createElement("select");
selectList.id = ("mySelect");
myDiv.appendChild(field);
 
//Create and append the options
for (var i in array) {
    var option = document.createElement("option");
    option.value = array[o[i]];
    option.text = array[i];
    selectList.appendChild(option);
});
});
});
</script>
</script>

Je suis débutant en Javascript, d'ailleurs je n'en avait jamais fait avant aujourd'hui...
Il faut savoir que les sous categories sont reliées aux categories par un identifiant. L'appli est en Rails.

Merci beaucoup !

[Diablo_22]

Bonjour,

voici un exemple de base en pur JS. Tu nous dit pas si tu utilise un framework JS (jquery ou autres)

LIVE DEMO...!!!

[Invité]

Merci à toi @Diablo_22,

voici le code complet de mon formulaire en Rails :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<%= form_for(@incident) do |f| %>
  <% if @incident.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@incident.errors.count, "error") %> prohibited this incident from being saved:</h2>
 
      <ul>
      <% @incident.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
 
  <div class="field">
    <%= f.label "Titre" %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label "Contenu" %><br>
    <%= f.text_field :content %>
  </div>
  <div class="field" style="display: none;">
    <%= f.label "Nom d'utilisateur" %><br>
    <%= select_tag("incident[user_id]", options_for_select(User.find_by_sql("SELECT `users`.* FROM `users` WHERE `id` = #{current_user.id}").collect{ |u| [u.name, u.id]})) %>
  </div>
  <div class="field">
    <%= f.label "Catégorie de l'incident" %><br>
    <%= cat_select = select_tag("incident[category_id]", options_for_select(Category.find_by_sql("SELECT `categories`.* FROM `categories`").collect{ |u| [u.name, u.id]}))%>
  </div>
  <div id="field">
    <%= f.label "Sous_Catégorie de l'incident" %><br>
    <%= cat_select = select_tag("incident[sous_category_id]", options_for_select(SousCategory.find_by_sql("SELECT `sous_categories`.* FROM `sous_categories` ").collect{ |u| [u.name, u.id]}))%>
  </div>
  <div class="field" style="display: none;">
    <%= f.label "Type de l'évenement"%>
    <%= f.number_field :evenement_type_id, :value => 1 %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>
 
 
 
 
<!--
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js" /></script>
<script type="text/javascript">
$('#incident_category_id').on('change', function() { //WHEN USER CHANGES FIRST OPTION
var fromVal = $(this).val(); //MAKE VARIABLE OF SELECTED CHOICE
document.write("Test");
 
var myDiv = document.getElementById("field");
 
//Create array of options to be added
 
foreach($db->query("SELECT * FROM sous_categories WHERE categorie_id = '$fromVal'") as $row) {
};
    var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.id = ("incident_sous_category_id");
myDiv.appendChild(selectList);
 
//Create and append the options
for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.setAttribute("value", array[i]);
    option.text = array[i];
    selectList.appendChild(option);
});
});
});
</script>
</script>
-->

Je ne sais pas si j'utilise un quelqu'onque framework, je suis débutant donc si je peux utiliser JS pur ce sera peut être plus simple.
Et puis, le code que tu ma donné est tout à fait ce que je voudrais réaliser mais ne correspond pas trop à mon cas puisque je récupère mes sous-categories par une requête sql et avec ta méthode je ne peux pas faire ça... En bref, je voudrais qu'il me crée le formulaire de selection lui même par rapport aux résultats de la requête sql...


EDIT : Je viens de voir que mon message n'était peut être pas très clair.

Mon application (encore et toujours de gestion de tickets d'incidents) contiendra des catégories au départ mais on pourra en rajouter autant qu'on en veux, idem pour les sous-catégories. Donc je ne peux pas faire comme tu m'as montré. Il faudrait que lorsque l'utilisateur sélèctionne une catégorie, l'appli fasse une requête SQL pour trouver les sous-catégories correspondantes.

[Diablo_22]

va falloir associé du Jquery/JSON pour faire tes requêtes via RAILS et afficher les resultats dans les différentes listes

Exemple

[Invité]

J'ai beau lire, relire, je n'y comprends pas grand chose, tu peux m'expliquer ?

[Diablo_22]

L'application que tu développe c'est une application qui existe avant et que tu améliore ou c'est une application que tu as crée toi même ..?

[Invité]

Moi même =)

D'ailleurs j'ai peut être trouvé une autre façon de faire :

Code :

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

    <%= cat_select = select_tag("incident[category_id]", options_for_select(Category.find_by_sql("SELECT `categories`.* FROM `categories`").collect{ |u| [u.name, u.id]}), :onchange =>"parent.location='javascript:location.reload()'")%>

En gros, quand l'utilisateur choisi la catégorie, la page recharge avec les sous categories qui s'afficheront =) tu crois que c'est pas mal ?

EDIT : J'arrive à faire recharger la page mais pas à récupérer la valeur pour l'intégrer à la requête pour la sous-categorie, j'ai pensé à faire ça avec l'attribut selected mais comment faire pour l'attribuer en javascript ?

[kolodz]

Bonjour,

Il y a plusieurs solutions technique à ton problème.

Le premier serai d'avoir l'ensemble des sous-catégorie déjà présent dans la page sous forme de variable JavaScript. Puis, de remplir la liste de la sous catégorie en fonction de la catégorie.

Si on suppose qu'on a une liste de liste des sous catégorie en javascript :

Code javascript :

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

1
2
sousCategories = {1 : { "1": "Cat 1 Sous-cat 1", "2": "Cat 1 Sous-cat 12" },
               2 : { "1": "Cat 2 Sous-cat 1", "2": "Cat 2 Sous-cat 2" }};

Sur l’événement de changement de valeur sur la catégorie. Il suffit d’exécuter le script suivant :

Code javascript :

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

1
2
3
4
5
6
7
8
var codeCategorie =2 ;
var identifiantSelectSousCategorie = '#toto';
$(identifiantSelectSousCategorie ).empty();
$.each(sousCategories[codeCategorie], function(key, value) {   
     $(identifiantSelectSousCategorie)
          .append($('<option>', { value : key })
          .text(value)); 
});

Au final, on se retrouve avec le code HTML suivant :

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
<html>
	<body>
		<!-- utilisation de JQuery via google api -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<select id="cat">
			<option value="1">Cat A</option>
			<option value="2">Cat B</option>
		</select>
		<select id="souscat"></select>
 
	<script>
                var sousCategories = {  "1" : { "1": "Cat 1 Sous-cat 1", "2": "Cat 1 Sous-cat 12" },
                                                        "2" : { "1": "Cat 2 Sous-cat 1", "2": "Cat 2 Sous-cat 2" }};
                $( "#cat" ).change(function() {
                        var codeCategorie =$( "#cat" ).val() ;
                        var identifiantSelectSousCategorie = '#souscat';
                        // on vide la liste
                        $(identifiantSelectSousCategorie ).empty();
                        // Affichage des valeurs en console si besoin
                        //console.log(sousCategories);
                        //console.log(codeCategorie);
                        //console.log(sousCategories[codeCategorie]);
                        // On charge les nouvelles valeurs
                        $.each(sousCategories[codeCategorie], function(key, value) {   
                                 $(identifiantSelectSousCategorie)
                                          .append($('<option>', { value : key })
                                          .text(value)); 
                        });
                });
                // On déclange l'événement du changement sur le select de la catégorie.
                $( "#cat" ).trigger("change");
        </script>
	</body>
</html>

Cela est la solution la plus classique. Certaines solutions vont aller chercher les sous catégorie via une requête au lieu de la récupérer directement d'une variable. Cependant, cela n'est pour le moment pas à ta porté. Du moins sans un minimum de formation.

Cordialement,
Patrick Kolodziejczyk.

[Invité]

Salut,

Le problème c'est que j'ai besoin de récupérer les sous catégories dans ma table SQL. Car dans ta solution, le seul moyen de rajouter des sous-catégories c'est de les rajouter dans le code ... Hors il faut qu'on puisse les rajouter automatiquement via un formulaire qui les stockera dans la table SQL...

Hors je ne sais pas comment faire pour les récupérer et les stocker dans une variable.

Merci

EDIT :

C'est bon j'ai réussi à récupérer la valeur dans une variable :

Code :

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

1
2
3
4
5
6
7
8
<script>
function recupere_valeur() {
select = document.getElementById("incident_category_id");
choice = select.selectedIndex;  // Récupération de l'index du <option> choisi
 
valeur_cherchee = select.options[choice].value;
 // Récupération du texte du <option> d'index "choice"
</script>

Seulement maintenant je ne sais pas comment faire pour l'envoyer à Rails. Je ne peux donc pas l'afficher...

J'ai vu qu'il fallait utiliser AJAX, je cherche encore ... Merci beaucoup !

[kolodz]

C'est la partie qui n'est pas de ton niveau dont je parlais.

Basiquement, tu veux récupérer un fichier au format JSON qui contient les sous catégorie d'un catégorie spécifique.

Dans l'exemple précédent, cela était réalisé par l'accès à un tableau:

Code :

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

var souscat = sousCategories[codeCategorie];

Il faut remplacer cela par un appel Ajax (asynchronous JavaScript and XML) :

Via JQuery cela est relativement simple. Par exemple, ce code réalise une requête html qui récupère le contenu de url et le transforme en une variable JavaScript en considérant que celui-ci respecte le format JSON

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var jqxhr = $.getJSON( "http://ip.jsontest.com/", function(data) {
  console.log( "success" );
  console.log( data );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

Documentation ici : http://api.jquery.com/jquery.getjson/

Dans ton cas, il faut que tu personnalise l'URL appelé pour indiquer la catégorie dont tu veux les sous catégorie :

Code :

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

1
2
3
4
5
6
7
var codeCategorie = 2;
var baseURL = "http://monsite.fr/mapageQuiDoneLesSousCat"
var URL = baseURL+"?+$.param( {"cat" : codeCategorie} );
var jqxhr = $.getJSON( "monURLDeBase", function(data) {
  var souscat = data;
  // ICI il faut utilisé la variable récupéré pour mettre à jour correctement ta page.
});

Pour ce qui concerne la partie serveur. Cela est une autre question qu'il faudra poser dans le forum concerné.

Cordialement,
Patrick Kolodziejczyk.

[Invité]

Je viens juste de voir ta réponse Patrick, et tu as raison c'est un peu poussé, ais j'ai édité mon ancien message avec peut etre une solution que j'ai trouvé...

Merci de me répondre =)

[kolodz]

Ton code

Code javascript :

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

1
2
3
4
5
6
7
 
function recupere_valeur() {
select = document.getElementById("incident_category_id");
choice = select.selectedIndex;  // Récupération de l'index du <option> choisi
 
valeur_cherchee = select.options[choice].value;
 // Récupération du texte du <option> d'index "choice"

Corresponds à (en utilisant jQuery):

Code javascript :

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

var codeCategorie =$( "#incident_category_id" ).val() ;

Plus propre, plus simple.

[Invité]

Merci beaucoup mais je ne sais toujours pas comment la récupérer dans rails pour l'analyser ...

[SylvainPV]

La question initiale a été répondue. Les questions qui restent en suspens concernent la partie back-end, elles sont donc hors contexte de cette section.

Pour continuer, il va falloir te former aux technologies que tu utilises, à savoir dans son cas Rails.

Je te redirige donc vers nos ressources existantes sur le sujet : http://ruby.developpez.com/cours/

[NoSmoking]

Bonjour,

Corresponds à (en utilisant jQuery):
var codeCategorie =$( "#incident_category_id" ).val() ;.
Plus propre, plus simple.

Code :

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

var codeCategorie =document.getElementById('incident_category_id' ).value;

c'est simple et propre aussi