Discussion :

[SlimEmShady]

Bonjour à tous,

Aujourd'hui, je viens vers vous pour solliciter votre aide sur un problème que je ne connaissais pas.
Je m'explique :

Je travaille actuellement sur un formulaire tout ce qu'il y a de plus simple qui contient des champs obligatoires, des champs normaux et des listes en cascade, dont une qui prend sa valeur en fonction du choix de la précédente.



Ici, je sélectionne une option dans la liste "De quelle action ?*", et le champs d'en dessous se sélectionne automatiquement en allant chercher les informations qui vont bien grâce à une requête AJAX (idem pour le champ "Date de décision").
Jusqu'ici, tout va bien (mais le plus dur ce n'est pas la chute, c'est l’atterrissage !)

Maintenant, imaginons que l'utilisateur oublie de remplir un champ obligatoire, la page se recharge en lui affichant l'erreur en haut, les champs déjà saisis sont repeuplés et il n'a plus qu'à corriger les éventuelles erreurs de saisie.
C'est à ce moment-là que ma liste "De quelle action ?" est j'ai l'impression modifiée... En effet, après ce rechargement de page, si je fais un console.log() de son id (#select_action_mere), le console ne le considère pas comme un élément "select", je vous montre :

Je vais faire :

Code :

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

1
2
console.log($('#select_action_mere'));
console.log($('#select_instances'));

#select_action_mere correspond à ma liste déroulante "De quelle action ?*" qui présente le bug.
#select_instances correspond à la liste déroulante du dessous qui elle ne semble pas poser de problème.

Quand j'arrive sur ma page, les console.log() affichent :


Mes 2 select ici sont donc normaux.

Après une erreur de saisie et rechargement de la page, c'est comme si le #select_action_mere n'était plus un élément select, je ne comprends pas comment c'est possible :


Du coup, après une erreur, l'utilisateur aura beau changer l'option du premier select, le 2ème ne bougera plus puisque jQuery n'entre plus dans la fonction

Code :

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

$('form').on('change', '#select_action_mere', function() { ... });

Si vous avez besoin de code, n'hésitez pas à demander, même si je pense que c'est plus un problème de compréhension de ma part...

Merci,
Bonne journée.

[NoSmoking]

Si vous avez besoin de code...

Oui, HTML + JS, pour savoir ce que tu fais qui ne dois visiblement pas être bon.

[SlimEmShady]

Merci de ta réponse, je t'envoie ça demain quand je serais au bureau.
Pour l'HTML, je ferais une version simplifiée car j'utilise des librairies maison et CodeIgniter pour l'écrire, mais le JS sans problème

Merci et bonne soirée !

[SlimEmShady]

Voici mon HTML

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
35
36
37
38
39
40
<div id="infos_principales" class="framed infos_principales">
    <h3>Informations principales</h3>
    <div class="form_row">
        <div class="label_field ">
             <label for="select_sous_action">Cette action est-elle une sous-action ?</label>
        </div>
        <div class="field">
            <select name="sous_action"  id="select_sous_action" >
                <option value="0" title="Non">Non</option>
                <option value="1" title="Oui">Oui</option>
            </select>
        </div>
    </div>
    <div class="form_row">
        <div class="label_field select_action_mere">
            <label for="select_action_mere">De quelle action ?*</label>
        </div>
        <div class="field">
            <select name="id_mere"  id="select_action_mere" >
                <option value="0" title=""></option>
                <option value="12" title="12. Identifier les clients">12. Identifier les clients</option>
                <option value="13" title="13. Harmoniser les formats de restitutions">13. Harmoniser les formats de restitutions</option>
                <option value="14" title="14. Instruire le retard des demandes clients">14. Instruire le retard des demandes clients</option>
            </select>
        </div>
    </div>
    <div class="form_row">
        <div class="label_field ">
            <label for="select_instances">Sélectionner une instance :*</label>
        </div>
        <div class="field">
            <select name="id_instance"  id="select_instances" >
                <option value="0" title=""></option>
                <option value="9" title="CODIR">CODIR</option>
                <option value="8" title="RP COM">RP COM</option>
                <option value="3" title="RP MAFF">RP MAFF</option>
            </select>
        </div>
    </div>
</div>

Et la fonction jQuery, le onchange sur #select_action_mere :

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
$(document).ready(function(){
    $('form').on('change', '#select_action_mere', function() {
        var index = $(this).val();
        var res = Constant.requeteAjax(Constant.URI + 'ajax/get_action_mere/', 'POST', index);
        var action = JSON.parse(res);
        if(action != null) {
            $('#select_instances').val(action.instance);
            $('#select_instances').attr('disabled', true);
            var date = new Date(action.date_decision);
            var day = date.getDate();
            if(day < 10) day = '0' + day;
            var month = date.getMonth() + 1;
            if(month < 10) month = '0' + month;
            var year = date.getFullYear();
            action.date_decision = day + '-' + month + '-' + year;
            $('#date_decision').val(action.date_decision);
            $('#date_decision').attr('disabled', true);
        }
        else {
            RAZ_champs();
        }
    });
});

La requête AJAX me renvoie mon objet action en JSON.

Voilà pour le code, je ne comprends pas pourquoi au premier chargement de la page tout fonctionne, mais si je fais une erreur dans le formulaire, après repeuplement des champs ça ne fonctionne plus, comme montré sur mon premier message...

Merci de votre aide !

[SlimEmShady]

Bon je pense avoir trouvé, je vais vous montrer mais si quelqu'un peut m'expliquer au passage ce serait intéressant pour moi de comprendre.

Ma liste #select_action_mere, je lui rajoute un id "display" au rechargement de la page pour qu'il soit affiché (car par défaut, ce champ n'est pas affiché à moins de sélectionner "Oui" sur la première liste déroulante).
Donc au premier chargement de la page, ce select n'est pas affiché, si je sélectionne "Oui" sur la première liste, ça s'affiche, et si j'envoie le formulaire en faisant une erreur ça recharge tout mais évidemment dans le même état qu'avant l'envoi.
J'ai donc eu recours à un id "display" que je mets en plus de l'id #select_action_mere.
J'ai passé l'id "display" dans une classe plutôt, et là ça fonctionne... Mais je ne comprends pas trop pourquoi avec 2 id, ça ne fonctionne plus...

[SpaceFrog]

un id "display"

un id est unique sur la page et unique pour un élément de la page

si tu modifies l'identifiant d'un élément, il parait évident que les évènements rattachés à l'ancien id ne vont pas s'appliquer au nouveau...

Pour afficher / masquer un élément, tu peux passer par les classes ...