Question

Without remote: true in my form, the login works. But, when using remote: true, and attempting to login via ajax, I receive this error:

You need to sign in or sign up before continuing.

The requests are both post. Can somebody enlighten me?

Answer 1

There are some steps that you need to follow:

1) Check whether the request made is of javascript.

To verify that you should check the request header to see what the Accept parameter is. If it says application/javascript then it’s all good. Use tools like firebug to check the request headers easily.

2) What javascript files are included?

Secondly, a very common problem when starting to try out the :remote => true is that the required javascript libraries are not included in your code. So my guess is that the following code is missing from your layout:

<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>

If that is the case, just include it inside the html header.

3) Check the controller: does it have a respond_to block?

If you generated your app with rails generate scaffold, it will have something like

 respond_to do |format|
      format.html
      format.xml  { .... }
    end

Replace the above code with:

respond_to :html, :js

OR

respond_to do |format|
      format.html
      format.js
      format.xml  { .... }
    end

4) Setup CSRF Token in your application.js

$(function(){
  $.ajaxSetup({
    beforeSend: function( xhr ) {
      var token = $('meta[name="csrf-token"]').attr('content');
      if (token) xhr.setRequestHeader('X-CSRF-Token', token);
    }
  });
});

5) Post your login information

$.ajax({
  url: '/users/sign_in.json',
  type: 'POST',
  dataType: 'json',
  data: {user: {email: '[e-mail]', password: 'password'}},
  success: function(data, textStatus, xhr) {
    //called when successful
  }
});