Discussion :

[Invité]

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 :

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

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 :

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

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

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

[kolodz]

As-tu tenté de reprendre la fonctionnalité de zèro ? Je veux dire sur une page vierge...
A mon avis, il est plus simple de refaire au propre en reprenant une par une les règles métiers que tu veux conserver.
D'ailleurs, le code d'origine est très obscure quant à son intention. Peut-être que l'ajout de commentaire sur le métier serai utile.

Cordialement,
Patrick Kolodziejczyk.

[Invité]

Merci pour le passage, en fait le code est composé de plusieurs fonctions (+4000 lignes) et ça date depuis 2014, et j'ai peur de changer le comportement de l'application en modifiant le code, du coup je veux juste appeler la fonction autant que les cases cochées, et passer les paramètres de la case à la fonction.

[kolodz]

Tant que tu n'es pas en production, tu peux faire ce que tu veux. Donc fait le !
En suite, tu te posera la question de savoir si tu veux que cela soit reporté en production ou non.

En n'ayant vue que le code que tu nous as fournit, je peux déjà dire que dans les 4000+ lignes, il y doit y en avoir au moins 30% qui saute si tu fait de la mise au propre. (Création et utilisation de fonction... etc )

Cordialement,
Patrick Kolodziejczyk.

PS : 2014, c'est pratiquement hier.

[Invité]

Je vais faire comme ça
Merci, ça m'a encouragé