如何使用JS从.js.erb文件提交表单?

时间:2012-12-08 13:11:11

标签: jquery ruby-on-rails rjs

我有一个表单,当用户提交并且用户未登录时,他们会收到一个模式提示登录。一旦用户登录,模态就会消失,但是他们必须再次单击表单上的“提交”按钮。如果在成功登录后模态消失并且表单自动提交,那将是很好的。

所以在sessions/create.js.erb里面我添加了以下内容。

# create.js.erb
<% if signed_in? %>
    $('#ajax-modal').modal('hide').empty();
    $('#new_response).submit();
<% else %>
    $('#ajax-modal').html('<%= j render("sessions/form") %>').modal();
<% end %>

这有效,但不可扩展。首先,我可能有其他形式 - 不只是#new_response - 需要类似的行为。因此,每次添加新表单时,我都必须修改create.js.erb并添加if (form exists) submit();。还有其他时候使用模态进行登录,但根本不涉及任何形式。

有没有办法附加一个钩子来告诉sessions/create.js.erb只有在存在时提交表单,但不知道表单ID?基本上,已经过去了。

# responses/_form.html.slim
= form_for [@discussion, @response], remote: true do |f|
    = f.label :content, "Comments"
    = f.text_area :content, rows: 8
    = f.submit "Reply", class: 'btn btn-success reply', 'data-disable-with' => "Reply"

# Responses controller
class ResponsesController < ApplicationController
  before_filter :require_authentication, except: :index
  ...

  def require_authentication
    redirect_to signin_path unless signed_in?
  end
end

1 个答案:

答案 0 :(得分:1)

您可以使用某种方式来跟踪触发提交的表单,例如

# ResponsesController
class ResponsesController < ApplicationController
  before_filter :require_authentication, except: :index

  def require_authentication
    session[:form_track_code] = params[:form_track_code] if [:put, :post].include?(request.method_symbol) && params[:form_track_code].present?

    redirect_to signin_path unless signed_in?
  end
end

# SessionsController
class SessionsController < ApplicationController # or devise?
  def create
    @form_track_code = session.delete[:form_track_code]
    super # or whatever you implemented
  end
end

# create.js.erb
<% if signed_in? %>
    $('#ajax-modal').modal('hide').empty();
    <% if @form_track_code.present? %>
      $('input[type=hidden][value="<%= @form_track_code %>"]').parents('form').submit();
    <% end %>
<% else %>
    $('#ajax-modal').html('<%= j render("sessions/form") %>').modal();
<% end %>

# application.js
$('form[data-remote=true]').each(function() { $(this).append('<input type="hidden" name="form_track_code" value="' + Math.random() + '" />'); });