如何使用Ajax更新用户？

Question

我在这方面到处搜索，但我所能找到的都是关于“如何使用Ajax在用户中使用Designe登录”的教程。相反，我想要的是“如何使用ajax使用Design-正确地更新用户”。

到目前为止，我已经通过Ajax成功地更新了用户。但是，如果有错误，这些错误将不会显示。这就是我需要帮助的地方。

下面是表单现在的样子：

​

​

以下是与此设计表单相关的文件：

views/devise/registrations/edit.html.erb:

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }, remote: true) do |f| %>
            <%= devise_error_messages! %>

            <% if @user.provider.blank? %>
              <div class="row row-condensed space-4">
                <label class="col-sm-3" for="user_first_name">
                  Current Password
                </label>
                <div class="col-sm-9 form-group">
                  <%= f.password_field :password, autocomplete: "off", class: "form-control" %>
                </div>
              </div>

              <div class="row row-condensed space-4">
                <label class="col-sm-3" for="user_first_name">
                  New Password
                </label>
                <div class="col-sm-9 form-group">
                  <%= f.password_field :password, autocomplete: "off", :class => "form-control", :required => true %>
                </div>
              </div>

              <div class="row row-condensed space-4">
                <label class="col-sm-3" for="user_first_name">
                  Re-type Password
                </label>
                <div class="col-sm-9 form-group">
                  <%= f.password_field :password_confirmation, autocomplete: "off", :class => "form-control", :required => true %>
                </div>
              </div>

              <div class="actions">
                <%= f.submit "Update", class: "btn btn-primary btn-md" %>
              </div>              

            <% end %>  

          <% end %>

controllers/registrations_controller.rb

class RegistrationsController < Devise::RegistrationsController

  def create
    super
  end

  def update
    # For Rails 4
    account_update_params = devise_parameter_sanitizer.sanitize(:account_update)

    # required for settings form to submit when password is left blank
    if account_update_params[:password].blank?
      account_update_params.delete("password")
      account_update_params.delete("password_confirmation")
    end

    @user = User.find(current_user.id)
    if @user.update_attributes(account_update_params)
      set_flash_message :notice, :updated
      # Sign in the user bypassing validation in case their password changed
      sign_in @user, :bypass => true
      redirect_to edit_user_registration_path, notice: 'Your details was successfully updated.' 
    else
      render "edit"
    end
  end

end

因此，我的问题是，我如何修改这些，以便闪存消息将显示如下图片通过AJAX？

​

​

Answer 1

感谢Omkar，我成功地解决了这个问题。不过，我改变了一些东西，以使它完美地工作。以下是我最新的代码：

controllers/registrations_controller.rb:

  def update
    # For Rails 4
    account_update_params = devise_parameter_sanitizer.sanitize(:account_update)

    # required for settings form to submit when password is left blank
    if account_update_params[:password].blank?
      account_update_params.delete("password")
      account_update_params.delete("password_confirmation")
    end

    @user = User.find(current_user.id)

    @update = update_resource(@user, account_update_params)
    if @update 
      # Sign in the user bypassing validation in case their password changed
      sign_in @user, :bypass => true
    end

    respond_to do |format|
      format.html
      format.js
    end
  end

views/devise/registrations/update.js.erb:

<% if @update %>
  window.location.replace('<%= edit_user_registration_path %>');
<% else %>

  <% if @user.errors.messages.size > 0 %>
    <% @user.errors.each do |attr,err| %>
        $('#js-error-block').append('<%= attr %> <%= err %> <br/>');  
        $('.alert').show(); 
    <% end %>
  <% end %> 

<% end %>

views/devise/registrations/edit.html.erb:

<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }, remote: true) do |f| %>         
  <div class="alert alert-danger" style="display:none;">
    <div id='js-error-block'></div>
  </div>          

  <div class="row row-condensed space-4">
    <label class="col-sm-3" for="user_first_name">
      Current Password
    </label>
    <div class="col-sm-9 form-group">
      <%= f.password_field :current_password, autocomplete: "off", class: "form-control", :required => true  %>
    </div>
  </div>

  <div class="row row-condensed space-4">
    <label class="col-sm-3" for="user_first_name">
      New Password
    </label>
    <div class="col-sm-9 form-group">
      <%= f.password_field :password, autocomplete: "off", :class => "form-control", :required => true %>
    </div>
  </div>

  <div class="row row-condensed space-4">
    <label class="col-sm-3" for="user_first_name">
      Re-type Password
    </label>
    <div class="col-sm-9 form-group">
      <%= f.password_field :password_confirmation, autocomplete: "off", :class => "form-control", :required => true %>
    </div>
  </div>

  <div class="actions">
    <%= f.submit "Update", class: "btn btn-primary btn-md" %>
  </div>              
<% end %>

更改：

1. 我没有直接使用update_attributes(account_update_params)，而是使用update_resource(@user, account_update_params)并将其赋值给@update变量。否则，带有“未知属性'current_password'”的错误将出现
2. 我没有检查@user.valid?，而是检查@update是否成功
3. 我不使用<%= devise_error_messages! %>，而是循环@users错误，并相应地显示它。您可以在这里更多地参考这一点：http://api.rubyonrails.org/v2.3/classes/ActiveRecord/Errors.html#M001905

Answer 2

def update
  # For Rails 4
  account_update_params = devise_parameter_sanitizer.sanitize(:account_update)

  # required for settings form to submit when password is left blank
  if account_update_params[:password].blank?
    account_update_params.delete("password")
    account_update_params.delete("password_confirmation")
  end

  @user = User.find(current_user.id)
  if @user.update_attributes(account_update_params)
    # Sign in the user bypassing validation in case their password changed
    sign_in @user, :bypass => true
  end

  respond_to do |format|
    format.html
    format.js
  end

end

views/devise/registrations/update.js.erb：

<% if @user.valid? %>
  # Redirect To path
  window.location.replace('<%= edit_user_registration_path %>');
<% else %>
  # Show Errors
  $('#js-error-block').html('<%= devise_error_messages! %>');
<% end %>

意见/设计/登记/编辑.views.edit.html.erb：

在edit.html.erb中，添加div以使用javascript更新DOM。

<div id='js-error-block'></div>

流：

1. 用户提交表单(远程: true)
2. 更新操作将被调用
3. 因为请求是JS请求。update.js.erb将作为响应被呈现。
4. update.js.erb将有更新DOM的代码，或者用简单的语言更新edit.html.erb页面。

有关更多信息，您可以参考这个rails强制转换：

#136 jQuery & Ajax (修订版)