Bonjour à toutes et à tous,
Après plusieurs tentatives infructueuses d'implantation de l'élégante solution proposée par M. Denis Chenu, j'en appel à vous pour m'aider à limiter l'affichage d'une liste déroulante en tenant compte de la réponse à une question précédente. La documentation disponible est éparse et les instructions sont hors de portée pour un 'méga nul' comme moi. M. Chenu précise, avec raison d'ailleurs, qu'il n'a pas de temps à mettre pour mettre en place la documentation. Si on m'aide à résoudre mon problème, je m'engage à produire un petit tuto, très explicite, qui règlera le problème une fois pour toute. Voilà pour le préambule. Passons à mon problème.
Ce que j'ai en main :
- Le paramétrage correct du questionnaire afin que le javascript puisse s'exécuter : Paramètres généraux - Sécurité - Filter HTML for XSS = NON
- L'excellent javascript nommé selectfilter.js fourni par M. Chenu (License libre sous MIT) qui y a programmé la fonction : selectFilterByCode(qID,filterqID)
- Une question (Question 1) avec menu déroulant. La réponse à cette question source servira d'élément de filtre pour la la prochaine question (Question 2). Le code des choix est A, B, C, D...
- Une question (Question 2) avec menu déroulant dont l'affichage des choix est réglé en fonction de la réponse à la question 1. Le code des choix est A01, A02, B01, B02, B03, C01 ..
- Un petit javascript qui, placé dans la question 2, invoque la fonction selectFilterByCode(qID,filterqID)
- Un peu d'information qui indique où mettre le javascript, où mettre le petit code qui invoque la fonction
Mes deux principaux problèmes sont : où placer le javascript qui contient la fonction et surtout quels sont les arguments à mettre dans la fonction appelante ?
Pour l'endroit où mettre le javascript, on parle de template.js
Après avoir fait une recherche dans le répertoire limesurvey de mon serveur Centos, j'ai trouvé autant de template.js qu'il y a de modèles. Quoi qu'il en soit, j'aimerais intégrer la fonction dans le script qui l'appelle comme ceci :
Choisissez un élément.
<script type="text/javascript" charset="utf-8">
/*
Copyright 2012 Denis Chenu for <
www.sondages.pro
>
...
function selectFilterByCode(qID,filterqID){
$(document).ready(function(){
var idSelectFilter = $("#question"+qID).find("select").attr('id');
$("#"+idSelectFilter).hide();
var idSelectFiltering = $("#question"+filterqID).find("select").attr('id');
if(typeof idSelectFilter === 'undefined' || typeof idSelectFiltering === 'undefined' )
{
return false;
}
else
{
var idNewSelectFilter = 'select'+qID
var NewSelectElement = "<select id='"+idNewSelectFilter+"'><option value=''>"+$("#"+idSelectFilter+" option[value='']:first").text()+"</option></select>";
$("#"+idSelectFilter).after(NewSelectElement);
//$("#"+idNewSelectFilter).width($("#"+idSelectFilter).width());
$("#"+idSelectFiltering).change(function(){
$('#'+idSelectFilter).val('');
$('#'+idSelectFilter).trigger('change');
$('#'+idNewSelectFilter).val('');
var valuefilter=$(this).val();
$('#'+idNewSelectFilter+' option').not(':first').remove();
$('#'+idSelectFilter+' option').each(function(){
if($(this).attr('value').indexOf(valuefilter)==0){
$(this).clone().appendTo('#'+idNewSelectFilter);
}
});
});
$("#"+idNewSelectFilter).change(function(){
$('#'+idSelectFilter).val($(this).val());
$('#'+idSelectFilter).trigger('change');
});
if($("#"+idSelectFiltering).val()!=''){
var valuefilter=$("#"+idSelectFiltering).val();
$('#'+idSelectFilter+' option').each(function(){
if($(this).attr('value').indexOf(valuefilter)==0){
$(this).clone().appendTo('#'+idNewSelectFilter);
}
});
if($("#"+idSelectFilter).val()!=''){
$('#'+idNewSelectFilter).val($("#"+idSelectFilter).val());
}
}
}
});
}
selectFilterByCode([QID 2],[QID 1]);
</script>
Pour les arguments à préciser dans la fonction selectFilterByCode(qID,filterqID) soit qID et filterqID, je ne parviens pas à déterminer ce que je dois écrire. Dans un démo fourni par M. Chenu j'ai trouvé
"
Choisissez plus précisément
<script type="text/javascript" charset="utf-8">
selectFilterByCode(7073,7072);
</script>
"
Mais d'où viennent ces deux nombres dans le sondage ?
Que dois-je préciser comme arguments ?
Dans les remarques fournies dans le fichier selectfilter.js il y a :
/* Function to filter a select by another select
In the same page
var qID : the number of question to filter
var filterqID : the number of question filtering
*/
Si je traduis "the number of question to filter" j'obtiens "le numéro de la question à filter". J'imagine qu'il s'agit de la Question 2. Dans mon test, le numéro de la question 2 est Q-1. En passant il aurait peut-être été mieux d'écrire question number to filter
Si je traduis "the number of question filtering" j'obtiens "le numéro de la question qui filtre". J'imagine qu'il s'agit de la Question 1. Dans mon test, le numéro de la question 1 est Q-0. Il aurait peut-être été plus approprié d'écrire
filtering question number
J'ai donc écris : selectFilterByCode(Q-1,Q-0)
Malheureusement, ça ne fonctionne pas; ni même si j'inverse les arguments (Q-0,Q1)
Voici un exemple concret de ce que j'aimerais obtenir :
Fichier de logique pour le Questionnaire #[123953]: Test
# Nom [ID] Filtre conditionnel [Validation] (Valeur par défaut) Texte [Aide] (Astuce)
G-0 Groupe Test
[GID 1] 1
Q-0 *questionsource
[QID 1]
Liste (Menu déroulant) [!] 1 Choisissez une catégorie
Attribut de la question Valeur
A[0]-1 A [VALUE: 0] Race de chiens
A[0]-2 B [VALUE: 0] Continents
A[0]-3 C [VALUE: 0] Arc-en-ciel
Q-1 questioncible
[QID 2]
Liste (Menu déroulant) [!] 1 Choisissez un élément.
<script>
/*
Copyright 2012 Denis Chenu for
....
function selectFilterByCode(qID,filterqID){
$(document).ready(function(){
.......
}
selectFilterByCode(Q-1,Q-0);
</script>
Attribut de la question Valeur
statistics_showgraph 1
A[0]-1 A01 [VALUE: 0] Airedale
A[0]-2 A02 [VALUE: 0] Boxer
A[0]-3 A03 [VALUE: 0] Caniche
A[0]-4 A04 [VALUE: 0] Doberman
A[0]-5 B05 [VALUE: 0] Europe
A[0]-6 B06 [VALUE: 0] Asie
A[0]-7 B07 [VALUE: 0] Afrique
A[0]-8 B08 [VALUE: 0] Amérique
A[0]-9 B09 [VALUE: 0] Océanie
A[0]-10 C10 [VALUE: 0] Bleu
A[0]-11 C11 [VALUE: 0] Indigo
A[0]-12 C12 [VALUE: 0] Orange
A[0]-13 C13 [VALUE: 0] Rouge
Merci et au plaisir de lire vos réponses.
Alexdp
Topic Author
