在使用Ajax提交Devise登录表单后,如何让jQuery.on()工作

How can I get jQuery .on() to work after submitting my Devise sign in form using Ajax?

本文关键字:jQuery on 工作 Ajax 提交 Devise 表单 登录      更新时间:2023-09-26

SO上有很多关于这方面的问题,但没有一个能给我一个肯定的答案。在我的Rails 3.2应用程序中,用户可以选择创建一个新用户或在某个表单末尾以现有用户身份登录。要允许现有用户登录,我已经用Devise登录表单实现了一个引导模式,该表单通过Ajax提交给我的自定义SessionsController。Ajax请求工作正常,并且在不离开页面的情况下登录用户,但我在让jQuery .on()处理程序工作时遇到了问题,因此在成功的请求发生后,页面上的某些内容会发生更改。下面,我发布了我的表单代码、RegistrationsController和jQuery片段,表单应该在登录出现错误时提供alert消息(甚至还没有那么多工作)。

我尝试在控制器中添加类似render :json => {:foo => bar}的内容,因为在其他一些问题上,人们说必须提供一些内容才能认为请求成功,但这并没有解决我的问题。

_new_signin.html.haml
...
      .modal-body
        = form_for(resource, :as => resource_name,
                     :url => session_path(resource_name) ,
                     :html => {:id => "sign_in_user"},
                     :format => :json,
                     :remote => true ) do |signin_form|
          .form-group 
            = signin_form.label :email
            = signin_form.email_field :email, class: 'form-control'
          .form-group
            = signin_form.label :password
            = signin_form.password_field :password, class: 'form-control'
          .form-group
            = signin_form.label :remember_me
            = signin_form.check_box :remember_me
          .form-group
            = link_to "Forgot your password?", new_password_path(:user)
            = signin_form.submit "Sign in", class: "btn btn-primary"

/

class SessionsController < Devise::SessionsController
    def create
        if request.xhr?
            resource = warden.authenticate!(:scope => resource_name, :recall => "#{controller_path}#failure")
            sign_in_and_redirect(resource_name, resource)
        else
            super
        end
    end

/

In my .js file...
...
$(document).ready(function() {
    $('#sign_in_user').on('ajax:error', function() {
        alert('error!');
    });
});

您需要views/sessions/create.js.erb文件作为对ajax请求的响应。

<% if current_user %>
  alert('Signed In');
<% else %>
  alert('error!');
<% end %>

并更改以下内容:

sign_in_and_redirect(resource_name, resource)

sign_in(resource_name, resource)

(避免在sign_in后重定向用户)

好吧,让我澄清一下你的问题,这样你就可以选择适合你的了。每个操作都应该有一个数据响应类型(html、js、json…)

首先,您需要更改

sign_in_and_redirect(resource_name, resource)

sign_in(resource_name, resource)

您需要使用json:进行响应的第二件事

respond_to do |format|
    format.json { render :json =>  resource }
end

您可能还需要更改表格以获得data-type

= form_for(resource, :as => resource_name, :url => session_path(resource_name) :remote => true, :html => {:'data-type' => 'json'})

有关更多详细信息,请查看此示例,显示如何使用AJAX回调而不是.js.erb