Comment utiliser les effets Scriptaculous sur les messages d'erreur

Question

Je veux utiliser des effets Scriptaculous sur les messages d'erreur. Ma première idée est de mettre des messages d'erreur dans les balises div et d'utiliser page.visual_effect dans le contrôleur. Mais je ne sais pas comment choisir les divs corrects qui seront affectés. Ou devrais-je mettre certaines conditions if dans la vue et les appeler à partir de là. Au fait, je ne sais pas comment ça. Ne pouvons-nous pas faire quelque chose comme f.error_message_on "name", :visual_effect => ... Toute aide sera appréciée.

Answer 1

Vous êtes sur la bonne voie avec l'emballage en divs , mais vous pouvez le faire de cette façon dans la vue:

<%= f.error_message_on "name", 
     :css_class => "inputError" %> 

Il y a probablement beaucoup de façons de faire il. Avoir le contrôleur retourne rjs est un moyen. Pour être discret, considéré comme la meilleure pratique, vous devez inclure un fichier javascript qui déclenche la méthode scriptaculous lorsque la page est chargée. J'utilise la librairie low pro pour javascript discret. Voici ma suggestion:

fichier de mise en page:

<%= javascript_include_tag :defaults, ‘lowpro’, 'form_behaviors.js' %> 

javascript_file_for_form_actions.js:

Event.addBehavior({ 
    '.inputError' : function() { 
    this.hide(); 
    this.blindUp(); 
    } 
}); 

Vous pouvez également charger conditionnellement le fichier javascript à l'aide content_for et modifier votre fichier de mise en page.

Voir fichier:

<% content_for(:javascript) do %> <%= javascript_include_tag “form_behaviors” %> 
<% end %> 

Quelque part dans le fichier de mise en page:

<% yield :javascript %> 

Vous pouvez obtenir un unobtrusive plugin qui comprend LowPro pour vous aussi. Pour plus d'informations, Peepcode a un bon pdf à propos de lowpro, ainsi que quelques bons screencasts sur javascript.

Answer 2

Il suffit de mettre votre message d'erreur dans un élément identifiable comme:

<div id="bob">error messages here</div> 

Ensuite, dans votre javascript que vous pourriez faire quelque chose comme:

$('bob').blindUp();