Scripts dans une fenêtre modale fonctionnent deux fois, puis plus du tout

Bonjour,

Je débute sur Symfony 2 et jQuery.
Je veux faire un formulaire de création de dons, dans lequel je voudrais pouvoir sélectionner un donateur et une adresse, et le cas échéant en créer de nouveaux.

Voilà ce que j'ai commencé à faire avec jQuery et jQuery UI:
J'ai deux champs dans lesquels je vais indiquer l'ID du donateur et de l'adresse.
http://i.imgur.com/bYbD8h0.png
Voilà le code du template :
https://github.com/framasoft/gesdon2.../new.html.twig

Avec jQuery, on peut ouvrir une fenêtre modale (pour le moment, c'est directement en cliquant sur le champ), dans laquelle on charge la page de recherche (qui existe déjà).
C'est ce script là :
https://github.com/framasoft/gesdon2.../web/js/new.js
http://i.imgur.com/R4KxBgP.png

La liste des instances est chargée en ajax.
Lorsqu'on clique sur une ligne, l'ID correspondant est affecté à une variable, la modale se ferme, et le champ du formulaire récupère la valeur de la variable.
Pour le moment, le script est dans la page, pour me permettre d'utiliser facilement les routes de Symfony avec la fonction path() de Twig :
https://github.com/framasoft/gesdon2...arch.html.twig
https://github.com/framasoft/gesdon2...arch.html.twig


J'ai plusieurs problèmes :
pour commencer, les librairies sont rechargées à chaque fois qu'on ouvre la fenêtre modale. Ça paraît logique, dans la mesure où les librairies sont incluses dans la page de recherche, et dans le template de base. Mais ça ralentit sensiblement le chargement et l'exécution des scripts.

D'autre part:
Quand j'ouvre la fenêtre de sélection du donateur, j'en sélectionne un, ça fonctionne.
Même chose pour l'adresse, ça fonctionne toujours.
Mais si j'ouvre à nouveau la fenêtre du donateur, le script contenu dans la page de recherche ne s'exécute plus. L'action du bouton Rechercher n'est pas modifiée, et quand on clique dessus, il fait un submit, et c'est toute la page qui est rafraîchie.

Il y a sûrement des erreurs d'organisation dans mes scripts, mais là je sèche un peu :?

Citation:

---

Envoyé par selios

pour commencer, les librairies sont rechargées à chaque fois qu'on ouvre la fenêtre modale. Ça paraît logique, dans la mesure où les librairies sont incluses dans la page de recherche, et dans le template de base.

---

Oui, et ton problème est sans doute là. Ces scripts ne sont censés s'exécuter qu'une seule fois, et du coup il y a des effets de bord indésirables, des gestionnaires d'évènements qui se télescopent et sans doute des erreurs JavaScript (cherche et ouvre la console de ton navigateur pour les voir).

Par exemple il pourrait y avoir une erreur dans la fonction qui gère l'évènement submit et du coup l'évènement n'est pas annulé, ce qui expliquerait pourquoi la page se recharge quand tu cliques sur le bouton.

Je pense qu'il suffirait d'une petite modification dans ton JavaScript pour corriger le problème. Actuellement, tu appelles .load('../Donateur') à chaque clic sur le champ (idem pour '../Adresse').C'est indiqué dans la doc de .load() que les scripts de la page récupérée sont exécutés.
Il faudrait que tu gardes une référence, à l'extérieur de la fonction click, sur la <div> créée avec $( "<div title='...'></div>" );. Ensuite, dans la fonction, tu testes son existence. Si elle existe déjà, tu ne la recrées pas, tu te contentes de la refaire apparaître, par exemple avec .show().
Ainsi je pense que tu pourras éviter les appels supplémentaires à .load() et le téléscopage des scripts.

J'ai modifié les scripts pour que les fenêtres soient juste cachées, et ré-affichées quand elles ont déjà été initialisées,
et ça fonctionne!

Merci beaucoup.