Adding Javascript effects to a form in RoR

Question

Hopefully I can be clear on my issue. If you need more clarification on what I mean, please let me know and I'll try to clear up anything I can.

I am currently working on a simple Ruby on Rails project and I want to add some interactivity to my login form. Currently, the login form works fine if you click the Login link which then takes you to the new_user_sessions page. But I want to cut out the redirection and when the user clicks Login, the login form will be revealed in about 700 milliseconds on that same page. I plan to simply just use the function show(700) to reveal the login form. The problem I'm having is, I figured I could put this login form in the layouts directory so the user could have possibility of logging in from every page. The thing is my login form relies on a @user_session object from the User_sessions (using authlogic) controller. Here is what my new.html.erb file for the User_sessions controller contains:

<%= form_for @user_session do |f| %>
<%= render '/shared/error_messages', :target => @user_session %>

<p>
  <%= f.label :username %><br />
  <%= f.text_field :username %><br />
</p>
<p>
  <%= f.label :password %><br />
  <%= f.password_field :password %><br />
</p>
<p class="button">
  <%= f.submit "Submit" %>
</p>
<% end %>`

When a user clicks the Login link I would like this form to been shown via the show() function. Is there a way I can do this? Maybe by having some sort of render statement in the application.html.erb that renders this new User_sessions view? Thanks for any help.

Answer 1

Put your login form into a partial:

app/views/user_sessions/_login.erb

<%= form_for user_session do |f| %>
<%= render '/shared/error_messages', :target => user_session %>

<p>
  <%= f.label :username %><br />
  <%= f.text_field :username %><br />
</p>
<p>
  <%= f.label :password %><br />
  <%= f.password_field :password %><br />
</p>
<p class="button">
  <%= f.submit "Submit" %>
</p>
<% end %>

Render the partial from your layout:

app/views/layout/application.html.erb

<% if @user_session %>
  <%= render "user_sessions/login", :user_session => @user_session %>
<% end %>

And finally, make sure you set @user_session to an empty UserSession object where appropriate:

app/controllers/application_controller.rb

before_filter :set_user_session
protected
  def set_user_session
    # do some logic here to set @user_session when appropriate.
  end

Answer 2

In the view, use the above suggestion, by creating a login partial and have it render in something like

<div id="login_div" style="display:none">
    <%= render :partial => "login" %>
</div>

For the login link (the one that is supposed to show the login, you could just add the :remote => true property and then in your login action (the one that displays the login form),

respond_to do |wants|
   wants.html { redirect_to :login }
   wants.js { render :action => "login.js.erb" }
end

And then in your login.js.erb you can do

$("#login_div").show(700)

This way you can also support those who have JS disabled. Alternatively, you could do all this solely in the application.js file (if using jQuery):

$('#login_link').click(function(e) {
    e.preventDefault()
    $("#login_div").show(700)
}

This is a lot more unobtrusive solution.