Discussion :

[Mr-Jay]

Bonjour,

Depuis une mise à jours de Node (de la 4.1 à la 4.4) avec un update de tous les modules, mes listes déroulantes (du moins certaines) sont dissidentes, elles ne sont plus déroulantes, et j'ai beau chercher je ne vois pas de solutions sachant que dans un des cas où ça bloque, j'ai deux listes déroulantes dans un form (mois et années). Si je les mets chacune dans un form, elles repassent déroulantes, mais impossible de transmettre les données, et dans les autres cas ce sont les paginations de tableau dynamique généré avec react qui bloquent.

En ce qui concerne les technos, il y a un mélange de Html, de Node.Js, d'handlebars (basé sur mustache), et dans le cas des tableaux dynamiques de React.

Cas des listes déroulantes simples :


Code lié :

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
 
<form method="post" action="/equipes/dates" name="dateChoix" >
    <select name="annee" size="1" style="width: 10%">
      // parcours d'un objet contenant des années
      {{#each anneeList}}
        <option>{{this}}
      {{/each}}
    </select>
    <select name="mois" style="width: 10%">
    // parcours d'un objet contenant des mois
      {{#each moisList.mois}}
       //si l'objet contient l'attribut select on l'ajoute comme selected
        {{#if select}}
          <option  selected value={{id}}>{{libelle}}
        {{else}}
            <option value={{id}}>{{libelle}}
        {{/if}}
      {{/each}}
    </select>
  <button class="btn blue" type="submit" name="btn_date">Choisir date</button>
</form>

Cas des tableaux dynamiques généré avec react :


Code lié à la génération du tableau dynamique :

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
 
// On récupere les données dans un tableau que l'on parse en json
var tab =document.getElementById("main")
var value =tab.getAttribute('value');
var listes= JSON.parse(value)
 
// Pour chaques congé on ajoute des checkboxs et boutons d'actions (valider/refuser)
for(var conge in listes)
{
    var idConge=listes[conge]["_id"];
    listes[conge]["selectionner"] =   <input type="checkBox"  className="checkBox"  value={idConge} name="checkBox" />;
    listes[conge]["actions"] =
    <div>
      <form method="post" action="/demandes/validerConges" name="validerConge" id="validerConge">
          <button className="btn-xs" type="submit" value={idConge} name="idConge">
          <i className="fa fa-check-circle"></i>
          </button>
      </form>
      <form method="post" action="/demandes/refuserConge" name="refuserConge" id="refuserConge">
        <button className="btn-xs" type="submit" value={idConge} name="idConge">
        <i className="fa fa-times-circle"></i>
        </button>
      </form>
    </div>
}
 
// Géneration du tableau via l'outil griddle for react
React.render(
<Griddle results={listes} tableClassName="table"  showFilter={true}
   showSettings={false} resultsPerPage={9} columns={[ "selectionner","collaborateur","dateDebut", "dateFin", "actions"]}/>,document.getElementById('main')
);

Si je fais inspecter sur la liste déroulante :


Comme on peu l'observer, il fait une fixette sur le form, ce qui n'est pas le cas pour les autres éléments de la page.


Malgré mes recherches, je n'ai trouvé aucune réponse pouvant m'indiquer une piste, mais je dois avouer ne pas avoir vraiment réussi à définir une bonne recherche pour ce problème.

Toute piste sera la bienvenue. ^^

[Mr-Jay]

Début de solution trouvé concernant la premiere partie:

Il semblerais que la mise à jours d'une des technos ai créer un bug avec la balise button, j'ai donc résolus ce problème en mettant un input type button:

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
<form method="post" action="/equipes/dates" name="dateChoix" >
    <select name="annee" size="1" style="width: 10%">
      // parcours d'un objet contenant des années
      {{#each anneeList}}
        <option value="{{this}}">{{this}}</option>
      {{/each}}
    </select>
    <select name="mois" style="width: 10%">
    // parcours d'un objet contenant des mois
      {{#each moisList.mois}}
       //si l'objet contient l'attribut select on l'ajoute comme selected
        {{#if select}}
          <option  selected value="{{id}}">{{libelle}}</option>
        {{else}}
            <option value="{{id}}">{{libelle}}</option>
        {{/if}}
      {{/each}}
    </select>
    <input type="submit" class="btn blue" name="test" value="Choisir date" style="width: 10%">
</form>