Modifier l'appel d'une fonction basée sur select
Je suis débutant en JS, et je travaille sur un ancien code compliqué, en fait, j'essaie de remplacer une fonction appelé par "Select" qui permet de rajouter l'élément sélectionné dans un input texte caché qui se réinitialise à chaque fois.
Code:
1 2 3
| <select id="selectAptitudes" onchange="$('aptitudes_id').value=this.value; addAptitudeField(this,'aptitudes');">
<input name="aptitudes_id" id="aptitudes_id" type="hidden" value=""> |
Voici la fonction addAptitudeField:
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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
| addAptitudeField : function(currentAutocompleteField, idChamp) {
// permet le passage de parametres au setTimeout
var currentAutocompleteFieldBind = currentAutocompleteField;
var idChampBind = idChamp;
// le setTimeOut permet d'executer la fonction apres le vidage du
// champ par la premiere fonction onblur
// ne pas changer le timing de 400
window.setTimeout(function() {
var idChamp = idChampBind;
var currentAutocompleteField = $(currentAutocompleteFieldBind);
var currentValue = currentAutocompleteField.options[currentAutocompleteField.selectedIndex].title;
var currentCategorie = currentAutocompleteField.options[currentAutocompleteField.selectedIndex].parentNode.label;
var currentParent = currentAutocompleteField.parentNode;
var allInputs = currentParent.getElementsByTagName("input");
var countAllInputs = allInputs.length;
var lastAutocompleteFieldId = allInputs[countAllInputs - 1];
var lastValueId = "";
if (lastAutocompleteFieldId != null) {
lastValueId = lastAutocompleteFieldId.value;
}
// création du champ suivant
if (currentValue != "" && (lastAutocompleteFieldId == null || lastValueId != "") && currentCategorie != "") {
var hiddenIdsField = $(idChamp);
// On teste que l'aptitude n'est pas déjà ajoutée à la fiche
var tabIds = hiddenIdsField.value.split(configuration.listSeparator);
var found = false;
for (var i = 0; i < tabIds.length && !found; i++) {
found = tabIds[i] == lastValueId;
}
if (!found) {
aptitudeAvecDetail.stockeTemporairementValeurs();
var divCategorie = $("divCat" +currentCategorie);
var nbAptitudesCat = 0;
if (divCategorie) {
nbAptitudesCat = divCategorie.getElementsByTagName('div').length;
} else {
// On crée la div de la catégorie si elle n'existe pas encore
var divList = $("list" + idChamp);
var newDivCategorie = "<div class=\"" +idChamp+"\" id=\"divCat" + currentCategorie + "\">";
newDivCategorie = newDivCategorie + "<span class=\"champConsultationValeur categorieAptitude\" >" + currentCategorie + "</span>";
newDivCategorie = newDivCategorie + "</div>";
divList.update(divList.innerHTML + newDivCategorie);
divCategorie = $("divCat" +currentCategorie);
}
var paramDwr = {};
var newDivName = "div" + idChamp + lastValueId;
paramDwr[attributs.r_divId] = newDivName;
paramDwr[attributs.r_currentValue] = currentValue;
paramDwr[attributs.r_hiddenIdsField] = hiddenIdsField.id;
paramDwr[attributs.r_lastValueId] = lastValueId;
paramDwr[attributs.r_itemmod] = nbAptitudesCat % 2 == 0;
RepertoireDwr.ligneSuppEtSpanMessage(paramDwr, function(ajaxPage) {
divCategorie.update(divCategorie.innerHTML + ajaxPage.texte);
// on remets les valeurs qui auraient été settées
aptitudeAvecDetail.remetsValeursStockees();
if (hiddenIdsField.value != "") {
hiddenIdsField.value = hiddenIdsField.value + configuration.listSeparator;
}
hiddenIdsField.value = hiddenIdsField.value + lastValueId;
}
if ( $('selectAptitudes')){
$('selectAptitudes').options[0].selected = true;
}
$(idChamp + "_id").value = "";
}
}, 400);
}, |
C'est très compliqué, non? Ce que j’essaie de faire c'est de remplacer le select par un ensemble de checkbox qui vont permettre la selection multiple des éléments, et un bouton pour déclencher l’événement, mon événement ajouterAptitude est déclencher en cliquant sur un bouton
Code:
1 2 3 4 5 6 7 8 9 10 11
| ajouterApt = function(){
var listApt = [];
$('.Aptitudes input:checked').each(function() {
listApt.push(this.name);
});
nbrItem = listApt.length;
for(var i=0; i<nbrItem; i++){
$('aptitudes_id').value=listApt[i].value;
addAptitudeField(listApt[i],'aptitudes');
}
}; |
Il permet d'appeler la première fonction le nombre de fois que les cases cochées. Malheureusement ce code ne marche pas, et quand je clique sur le bouton la page se retélécharge et je ne sais pas comment ni pourquoi.
Avez vous des idées, des pistes pour résoudre ce problème.
Merci d'avance :oops: