如何让我的新注册的设计形式予以Ajax化?我的、形式、Ajax

由网友(浮生三月初)分享简介:我希望发生的是成功创建帐户时,已提交表单应该消失,应该会出现一个消息(根据报名的情况)。What I want to happen is when the account is successfully created, the form that was submitted should disappear and...

我希望发生的是成功创建帐户时,已提交表单应该消失,应该会出现一个消息(根据报名的情况)。

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."

这是我的表格:

<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 => "your-email@address.com", :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>

这是我的 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);
  });    
)}

但是,这并不正常工作。例如,当我preSS提交和电子邮件地址已在数据库中 - 什么也没有发生。

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。我知道,如果它是一个普通的形式,我会做 format.js 正在处理此表控制器内 - 并制定出状态codeS&放;有消息 - 但设计是一个不同的野兽,我不希望产生新的控制器和覆盖功能,我不应该,当时我并不完全舒服

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.

推荐答案

由于设计采用 respond_with 制定::注册控制器,你应该能够使用一个简单的AJAX调用发送的形式和检索响应。这是我所知道的最简单的形式。

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.

要做到这一点,添加这个JavaScript code到你的注册表格页面:

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
    }
  });
});

如果您要在创建之后使用create.js.erb文件,你应该这样做:

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

添加:格式=&GT; :JS :远程=&GT;真正的的form_for

只有这code应该是 create.js.erb 文件: 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);

这样做的方式,制定将执行:在成功的情况下Ajax响应后的js文件内容

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

阅读全文

相关推荐

最新文章