How do I get my new registrations Devise form to be AJAXified?

Question

What I want to happen is when the account is successfully created, the form that was submitted should disappear and a message should appear (depending on the status of the registration).

If it was successful, they should see a simple "Thank you. Please check your email."

If it wasn't, then they should see an appropriate message - like "Sorry, that email has already been taken."

This is my form:

<div class="nine columns offset-by-three sign-up-form">
  <%= form_for(resource, :as => resource_name, :class => "send-with-ajax", :url => user_registration_path(resource), :validate => true, :html => { :id => 'user_new' }) do |f| %>
    <div class="six columns alpha"> 
       <%= f.text_field :email, :placeholder => "[email protected]", :input_html => {:autofocus => true}, :validate => true %>
    </div>              
    <div class="three columns sign-up alpha">
      <%= f.submit :label => "Submit", :value => "Sign Me Up!"  %>
      <div class="ajax-response"><%= devise_error_messages! %></div>
    </div>
    <% end %>
  </form>
</div>

This is my create.js.erb:

$(document).ready(function() {    
  $('#user_new').submit(function() { 
    $(this).fadeOut(600).hide(); 
    $(this).append('<h3>Thank You. You should receive an email shortly.</h3>').fadeIn(1000);
  });    
)}

But this doesn't work properly. For instance, when I press submit and the email address is already in the db - nothing happens.

P.S. I know that if it were a 'regular' form, I would do format.js within the controller that is handling this form - and work out the status codes & messages there - but Devise is a different beast and I don't want to generate new controllers and override functionality that I shouldn't, when I am not fully comfortable.

Answer 1

As Devise uses respond_with on the Devise::Registrations controller you should be able to use a simple AJAX call to send the form and retrieve the response. This is the simplest form that I know.

To do that, add this Javascript code to your sign up form page:

$("#user_new").submit(function(){
  $.ajax({
    url: "/users",
    success: function(){
      $(this).fadeOut(600).hide(); 
      $(this).append('<h3>Thank You. You should receive an email shortly.</h3>').fadeIn(1000);
    },
    error: function(){
      // Put your error code here
    }
  });
});

If you want to use the create.js.erb file after the creation, you should do this:

• Add :format => :js and :remote => true to your form_for

• Only this code should be on create.js.erb file:

  $("#user_new").fadeOut(600).hide().append('<h3>Thank You. You should receive an email shortly.</h3>').fadeIn(1000);
  

Doing this way, Devise will execute the :js file content after AJAX response in case of success.