observer le dom en temps réel

salut..;
j'ai un petit pb

le code suivant permet de créer un datepicker avec jqueryUI sur tous les éléments input qui ont la classe datepicker

bon super ça marche ...

Code:

---

1 2 3 4

$('input.datepicker').datepicker({ inline: true });

---

le pb est que j'ai un autre script (http://www.appelsiini.net/projects/jeditable) qui permet de créer à la volée un formulaire avec un input qui a la classe datepicker ...

mais quand ce script s'exécute le code en question

Code:

---

1 2 3 4

$('input.datepicker').datepicker({ inline: true });

---

n'est pas appliqué ....


en fait je voudrai observer en temps réel le dom si c'est possible ...

vous voyez l'idée ?
ben je galère :(

Bonsoir.

Pour le datepicker, utilisez un id au lieu d'une class.

Code:

---

1 2 3

$("#datepicker").datepicker();   <p>Date: <input type="text" id="datepicker"></p>

---

Pour observer le dom en live, le plugin Firebug pour Firefox est approprié.

Re salut ...
nan ... j'ai pas du bien m'exprimer hier soir ...

Je veux utiliser une class parce que j'ai plusieurs éléments susceptibles d'être des datepicker ... bref là n'est pas le pb ...
le problème c'est que lorsqu'un champ input est créé via javascript ... eh bien il ne se transforme pas en datepicker car la fonction ne le "détecte pas"

Code:

---

1 2 3 4

$('input.datepicker').datepicker({ inline: true });

---

c'est là que je sais pas comment faire pour que jquery capte l'événement "création du champ"

voilo :(

Après création dynamique de ton champs il faut lui attacher ta fonction date picker dans un callback par exemple.

ben je peux pas ...c'est ça le problème ...
j'utilise jeditable ...
qui permet de générer un formulaire à partir d'une div pour faire un "edit in place" des données ...
c'est super sauf que le plugin ne propose pas d'option pour lancer une fonction après la création du formulaire ...

j'ai feinté en faisant ça ...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$('input').live("mouseover", function() { //alert ('yo'); //tous les input avec la classe deviennet des calendar if ($(this).hasClass('datepicker')) { $(this).datepicker({ showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true, numberOfMonths: 2, showButtonPanel: true, altFormat: 'yy-mm-dd' }); $(this).datepicker('option', 'altFormat', 'yy-mm-dd'); //alert ($(this).datepicker('option', 'altFormat')); } });

---

mais ça ne me parait pas très propre comme code ...
Le coup du mouseover c'est bof bof...
je préfèrerai détecter l'événement de création ... mais je sais pas comment faire ...
:oops:

deuxième problème ... le datepicker ne tient pas compte du altFormat: 'yy-mm-dd' dans ce cas ...
a pas compris ... mais c'est autre chose ...

Pourrais tu fournir toutes les sources, le problème est intéressant !

euuuh ... ben les sources c'est un peu dur ... j'ai 350 000 fichiers ... lol

en gros ...
j'utilise ça

http://www.appelsiini.net/projects/jeditable

bon j'ai un poil modifié le code pour pouvoir ajouter une class à l'élément input créé dans le formulaire grâce à jeditable

(je peux pas vous envoyer le code ...C'est trop gros pour le formum)

et mon code pour créer le form

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$('.edit_datepicker').editable('save.php', {   indicator : ' Sauvegarde...', event : "dblclick", submitdata: function() { return {datas: this.className}; }, cssclassinput: 'datepicker', tooltip : 'Double cliquez pour edier...', cancel : 'Annuler', submit : 'Envoyer', onblur : 'ignore'     });

---

appliqué sur par exemple

Code:

---

<div class="edit_datepicker" id="date_fin_projet"><?php echo datefr($pc->date_fin_projet); ?></div>

---

voila ...
et donc ça crée le formulaire à la volée ...
avec un input qui a la class datepicker

et au survol on initialise le datepicker de jqueryUI

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$('input').live("mouseover", function() { //alert ('yo'); //tous les input avec la classe deviennet des calendar if ($(this).hasClass('datepicker')) { $(this).datepicker({ showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true, numberOfMonths: 2, showButtonPanel: true, altFormat: 'yy-mm-dd' }); $(this).datepicker('option', 'altFormat', 'yy-mm-dd'); //alert ($(this).datepicker('option', 'altFormat')); } });

---

c'est donc ce "AU SURVOL" que je voudrai éviter
parce que c'est pas bien beau

et en bonus si qqun peut m'aider à faire fonctionner le altFormat du datepicker c'est cool

vualo
@+

et mon jeditable.js est ici

http://dl.free.fr/vnPnUB8uV

le pb est intéressant mais quand même je pensais que c'était assez courrant ... :(

Bon...
j'ai ajouté à jeditable l'option
callbackform

Pour exécuter une fonction après la chargement du formulaire ...

Code:

---

1 2	var callback = settings.callback || function() { }; var callbackform = settings.callbackform || function() { };

---

au début

et vers la ligne 264

Code:

---

1 2 3 4 5

/* Add created form to self. */ $(self).append(form);   //on applique la fonction a faire après le chargement du form callbackform.apply(self);

---

code ici

http://dl.free.fr/rUSlLnJzg

ça marche ...mais ça ne me donne pas la réponse au problème "global" de détection de modif du dom ...