Discussion :

[Cesium555]

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.

Le champ s'affiche bien


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

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

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

[Invité]

Bonjour,

1- Dans la fonction addDate, on trouve :

Code :

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

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

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

Idem pour name :

Code :

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

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

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

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

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

1
2
3
4
function addDate(divName) {
...
   $('...??...').datepicker();
}

[Cesium555]

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