Insertion dynamique Datepicker avec un bouton

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:

---

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.

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:

---

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

---

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

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

Code:

---

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: '<Préc', nextText: 'Suiv>', 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.

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:

---

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

---

est bien appelé après l'ajout ?

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:

---

$( "#ajout_datenaissance" ).datepicker({

---

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

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:

---

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

---

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

Merci

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

Bonjour,

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

Code:

---

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:

---

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++; }

---

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

Code:

---

"#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,

Code:

---

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

Code:

---

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 ?

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

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

Code:

---

1 2 3 4

$(".suppr_person").live("click", function(){ $(".ajout_bloc_occupant").remove(); });

---

Non ça fonctionne pas non plus...

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.

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

Merci, pour ta réponse

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

Citation:

---

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:

---

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

---

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

---

i

---

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

Code:

---

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 ;)

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,

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.

Là je crois que c'est trop complexe pour moi, donc je vais me contenter de se qui fonctionne c'est déjà très bien comme ça.

Merci à tous,