# Formulaire en popup? **URL:** \ **Category:** FR\ **Created:** [July 9, 2009, 1:58pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802 "2009-07-09T13:58:52Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 9, 2009, 1:58pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/1 "2009-07-09T13:58:52Z")
Bonjour, J’ai le dilemne suivant : J’ai un formulaire “nouvelle personne”, dans ce formulaire on doit choisir la commune de cette personne ( lien vers la table COMMUNES) via un select contenant le nom de toutes les communes de la base Je voudrai offrir à l’utilisateur de créer cette commune si elle n’existe pas, je pourrai mettre un div caché et le faire apparaitre en ajax avec un lien “ajouter une commune” mais le formulaire pour ajouter une commune est grand alors ca va vite devenir moche… J’aimerai plutôt qu’une fenetre s’ouvre avec le formulaire et que lorsque l’utilisateur valide le formulaire, la fenetre se ferme, et la nouvelle commune soit sélectionné dans le select du formulaire personne. Ma question : comment faire ca ? Je pensai à lightwindow mais je n’ai pas trouvé beaucoup de documentation pour faire ca avec rails et ca à l’air buggé (pas d’autocomplétion). Une fenêtre popup ? Ca peut être bien mais c’est un peu moche maintenant les popup avec le web 2.0, non ? Une autre idée ? Des avis ? Merci à tous adrien ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 9, 2009, 2:19pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/2 "2009-07-09T14:19:54Z")
Avec un bon framework JavaScript (jQuery) il y a des plugins tout fait, mais en gros ils marchent tous comme ça : 1. créer un élément html (div c’est bien) à la racine de ton document - le positionner en “absolute” en haut à gauche du doc - lui donner un z-index css plus haut que tout le monde dans le doc - lui mettre un fond noir et lui donner de la transparence (cf. ton framework JS) - lui donner un waiter gif animé qui signifie que tu charge et qu’il faut que l’utilisateur patiente 2. faire un call ajax pour récupérer juste ton formulaire (pas de layout) - le coller à l’arrivée dans ton nouvel élément - lui coller l’action ajax pour créer le nouvel élément en submit Si tu maîtrise bien les CSS et le javascript, c’est trivial. Sinon, il y a souvent des plugins tout prêts pour ton framework JS (enfin, en jQuery you il y en a). Michel B. 2009/7/9 Adrien C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 11, 2009, 8:24am UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/3 "2009-07-11T08:24:23Z")
C’est exactement ca que je veux faire, malheuresement je ne maitrise pas le javascript ! Quelqu’un peut-il m’indiquer de la documentation ( même en anglais ) pour réaliser ca, malgrè mes recherches je ne trouve pas grand chose :S Merci pour votre réponse Adrien On Jul 9, 2:18 pm, Michel B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 12, 2009, 12:13pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/4 "2009-07-12T12:13:20Z")
D’accord, je vais me mettre à JQuery, ca a l’air très intéressant ! surtout avec la librairie UI ! Par contre je rencontre maintenant mon premier problème, j’avais une requete ajax qui surveillait un formulaire mais depuis que j’ai installé jquery, elle ne marche plus : \<%= observe\_form :new\_personne, :url =\> { :action =\> ‘doublon’ }, :frequency =\> 2, :update =\> ‘doublon’ %\> Et selon le résultat de l’action “doublon” j’affichais, ou pas, le div suivant : \<%= render :partial =\> 'list\_doublon' %\> Une idée ? Merci Adrien On Jul 11, 9:59 pm, Michel B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 11, 2009, 10:00pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/5 "2009-07-11T22:00:30Z")
[http://jquery.com/](http://jquery.com/) pour jQuery, ce n’est intégré dans Rails (mais c’est intégrable, sans grave problèmes) perso je te le recommande, si tu n’as aucune expérience de JavaScript Sinon, dans rails de base, tu as prototype / scriptaculous qui peut faire les mêmes choses (mais en moins joli, en moins bien à mon sens). Comme tu dois tout prendre le JS depuis le début, commence par jQuery, à mon sens c’est l’avenir. Sinon, pour les conseils pour débuter, n’hésite pas à demander, la JS c’est mon dada. Michel B. 2009/7/11 Adrien C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 12, 2009, 3:08pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/6 "2009-07-12T15:08:35Z")
Merci beaucoup pour toutes ces explications, je me décide bien pour faire du jquery ( à moins que je me rende compte que c’est beaucoup plus de travail ) ! En fait j’ai mal posé ma question, j’avais compris que mon code n’étais pas compatible jquery et je ne souhaite plus utiliser scriptaculous. Ce que je voulais savoir c’est comment faire ca en jquery ? Pour l’instant j’essaye juste de faire ca : mais malheuresement rien ne se produit lorsque je change la valeur d’un champ du formulaire ( même résultat si je remplace $ (‘new\_personne’) par $(‘#personne\_nom’) qui est l’id d’un input du formulaire. Comment puis-je faire ca ? D’après mes recherches sur le net c’est bien la propriété change qu’il faut utiliser de cette manière :S ? Je me demande également comment organiser mes fichiers pour jquery dans rails ? Ou places-tu les .js ? Correspondent-t-ils chacun à une vue ? Adrien On Jul 12, 1:04 pm, Michel B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 12, 2009, 1:05pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/7 "2009-07-12T13:05:56Z")
Là tu viens de rencontrer un truc que je n’aime pas trop dans Rails : le fait de ne pas savoir que tu faisais de l’AJAX, avec prototype / scriptaculous “masqué” par du ruby. Prototype est la library javascript de base qu’utilise Rails. Scriptaculous est une surcouche de prototype qui fait de l’animation à l’écran, inclu de base aussi dans Rails. Prototype utilise pour sélectionner un élément de ta page (et lui ajouter des possibilités) par son id la méthode _$()_. Or, jQuery utilise aussi la méthode _$()_, mais pour faire beaucoup plus (sélectionner une liste d’élément par sélecteur css, liste que tu peux manipuler à la volée avec des itérateurs ; transformer un tableau ou un hash javascript simple _[]_, ou _{}_ en un itérateur jQuery, renvoyer une version étendue du document, etc.). Donc quand tu charge les deux libraries, tu as un conflit, la dernière décidant de ce que l’on fait de la méthode _$()_. Heureusement, les braves gens de jQuery ont prévu le et assoupli le fonctionnement pour être compatible : [http://docs.jquery.com/Using\_jQuery\_with\_Other\_Libraries](http://docs.jquery.com/Using_jQuery_with_Other_Libraries) Sinon, je t’encourage à voir ce qu’a réellement généré le code Rhtml : \<%= observe\_form :new\_personne, :url =\> { :action =\> ‘doublon’ }, :frequency =\> 2, :update =\> ‘doublon’ %\> Tu vas t’apercevoir qu’en fait c’est du JavaScript prototype, écrit directement dans la page. Personnellement je trouve ça moche, du javascript dans du code HTML (philosophie Rails : on ne doit pas taper son javascript soi-même, c’est le boulot du rjs, un seul langage =\> ruby), je préfère des fichiers javascript .js à côté qui manipulent la page pour faire le boulot (philosohpie jQuery : pour bien dégrader une application, il faut qu’elle ne repose pas sur du javascript et des “hacks” html mais plutôt sur un code html simple et propre, et le JavaScript doit être dans son fichier, et faire le boulot pour ajouter les éléments d’interface dont il a besoin). Chaque philosophie à ses avantages / inconvénients : 1. Rails - Avantages - intégré dans Rails “de base” - remote\_form\_for, link\_to\_remote sont séduisants - Inconvénients - incite à oublier le JavaScript, donc te laisse dépourvu le jour où tu veux faire quelque chose de différent de ce qui est possible en RJS - incite à faire des vues avec du code JavaScript, ce qui n’est pas bon pour la réutilisation (la vue cible ne “connaît” pas le contexte de la source, les scripts de réaction à la réception de la cible sont bien mieux placés dans le contexte de la source) - verbeux - un poil plus lent que jQuery (ça se sent surtout si tu ne fais pas de bubbling avec des longues listes, ou si tu fais beaucoup d’animations compliquées) 1. jQuery + ce que tu veux côté serveur (dont Rails) - Avantages - rend les manipulations de la dom “magiquement facile” à condition de maîtriser les sélecteurs CSS - élégant et peu verbeux - incite à concevoir des interfaces qui “dégradent” bien (marchent sans JavaScript, même si c’est moins pratique, ça fait plaisir à des configurations sans JS) - incite à mieux comprendre et connaître le HTML propre et les CSS - Inconvénients - pas inclu “de base” dans Rails (mais facile à installer) - complique un peu si tu veux faire du rjs (mais c’est limite pas propre) Voilà , j’espère que ça t’aidera à faire ton choix et à avancer. Si tu veux d’autres tips jQuery, n’hésite pas à demander, mais ça ne t’exempte pas de lire la doc… Michel B. 2009/7/12 Adrien C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 12, 2009, 6:34pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/8 "2009-07-12T18:34:15Z")
Pour le faire dans les fichiers JS, rien de plus simple, mais il est bon de comprendre un peu la philosophie de jQuery. jQuery cherche à faire du non-obtrusif, pour ça, il vaut mieux lui simplifier le travail en faisant du code HTML propre et simple (oublier les remote\_form\_for etc., faire du form\_for tout simple). Pour mettre ça dans un fichier, il faut juste : - poser to code javascript dans /public/javascript/ et l’appeller en .js, si possible un fichier par utilisation - utiliser la “magie” jQuery pour lancer le JavaScript quand le document html est complètement chargé, ça se fait comme expliqué dans les tutoriaux avec $(document).load(function() { /\* ton code ici \*/ }) - charger ton fichier javascript comme normalement en Rails : \<%= javascript\_tag ‘ton\_script.js’ %\> Quelques conseils pour te simplifier le boulot : - pour éviter de multiplier les attributions de callbacks aux éléments chargés en AJAX et pour ne pas charger inutilement le PC client de méthodes multiples attribuées à plein d’éléments, faire du bubbling sur un élément inamovible parent : [Ender - Real Estate Technology - Property Management Software](http://www.ender.com/2008/04/event-bubbling-in-javascript.html) pour comprendre le concept, [http://docs.jquery.com/Events](http://docs.jquery.com/Events) pour plus de détails sur la gestion d’évènements par jQuery - découpe tes fichiers de scripts par fonctionalité, évite de les séparer par vue - plutôt que de changer les propriétés de style à la main, il vaut mieux le faire en attribuant des classes et en écrivant des fichiers css propres pour ces classes - ne jamais oublier : un id c’est unique, une classes c’est autant de fois que tu veux, et plusieurs par éléments ça marche très bien - pour afficher les résultats, deux solutions : - charger un petit bout de html généré en réponse au format.js et le coller tel quel (généralement le partiel), c’est bien pour faire vite mais c’est moins bien pour évoluer ensuite (mon conseil, commence par ça) et traiter un avec un callback de la méthode AJAX, ou utiliser la méthode $.load(). - envoyer une réponse en XML ou JSON, la lire et effectuer les résultats en construisant du HTML avec jQuery, c’est un peu plus long au début, mais ça te fait faire du webservice même sans le savoir, c’est plus léger pour le serveur et c’est plus souple Michel B. ---
**Author:** ![korn900](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/5daacb/32.png) [@korn900](https://www.ruby-forum.com/u/korn900)\ **Post date:** [July 12, 2009, 3:13pm UTC](https://www.ruby-forum.com/t/formulaire-en-popup/171802/9 "2009-07-12T15:13:51Z")
Désolé, question stupide, j’essaye depuis quelques heures et j’avais juste une erreur de syntaxe… Il reste ma question sur les fichiers js, pour l’instant je l’insère dans le html… :S Bon je m’attaque maintenant au AJAX pour chercher comment faire pour afficher le partiel (ou non) selon les résultats d’une requête en fonction des données dans le formulaire… au travail !