【问题标题】:Ruby on Rails: Keep Bootstrap Modal open after Postback when error occurs in DeviseRuby on Rails:当设计中发生错误时,在回发后保持引导模式打开
【发布时间】:2014-04-28 04:12:31
【问题描述】:

我正在使用 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

定义创建 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"

【问题讨论】:

    标签: ruby-on-rails ruby devise


    【解决方案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 请求:

    代码 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
    

    【讨论】:

    • 咖啡脚本+1。谢谢。那么,这段代码的作用是,如果出错则发布错误而不是提交?
    • 无论如何,这都会发布您的表格。如果有错误,Devise 将返回:unprocessable_entity,这将触发带有 ActiveRecord 错误验证的错误回调(密码不匹配......等等......)。从那里,您可以在errors 上循环并将它们显示到表单上。对于成功的部分,我通常简单地做一个简单的重定向window.location.replace("/"),因为我使用 Devise 可确认的,然后会在 root_path 上显示 flash 通知 You will receive an email...
    • @ElKey 我还没有开始尝试您的解决方案。一旦有机会尝试,我会将您的帖子标记为答案。
    • 请问您如何覆盖注册控制器?因为我按照你的方法做了,但我仍然有同样的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-04-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-03
    相关资源
    最近更新 更多