CODEWITHSUNDEEP
jqueryajaxruby-on-rails-3devise
marcamillion
marcamillion

Reputation: 33755

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

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.

Upvotes: 3

Views: 2604

Answers (2)

Nick Ginanto
Nick Ginanto

Reputation: 32130

the way that worked for me was to

first put in :remote => true in the sign up form

then there are 2 options

  1. to make sure that the controller where the form is repond_to :js and in the controller js file (specifically in my case it was the home action in the pages controller (pages#home) I would put in the home.js.erb something like 
 $(function() {
      return $(".new_user").ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
        if (jqXHR.status === 401) {
          $("#notice").fadeIn();
          $("#notice").html(jqXHR.responseText).fadeOut(1000);
        }
      });
    });
  1. the second option is to use the automatically used js file by rails/devise which is the create.js.erb which needs to be created under /views/devise/registrations. that file would be something like 
   $("#signUpForm").bind("ajax:success", function(xhr, data, status) {
  <% if resource.errors.full_messages.count <1 %>
      $("#noticesignup").html("Confirmation Mail Sent :) ");
  <% else %>
      $("#noticesignup").html("<%= escape_javascript ( devise_error_messages!) %>");
  <% end %>
});

and pretty much that's it

Upvotes: 0

Rodrigo Flores
Rodrigo Flores

Reputation: 2461

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.

Upvotes: 2

Related Questions