Insertion dynamique Datepicker avec un bouton

**tonycemalin** · 25/07/2012, 10h11

Bonjour tout le monde!!
Je suis nouveau sur le forum et je suis content de pouvoir échanger avec vous. Voilà mon petit souci. Je souhaiterais ajouter dynamiquement via un bouton un bloc avec dedans trois champ de formulaire (Un champ Nom, un champ prénom et un champ date de naissance avec datepicker). Tout fonctionne sauf bien évidemment mon calendrier datepicker.
J'ai remplacé mon id datepicker par datenaissance.
Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
$(document).ready(function(){
	$('.ajout_person').click(function(){
		$('<div class="ajout_bloc_occupant"><div class="ajout_header_bloc_occupant"><h3 class="ajout_num_occupant">occupant</h3></div><div class="ajout_milieu_bloc_occupant"><label class="ajout_nom_occupant">Nom</label><input name="champ_nom" type="text"/><label class="ajout_prenom_occupant">Prénom</label><input name="champ_prenom" type="text"/><label class="ajout_datenaissance_occupant">Date de Naissance</label><input name="champ_date" type="text" id="datenaissance"/></div>').insertAfter('.bloc_occupant');
		$('.suppr_person').click(function(){
		$('.ajout_bloc_occupant').remove();
		});
	});
	});

Merci à tous d'avance pour le coup de main.

**PP(Team)** · 25/07/2012, 12h31

Bonjour,

La zone du Datepicker s'affiche-t-elle ?
Si oui, qu'affiche-t-elle ?

Si elle affiche un champs "par défaut" (sans Datepicker), alors ajoute ceci :

Code :

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

1
2
 
$( "#datenaissance" ).datepicker();

Cela initialise le champs pour qu'il devienne un datepicker.

**tonycemalin** · 25/07/2012, 15h05

Salut,
j'ai déjà appelé mon datepicker si tu veux via ceci

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
$(function() {
		$( "#datenaissance, #ajout_datenaissance" ).datepicker({
			showButtonPanel: true,
			closeText: 'Fermer',
			prevText: '&#x3c;Préc',
			nextText: 'Suiv&#x3e;',
			currentText: 'Courant',
			dateFormat: "dd/mm/yy",
			buttonText: "Choisissez votre date de naissance",
			defaultDate: +7,
			showOn: "both", 
			buttonImage: "styles/page/images/calendar.png",
			buttonImageOnly: true,
			numberOfMonths: 1,
			changeMonth: true,
			changeYear: true,
			showOtherMonths: true,
			selectOtherMonths: true,
			firstDay: 1,
			monthNames: ["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
			monthNamesShort: ["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
			dayNamesMin: ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"],
			dayNamesShort: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
			yearRange: "1920:2012"
		});
 
	});

Mais le souci c'est quand je clic pour ajouter mon formulaire mon datepicker ne fonctionne plus.

**PP(Team)** · 25/07/2012, 15h48

Peut-être que je me trompe, mais il me semble que tu as plusieurs Datepicker sur ta page.
Un ou plusieurs sont présent "de base" et on peut cliquer sur "Ajouter une personne" qui va ajouter "manuellement" du code avant le code présent.

As-tu fais que chacun de tes Datepicker ait un ID différent ?

En effet, si ton(tes) premier(s) fonctionne(nt) c'est que JQuery ne parvient pas à identifier le nouveau datepicker.

Ton ID "datenaissance" peut être multiple, il faudrait plutôt utiliser une classe dans ce cas.

Edit :

Code :

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

$( "#datenaissance, #ajout_datenaissance" ).datepicker({

est bien appelé après l'ajout ?

**tonycemalin** · 25/07/2012, 16h13

J'en ai plusieurs, mais je leur ai tous donné un ID différent. Quand tu me demande si j'ai appelé mon datepicker après, je sais pas trop quoi te dire à par que je l'appele dans mon ajout dynamique via mon ID datenaissance, et il est appelé aussi dans ma feuille de script comme je t'ai montré. A moins que tu me demande si j'appele mon

Code :

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

$( "#ajout_datenaissance" ).datepicker({

après avoir ajouté mes éléments?

**tonycemalin** · 25/07/2012, 16h19

C'est bon ça marche, c'était bien ça, en fait je n'ai pas appelé mon datepicker après avoir ajouter mes éléments. Je l'ai ajouter mais à par. Voilà c'est cool, je te remercie, sinon dernière petite question, si je veux supprimer mon dernier éléments créer comment je peux faire car

Code :

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

$('.ajout_bloc_occupant').remove();

supprime tous mes éléments créer forcément.

Merci

**tonycemalin** · 25/07/2012, 16h36

Je me suis emballé un peu trop vite, désolé. En fait ça fonctionne sauf que ça bug quand j'en créer plusieurs et que je veux remplir un autre champ que le dernier. GALERE!!! Je suis un peu perdu du coup je sais plus trop quoi faire. Est-il possible de créer un ID différent pour mes datepicker à chaque fois que j'ajoute un formulaire.

Merci

**PP(Team)** · 26/07/2012, 09h06

Bonjour,

Mettre un ID différent à chaque fois ? Rien de compliqué en soit.
Il faut que tu fasses des ID du style :

Code :

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

1
2
 
"datanaissance_"+i

Où "i" est un compteur qui s'incrémente à chaque fois que tu en ajoutes un.

Pour les transformer en datepicker (ne pas réutiliser "i" comme compteur pour éviter tout problème):

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var encore = true;
var j = 0;
while(encore) {
    if($("#datanaissance_"+j)!=null)
        $("#datanaissance_"+j).datapicker();
    else
        encore = false;
    j++;
}

**tonycemalin** · 26/07/2012, 09h25

La variable je l'as met bien avant mon appel pour le datepicker? Je comprend pas se que tu veux dire mon

Code :

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

"#datenaissance_"+i

Le +i je le met sur le script du datepicker? Je le met aussi sur id de mon input?

Désolé, je fais un peu le boulet!!!
Merci,

**tonycemalin** · 26/07/2012, 10h05

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
$(document).ready(function(){
	$('.ajout_person').click(function(){
		$('<div class="ajout_bloc_occupant"><div class="ajout_header_bloc_occupant"><h3 class="ajout_num_occupant">occupant</h3></div><div class="ajout_milieu_bloc_occupant"><label class="ajout_nom_occupant">Nom</label><input name="champ_nom" type="text"/><label class="ajout_prenom_occupant">Prénom</label><input name="champ_prenom" type="text"/><label class="ajout_datenaissance_occupant">Date de Naissance</label><input name="champ_date" type="text" id="ajout_datenaissance_"+i/></div>').insertAfter('.bloc_occupant');
 
			var encore = true;
			var j = 0;
			while(encore) {
			if($("#ajout_datenaissance_"+j)!=null)
			$("#ajout_datenaissance_"+j).datapicker();
			else
			encore = false;
			j++;}
 
		$("#ajout_datenaissance_").datepicker({
			});
 
		$(".suppr_person").click(function(){
		$(".ajout_bloc_occupant").remove();
		});
	});
	});

J'ai remplacé #datenaissance par #ajout_datenaissance
Je clique sur "ajouter" plusieurs fois et je souhaiterais que dans n'importe quel datepicker que je remplis ça fonctionne, là il prend en compte le dernier créer, les autres ne fonctionne pas il modifie la date du dernier datepicker créer...

**PP(Team)** · 26/07/2012, 10h48

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
 
$(document).ready(function(){
	$('.ajout_person').click(function(){
		$('<div class="ajout_bloc_occupant"><div class="ajout_header_bloc_occupant"><h3 class="ajout_num_occupant">occupant</h3></div><div class="ajout_milieu_bloc_occupant"><label class="ajout_nom_occupant">Nom</label><input name="champ_nom" type="text"/><label class="ajout_prenom_occupant">Prénom</label><input name="champ_prenom" type="text"/><label class="ajout_datenaissance_occupant">Date de Naissance</label><input name="champ_date" type="text" id="ajout_datenaissance_"+i/></div>').insertAfter('.bloc_occupant');
 
			var encore = true;
			var j = 0;
			while(encore) {
			    if($("#ajout_datenaissance_"+j)!=null)
			        $("#ajout_datenaissance_"+j).datapicker();
			    else
			        encore = false;
			    j++;
                        }
		$(".suppr_person").click(function(){
		$(".ajout_bloc_occupant").remove();
		});
             i++;
	});
	});

Avec cela, ça fonctionne ? Que cela donne-t-il ?

**tonycemalin** · 26/07/2012, 10h54

ça ajoute bien une ligne avec le formulaire mais le datepicker ne fonctionne pas ni le bouton supprimer.

**PP(Team)** · 26/07/2012, 14h09

Pour ton bouton supprimer, cela fonctionne-t-il va cela ?

Code :

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

1
2
3
4
 
		$(".suppr_person").live("click", function(){
		$(".ajout_bloc_occupant").remove();
		});

**tonycemalin** · 26/07/2012, 14h45

Non ça fonctionne pas non plus...

**Shikiryu** · 26/07/2012, 15h22

Tenter de faire du jQuery sans voir ou connaître la structure html qu'il y a derrière est quasi-inutile.

Je serais tenté de demander un jsfiddle.

**tonycemalin** · 26/07/2012, 15h48

http://jsfiddle.net/paocemalin/8Z5Cp/

Merci, pour ta réponse

**PP(Team)** · 26/07/2012, 17h04

Première piste :
- Tu en as un, tu en ajoutes 1 : le 2ème ne fonctionne pas
- Tu en rajoutes un : les 2 premiers fonctionnement, mais pas le 3ème.

Donc c'est bien un problème de rafraichissement.

Avec ce code, cela fonctionne parfaitement (sauf supprimer, mais il apparait trop mal ....) :
http://jsfiddle.net/8Z5Cp/2/

NB : ne pas garder "toto" dans le code !!!

**Shikiryu** · 26/07/2012, 19h49

Envoyé par tonycemalin

http://jsfiddle.net/paocemalin/8Z5Cp/

Merci, pour ta réponse

aaaaalors.
Plusieurs remarques avant même d'aborder ton problème :
1- Sur un jsfiddle, pas besoin de

Code :

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

$(document).ready(function(){

mais par contre, choisir "onDomReady" au lieu de "onLoad". (Bien sûr, vous voyez pourquoi

)

2- Il faut faire la différence entre id et class et choisir en conséquence :
Le bouton "ajout" est unique tel un...id, or vous appelez l'event click dessus par sa class :

Code :

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

.ajout_person

. A l'inverse, on peut ajouter à l'infini des personnes, ce qui inclue donc le champ pour la date de naissance qui possède une id qui au bout de 2 personnes n'est plus unique

. C'est contraire à l'utilisation des ids et peut provoquer des erreurs (css, html et js).
Apparemment, PP(Team) a voulu rendre les id uniques avec

Code :

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

mais, c'est raté. ça pourrait passer ainsi :

Code :

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

1
2
i++;
$('<div class="ajout_bloc_occupant"><div class="ajout_header_bloc_occupant"><h3 class="ajout_num_occupant">occupant</h3></div><div class="ajout_milieu_bloc_occupant"><label class="ajout_nom_occupant">Nom</label><input name="champ_nom" type="text"/><label class="ajout_prenom_occupant">Prénom</label><input name="champ_prenom" type="text"/><label class="ajout_datenaissance_occupant">Date de Naissance</label><input name="champ_date" type="text" id="ajout_datenaissance_"'+i'/></div>').insertAfter('.bloc_occupant');

Mais question : l'id est-elle indispensable alors que vous pourriez utiliser une classe ?

3- Enfin, $.live() est dépréciée à partir de jquery 1.7 (que vous utilisez dans le jsfiddle). Il faut utiliser $.on()

Enfin, voici le code tel que je le vois : http://jsfiddle.net/Lq647/4/
J'ai donc pris en compte les remarques ci-dessus, plus 2-3 autres trucs

**tonycemalin** · 27/07/2012, 09h48

Merci à tous vous m'avez bien aidé, j'ai remplacé mes classes par des id comme à dit Shikiryu. Je voudrais qu'avec mon bouton supprimer, ça supprime qu'un formulaire(le dernier créer), est-ce que vous pouvez m'aider dans ce sens svp???
Merci à tous,

**PP(Team)** · 27/07/2012, 10h56

Dans ce cas, il faut que chaque partie ajoutée ait un ID unique.
A chaque ajout, 2 possibilités :
- tu stockes le dernier ID pour que lors du click tu connaisses cet ID
- tu ajoutes une classe particulière au dernier élément ajoutée (classe "lastadd" par exemple) en pensant bien, dans ce cas à supprimer cette classe à tous les autres éléments (ceux précédemment créés).

Cordialement.

Insertion dynamique Datepicker avec un bouton [UI]

jQuery

Discussions similaires

Partager

Partager