Question

我正在使用Devise来处理我的身份验证需求。注册和登录设计表单以Bootstrap 3模式显示。当提交时发生错误时，我希望在页面回发后保持此模态打开。现在，模态消失了。

我想解决的问题是，当提交时发生错误时，如何保持模态打开以在回发后显示错误消息？

我想知道这样做的最佳方法是什么。代码如下。

主页视图 - 注册模态

<div class="modal fade" id="mod_SignUp">
      <div class="modal-dialog">
        <div class="modal-content">
          <div id="user" class="registration-modal-body small-top-spacer">
            <div class="modal-header">
              #Devise error label goes here#
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>Step 1 - Sign Up</h3>
            </div>
                <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
                    <%= devise_error_messages! %>
                    <div class="form-group">
                        <div class='row small-topdown-spacer'>
                            <label id="lbl_error_email" class='label label-danger'></label>
                        </div>
                        <%= f.email_field :email, :id => 'txt_email', :class => 'form-control', :placeholder => 'E-mail'%>
                    </div>
                    <div class="form-group">
                        <label id="lbl_error_password" class="label label-danger small-topdown-spacer"></label>
                        <%= f.password_field :password, :id => 'txt_password', :class => 'form-control', :placeholder => 'Password' %>
                    </div>
                    <div class="form-group">
                      <label id="lbl_error_password_confirmation" class="label label-danger small-topdown-spacer"></label>
                        <%= f.password_field :password_confirmation, :id => 'txt_confirm_password', :class => 'form-control', :placeholder => 'Confirm Password' %>
                    </div>
                </div>
           </div>
      </div>
<%= f.submit :Submit, :id => 'btn_Next', :class => 'btn btn-success' %>

           $('#btn_SignUp').click(function () {
            $('#mod_SignUp').modal();
        });

设计注册控制器方法

 # POST /resource

def创建 build_resource（sign_up_params）

resource_saved = resource.save
yield resource if block_given?
if resource_saved
  if resource.active_for_authentication?
    set_flash_message :notice, :signed_up if is_flashing_format?
    sign_up(resource_name, resource)
    respond_with resource, location: after_sign_up_path_for(resource)
  else
    set_flash_message :notice, :"signed_up_but_#{resource.inactive_message}" if is_flashing_format?
    expire_data_after_sign_in!
    respond_with resource, location: after_inactive_sign_up_path_for(resource)
  end
  clean_up_passwords resource
  respond_with resource
end

端

路线

root to: 'home#index'

 devise_for :users
 as :user do
    post 'home', to: 'registrations#create'
 end

 get "home/index"
 get 'home/get_email' => 'home#get_email'
 get "home/show" => "home#show"
 get "profile/new" => "profile#new"
 get "home/login" => "home#login"

Answer 1

我认为您可以使用Ajax来实现这一目标。如果您已经覆盖Devise::RegistrationsController，则只需修改respond_to方法：

代码Ruby

class RegistrationsController < Devise::RegistrationsController
  respond_to :html, :json
end

这将允许您使用HTML或JSON进行注册。

代码Haml

= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { id: "register-form" }) do |f|
/ ... code ...
/ ... code ...
  = f.submit :Submit

然后在您的Javascript / CoffeeScript中，您可以简单地发出Ajax请求：

Code CoffeeScript

$("#register-form").on 'submit', (e) ->
  e.preventDefault()
  $.ajax
    type: "POST"
    url: $(@).attr('action')
    data: $(@).serializeArray()
    dataType: "json"
    beforeSend: =>
      $(@).find('.form-error').remove()
    success: (user) =>
      # If saved, will here return the saved user
    error: (xhr) ->
      errors = $.parseJSON(xhr.responseText).errors
      # If any errors, "errors" will contains ActiveRecord validations errors
      console.log errors # JSON object containing errors

Ruby on Rails：在Devise中发生错误后，在Postback后保持Bootstrap Modal打开

主页视图 - 注册模态

设计注册控制器方法

路线

1 个答案: