将Javascript效果添加到RoR中的表单

时间:2010-10-09 21:24:02

标签: javascript jquery ruby-on-rails authlogic

希望我能清楚我的问题。如果您需要进一步澄清我的意思,请告诉我,我会尽力清理。

我目前正在开发一个简单的Ruby on Rails项目,我想在我的登录表单中添加一些交互性。目前,如果您单击“登录”链接然后将您带到new_user_sessions页面,则登录表单可以正常工作。但我想删除重定向,当用户单击Login时,登录表单将在同一页面上显示大约700毫秒。我打算只使用函数show(700)来显示登录表单。我遇到的问题是,我想我可以将这个登录表单放在layouts目录中,这样用户就可以从每个页面登录。问题是我的登录表单依赖于User_sessions(使用authlogic)控制器中的@user_session对象。以下是User_sessions控制器的new.html.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 %>`

当用户点击“登录”链接时,我希望通过show()功能显示此表单。有没有办法可以做到这一点?也许通过在render中使用某种application.html.erb语句来呈现这个新的User_sessions视图?谢谢你的帮助。

2 个答案:

答案 0 :(得分:0)

将您的登录表单放入部分:

应用/视图/ 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 %>

从布局中渲染部分:

应用/视图/布局/ application.html.erb

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

最后,请确保在适当的时候将@user_session设置为空的UserSession对象:

应用/控制器/ application_controller.rb

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

答案 1 :(得分:0)

在视图中,使用上面的建议,通过创建登录部分并使其呈现类似

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

对于登录链接(应该显示登录的链接,您可以添加:remote => true属性,然后在登录操作(显示登录表单的那个)中,

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

然后在你的login.js.erb中你可以做到

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

这样你也可以支持那些已经禁用JS的人。或者,您可以仅在application.js文件中完成所有这些操作(如果使用jQuery):

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

这是一个非常不引人注目的解决方案。