Rails intègre la lib JS Protoype. Avec, je peux faire un fichier bbxtest.js.rjs :
page.remove :results page.insert_html :bottom, 'main', :partial => 'bbxtest' page.visual_effect :highlight, 'results'
1ère ligne : je vire la div “results” pour éviter que les résultats de plusieurs requêtes s’affichent à la suite.
2ème ligne : j’insère en bas, dans la div “main”, le résultat de mon partial “bbxtest”
3ème ligne : je mets un petit effet de highlight sur la div results lorsqu’elle mise à jour (vous savez, le fond jaune pale qui vire au blanc).
Mon formulaire est :
<% form_remote_tag :url => '/users/name' do %> <%= text_field_tag(:query) %> <%= submit_tag "Go!" %> <% end %>
La différence avec un formulaire classique c’est le mot “remote”.
Pour l’instant, mon partial “bbxtest” ne fait qu’afficher le contenu de mon input text, ce même input qui est dans le form qui exécute cette requête Ajax!
D’ailleurs mon Controller correspondant est :
def bbxtest @query = params[:query] respond_to do |format| format.html format.js end end
J’ai format.html aussi, au cas où le JS est désactivé chez l’utilisateur.
En fait, y a 2 cas :
- JS actif : j’appelle bbxtest.js.rjs qui appelle mon partial _bbxtest.html.erb
- JS inactif : j’appelle bbxtest.html.erb qui lui aussi appelle mon partial _bbxtest.html.erb
Dans les deux cas, c’est mon partial “bbxtest” qui est affiché. Ca me fait en tout 3 fichiers. Je sais pas si je peux optimiser ça en fait.
Flux RSS
Du coup pour accéder à ta page avec JS activé il faut le spécifier dans la route, non ? (genre /:controller/bbxtest.js)
Ma méthode pour render la page adéquate en fonction de l’état d’activation du JS, c’est d’utiliser request.xhr? qui renvoie true si le JS est activé. Exemple:
def add_to_cart
product = Product.find(params[:id])
@cart = find_cart
@current_item = @cart.add_product(product)
redirect_to index unless request.xhr?
end
Il faut savoir que si ton fichier .rjs porte le même nom que ton contrôleur il sera rendu automatiquement après interprétation des instructions du contrôleur. Du coup ici j’ai un fichier add_to_cart.rjs qui est appelé automatiquement. Par contre si request.xhr? renvoie false (l’utilisateur a désactivé le JS), l’utilisateur est redirigé vers l’action index et le fichier add_to_cart.rjs n’est pas rendu.
Remarque: La norme est d’appeler je fichier xxxx.rjs et non xxxx.js.rjs. D’ailleurs Rails ne comprendra pas que le contrôleur et le rjs sont liés si tu ne respectes pas cette convention.