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
Avec un bon framework JavaScript (jQuery) il y a des plugins tout fait,
mais
en gros ils marchent tous comme ça :
- 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
- 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. [email protected]
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. [email protected]
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. [email protected]
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. [email protected]
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. [email protected]
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
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 :
- 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)
- 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. [email protected]
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 pour
comprendre le concept, 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.
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 !