Datepicker non actif

Bonjour à tous,

Je voudrais créer un form (dans un fichier JSTL) pour renseigner des dates. J'utilise Bootstrap et les glyphicons pour rendre tout cela tout beau.

Le truc c'est que je voudrais permettre à l'utilisateur d'ajouter des champs de date s'il le souhaite. J'ai donc créé un bouton '+' qui appelle une fonction javascript qui utilise insertAdjacentHTML() pour insérer le code nécessaire (le même code que j'utilise pour les champs de date 'classiques').

L'affichage sur ma page est bon mais le champs ne réagit pas, j'ai beau cliquer partout sur le nouveau champ, le calendrier pour choisir la date ne s'affiche pas et je ne peux donc pas choisir de date.

Pièce jointe 469463 Le champ s'affiche bien

Pièce jointe 469462
<- L'affichage que je veux quand je clique sur le champ mais qui ne marche pas avec ceux ajoutés avec le javascript

Ma fonction javascript pour insérer le code (désolé pour le formatage) :

Code:

---

1 2 3 4

function addDate(divName) { var divDate = document.getElementById(divName); divDate.insertAdjacentHTML('beforeend', '<div class=\"input-group date form_date\" data-date=\"\" data-date-format=\"dd MM yyyy\" data-link-field=\"dateRemisePoster\" data-link-format=\"yyyy-mm-dd\"> <input class=\"form-control\" size=\"16\" type=text value=\"${dateRemisePoster}\" readonly> <span class=\"input-group-addon\"> <span class=\"glyphicon glyphicon-remove\"></span></span> <span class=\"input-group-addon\"> <span class=\"glyphicon glyphicon-calendar\"></span></span> </div> <div> <input type=\"hidden\" id=\"dateRemisePoster\" name=\"dateRemisePoster\" value=\"${dateRemisePoster}\" /> </div>'); }

---

Le code jstl de mon champ date et de mon bouton :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div class="row"> <div class="col-lg-10 col-md-10" id="dateRemisePosterDiv"> <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dateRemisePoster" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type=text value="${dateRemisePoster}" readonly> <span class="input-group-addon"> <span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span></span> </div> <div> <input type="hidden" id="dateRemisePoster" name="dateRemisePoster" value="${dateRemisePoster}" /> </div> </div> <div class="col-lg-2 col-md-2"> <input type="button" name="buttonAdd" id="addRemisePoster" value="+" onClick="addDate('dateRemisePosterDiv');" /> </div> </div>

---

PS : En inspectant l'élément avec chrome, le code ajouté correspond bien avec ce que je veux.

Bonjour,

1- Dans la fonction addDate, on trouve :

Code:

---

...id=\"dateRemisePoster\"...

---

Ce n'est pas possible : un id doit être UNIQUE.

Idem pour name :

Code:

---

...name="dateRemisePoster"...

---

Ça va "écraser" l'autre.
Pour conserver le même name, il faut mettre des crochet []. Ainsi, on récupèrera un array des dates :

Code:

---

...name="dateRemisePoster[]"...

---

(idem dans l'"original")

2- Le code HTML ajouté n'était pas présent dans le DOM au chargement de la page : il faut réactiver datepicker sur ce code.

Code:

---

1 2 3 4

function addDate(divName) { ... $('...??...').datepicker(); }

---

Il me renvoie un String vide : "" , Je ne comprends pas pourquoi.. Y a t-il autre chose à faire que de mettre des crochets ?
Pour les id , je les ai carrément enlevés pour résoudre le problème