Comment puis-je faire AJAX-y afficher/masquer des champs conditionnels dans Rails?

Question

Je souhaite afficher ou masquer quelques champs dans un formulaire dans Rails, en fonction de l'état d'un champ de sélection dans le formulaire. Je n'ai pas (actuellement) besoin d'une deuxième recherche de base de données pour les champs, donc j'essaye de garder tout cela confiné à la vue. J'ai esquissé les grandes lignes, mais j'ai des problèmes avec les détails d'implémentation.

Ma première pensée était d'utiliser observe_field et d'appeler Element.show etc etc., mais ensuite je devrais écrire un Javascript conditionnel. Cela va probablement devoir marcher, mais je veux l'éviter si je le peux.

Une autre approche serait d'utiliser observe_field pour demander un modèle RJS, et replace_html pour insérer les champs. Pas mal, mais puisque j'utilise un bloc form_for, je devrais soit passer l'instance du formulaire tout au long du modèle RJS pour le faire correctement.

Je pourrais aussi mettre à jour l'enregistrement à chaque passage, et afficher le formulaire dans les nouvelles conditions, mais c'est ce que j'essaie d'éviter. Ce serait tellement plus simple de faire tout cela dans la vue.

Qu'est-ce qui me manque ici? Quelle est la pratique acceptée pour les formes show/hide conditionnelles dans Rails?

Answer 1

En tant que développeur de rails, je suggère de respecter les principes du JavaScript non intrusif. En ce qui concerne les rails, cela signifie généralement que vous ne devez pas écrire une grande vue pour gérer toutes vos fonctionnalités. Cela facilite le développement et la maintenance de votre vue HTML, facilite le maintien de votre comportement et permet généralement de mieux comprendre exactement ce que fait votre application. Dans cette mesure, j'évite à tout prix les assistants javascript.

Ce que je ferais, c'est partager votre comportement dans un fichier javascript que vous codez vous-même. En utilisant une bibliothèque comme jquery (mon préféré pour ce genre de choses est lowpro, mais je serai le premier à admettre que je suis un peu à ma place), il est assez facile d'attacher un gestionnaire d'événements à des éléments spécifiques (ou toute une classe d'éléments à la fois).

Pour une zone de sélection, un gestionnaire onChange est déclenché lorsque l'utilisateur modifie la sélection. la propriété selectedIndex de l'élément vous indiquera quelle option est sélectionnée et le tableau options vous permettra de rechercher l'option associée. Donc, dans votre gestionnaire, vous pouvez faire quelque chose comme ce qui suit (en utilisant prototype):

function(e) { 
    var element = Event.element(e) 
    var index = element.selectedIndex 
    var option = element.options[index] 

    if(option.value == "Show fields") 
    $('hidden-fields').show() 
    else 
    $('hidden-fields').hide() 
} 

Answer 2

Je manient la même chose quelques façons différentes:

<%= link_to_function(check_box_tag "model[attribute_name]") do |page| 
    page.toggle :model_attribute_name 
end-%> 

<span style="display:none;" id="model_attribute_name"> 
<%= f.text_area :other_conditional_attribute -%> 
</span> 

ou

<%= link_to_function "Conditional Item", :class => "your-style-class" do |page| 
    page.insert_html :bottom, :other_conditional_attribute, :partial => 'conditional_attribute_partial', :object => Object.new, :locals => {:local_variable => local_variable} 
end-%> 

Le trucs rjs/prototypes helpers sont géniaux.
Rails API: PrototypeHelpers
Rails API: JavascriptHelpers

Answer 3

Je suggère d'utiliser une fonction simple JQuery le long des lignes de:

$('a#slick-show').click(function() { 
    $('#slickbox').show('slow'); 
    return false; 
    }); 

Pour les bases de montrer/cacher dans Jquery, il y a un tutoriel here.