Bonjour à tous,
Etant newbie en Javascript, je dois toutefois créer une interface permettant de faciliter l'extraction des données INSEE. A ce titre, pour faciliter l'ergonomie du site en question, je suis amener à utiliser le javascript et je bloque depuis quelques jours sur un paramétrage.
Je précise que je prends également mon temps car j'en profite pour apprendre les différents rouages du langage à travers livres et vidéos.
Voici les informations qui je pense vous seraient utiles :
- Bibliothèque Jquery derniere version à cette date, Bootstrap (pour le côté responsive) et HTML5, CSS
L'objectif de ce que je souhaite faire :
J'ai un formulaire avec 11 checkboxs. Quand je coche ou decoche dans ce formulaire, cela cache dans le DOM un autre formulaire groupé en article et reprenant en identifiant le valeur de chaque checkbox du thème. En d'autres termes, si on coche sur case (un thème), cela affiche tous les sous-themes de cette partie.
Voici le code html :
La div concernée des thèmes :
Les articles englobant les sous-thèmes :
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 <div id="insert-theme-2"> <form method="post" > <p class="theme">Choisissez le thème que vous souhaitez extraire <br/> <input type="checkbox" name="commerce" value="1"/><label for="commerce">Commerce</label></br> <input type="checkbox" name="conditionsociete" value="2"/><label for="conditionsociete">Conditions de vie-Société</label></br> <input type="checkbox" name="economie" value="3"/><label for="economie">Économie</label></br> <input type="checkbox" name="educ" value="4"/><label for="educ">Enseignement-Education</label></br> <input type="checkbox" name="entreprise" value="5"/><label for="entreprise">Entreprises</label></br> <input type="checkbox" name="population" value="6"/><label for="population">Population</label></br> <input type="checkbox" name="revenus" value="7"/><label for="revenus">Revenus-Salaires</label></br> <input type="checkbox" name="sante" value="8"/><label for="sante">Santé</label></br> <input type="checkbox" name="services" value="9"/><label for="services">Services-Tourisme-Transports</label></br> <input type="checkbox" name="territoires" value="10"/><label for="territoires">Territoire</label></br> <input type="checkbox" name="travail" value="11"/><label for="travail">Travail-Emploi</label></br> </p> </form> </div>
Voilà maintenant le fameux javascript qui retranscrit au mieux ce que je souhaite. J'ai fait d'autres essais avec des boucles plus alambiquées mais qui transcrivent moins mon souhait et le resultat que je souhaite obtenir.
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
77
78
79 <div class="row" id="sstheme" > <article class="col-sm-8" id="1"> <form method="post" > <input type="checkbox" name="commerce-detail" id="sous-theme-1" value="1"/><label for="commerce-detail">Commerce de détail</label></br> </form> </article> <article class="col-sm-8" id="2"> <form method="post" > <input type="checkbox" name="Logement" id="sous-theme-2" value="2"/><label for="Logement">Logement</label></br> <input type="checkbox" name="Vacances-Loisirs" id="sous-theme-3" value="2"/><label for="Vacances-Loisirs">Vacances - Loisirs</label></br> </form> </article> <article class="col-sm-8" id="3"> <form method="post" > <input type="checkbox" name="economie-general" id="sous-theme-4" value="3"/><label for="economie-general">Économie générale</label></br> <input type="checkbox" name="finances-publiques" id="sous-theme-5" value="3"/><label for="finances-publiques">Finances publiques</label></br> </form> </article> <article class="col-sm-8" id="4"> <form method="post" > <input type="checkbox" name="diplome-formation" id="sous-theme-6" value="4"/><label for="diplome-formation">Diplômes - Formation</label></br> <input type="checkbox" name="eleves-etab-enseignant" id="sous-theme-7" value="4"/><label for="eleves-etab-enseignant">Élèves, établissements et enseignants</label></br> </form> </article> <article class="col-sm-8" id="5"> <form method="post" > <input type="checkbox" name="caracteristique-entr-etab" id="sous-theme-8" value="5"/><label for="caracteristique-entr-etab">Caractéristiques des entreprises et établissements</label></br> <input type="checkbox" name="Demo-entreprises" id="sous-theme-9" value="5"/><label for="Demo-entreprises">Démographie des entreprises</label></br> </form> </article> <article class="col-sm-8" id="6"> <form method="post" > <input type="checkbox" name="evo-struct-pop" id="sous-theme-10" value="6"/><label for="evo-struct-pop">Évolution et structure de la population</label></br> <input type="checkbox" name="naissance-fecondite" id="sous-theme-11" value="6"/><label for="naissance-fecondite">Naissances - Fécondité</label></br> <input type="checkbox" name="deces-mortalite-esp" id="sous-theme-12" value="6"/><label for="deces-mortalite-esp">Décès - Mortalité - Espérance de vie</label></br> <input type="checkbox" name="menages" id="sous-theme-13" value="6"/><label for="menages">Couples - Familles - Ménages</label></br> </form> </article> <article class="col-sm-8" id="7"> <form method="post" > <input type="checkbox" name="salaires-revenus" id="sous-theme-14" value="7"/><label for="salaires-revenus">Salaires et revenus d'activités</label></br> <input type="checkbox" name="revenus-niveaudevie" id="sous-theme-15" value="7"/><label for="revenus-niveaudevie">Revenus - Niveaux de vie - Patrimoine</label></br> <input type="checkbox" name="pauvrete" id="sous-theme-16" value="7"/><label for="pauvrete">Pauvreté</label></br> </form> </article> <article class="col-sm-8" id="8"> <form method="post" > <input type="checkbox" name="personnels-equipements" id="sous-theme-17" value="8"/><label for="personnels-equipements">Personnels et équipements de santé</label></br> </form> </article> <article class="col-sm-8" id="9"> <form method="post" > <input type="checkbox" name="services-particulier" id="sous-theme-18" value="9"/><label for="services-particulier">Services aux particuliers</label></br> <input type="checkbox" name="tourisme" id="sous-theme-19" value="9"/><label for="tourisme">Tourisme</label></br> </form> </article> <article class="col-sm-8" id="10"> <form method="post" > <input type="checkbox" name="region-dep-villes" id="sous-theme-20" value="10"/><label for="region-dep-villes">Régions, départements et villes de France</label></br> </form> </article> <article class="col-sm-8" id="11"> <form method="post" > <input type="checkbox" name="emploi-popactive" id="sous-theme-21" value="11"/><label for="emploi-popactive">Emploi - Population active</label></br> <input type="checkbox" name="caracteristique-emploi" id="sous-theme-22" value="11"/><label for="caracteristique-emploi">Caractéristiques de l'emploi</label></br> <input type="checkbox" name="chomage" id="sous-theme-23" value="11"/><label for="chomage">Chômage</label></br> </form> </article> </div>
Ce code présente un bug puisque quand le theme 2 est coché sans que le theme 1 le soit, c'est le theme 1 qui s'affiche (je pense que c'est un problème d'évènement d'où mon titre).
// je me suis arrêté à 2 en observant déjà ce bug.
J'ai également essayer des boucles .each et for sans succès quand je manque encore de méthode et de la logique requise en développement.
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 var article1 = $('article')[0]; var article2 = $('article')[1]; var article3 = $('article')[2]; var article4 = $('article')[3]; var article5 = $('article')[4]; var article6 = $('article')[5]; var article7 = $('article')[6]; var article8 = $('article')[7]; var article9 = $('article')[8]; var article10 = $('article')[9]; var article11 = $('article')[10]; if($('.theme input:checked')[0]==undefined){$(article1).hide("slow");}else{$(article1).show("slow");} if($('.theme input:checked')[1]==undefined){$(article2).hide("slow");}else{$(article2).show("slow");}
Pourriez-vous m'apporter votre expérience pour que je puisse avancer dans mon apprentissage et sur ce projet? Je suis preneur de différentes méthodes pour essayer de comprendre cette logique et façon de faire et voir si mon hypothèse de départ sur les évènements est fondé.
En vous remerciant par avance,
Matthieu.
Partager