使用Ajax提交我的Devise登录表单后，如何使jQuery .on（）工作？

Question

There are a number of questions about this on SO but none of them has provided a surefire answer for me. In my Rails 3.2 app the user has the option to create a new User or sign in as an existing User at the end of a certain form. To allow existing users to sign in, I have implemented a bootstrap modal with a Devise sign in form that submits via Ajax to my custom SessionsController. The Ajax request is working correctly and signing in a user without leaving the page, but I am having trouble getting my jQuery .on() handler to work so that some things on the page change after the successful request takes place. Below I have posted my code for the form, the RegistrationsController, and the jQuery snippet in a form that is just supposed to give an alert message when the sign in has an error (haven't gotten even that much to work).

I have tried adding something like render :json => {:foo => bar} to the controller because on some of the other questions people were saying that something has to be rendered for the request to be considered successful but that didn't fix my problem.

_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!');
    });
});

Answer 1

You need views/sessions/create.js.erb file, as a response to your ajax request.

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

And Change the following:

sign_in_and_redirect(resource_name, resource)

to

sign_in(resource_name, resource)

(to avoid redirecting the user after sign_in)

Answer 2

Well, let me clarify the issue you have, so that you can pick what suits you. Every action should have a data response type either (html, js, json, ...).

First you need to change

sign_in_and_redirect(resource_name, resource)

to

sign_in(resource_name, resource)

Second thing you need to respond with json:

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

You may also need to change the Form to have data-type

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

For More details check this example , showing how to use AJAX callbacks Instead of .js.erb