3

我想要发生的是成功创建帐户后，提交的表单应该消失并且应该出现一条消息（取决于注册的状态）。

如果成功，他们应该会看到一个简单的“谢谢。请检查您的电子邮件”。

如果不是，那么他们应该会看到一条适当的消息 - 例如“抱歉，该电子邮件已被占用”。

这是我的表格：

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

但这不能正常工作。例如，当我按下提交并且电子邮件地址已经在数据库中时 - 没有任何反应。

PS我知道如果它是一个“常规”表单，我会format.js在处理这个表单的控制器中做 - 并在那里计算状态代码和消息 - 但设计是一个不同的野兽，我不想生成新的当我不完全舒服时，控制器和覆盖我不应该的功能。

4

2 回答 2

2

正如 Deviserespond_with在Devise::Registrations控制器上使用的那样，您应该能够使用简单的 AJAX 调用来发送表单并检索响应。这是我所知道的最简单的形式。

为此，请将此 Javascript 代码添加到您的注册表单页面：

$("#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 文件，你应该这样做：

  • 添加:format => :js和:remote => true到您的form_for

  • 只有此代码应create.js.erb存档：

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

这样，Devise 会在 AJAX 响应成功后执行 :js 文件内容。

于 2012-06-19T12:41:22.573 回答
0

对我有用的方法是

首先在:remote => true注册表中输入

那么有2个选项

  1. 为了确保表单是 repond_to :js 的控制器和控制器 js 文件中的控制器（特别是在我的情况下，它是页面控制器（pages#home）中的主页操作，我会在 home.js.erb 中放入类似
 $(function() {
      return $(".new_user").ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
        if (jqXHR.status === 401) {
          $("#notice").fadeIn();
          $("#notice").html(jqXHR.responseText).fadeOut(1000);
        }
      });
    });
  1. 第二种选择是使用 rails/devise 自动使用的 js 文件，即 create.js.erb，需要在 /views/devise/registrations 下创建。该文件将类似于
   $("#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 %>
});

差不多就是这样

于 2012-11-01T05:15:17.553 回答