Question

我正在使用Eric London的一个例子http://ericlondon.com/2014/03/13/rails-4-submit-modal-form-via-ajax-and-render-js-response-as-table-row.html

并对我的情景稍作调整：

在编辑团队（模型）时，我想弹出一个模态表单来添加新用户。我可以得到这个工作，即当所有字段都正确时，记录被保存并且模态关闭，但是当出现问题时我没有将错误带回模态。我也不确定如何正确构建Create控制器动作 - 这绝对不对。

在Users控制器中，创建动作（如下所示）我可以按照预期保存记录，我已经注释掉原始代码（我仍然需要这个 - 它是普通用户管理的默认值）

def create
    #if params[:modal].nil? || params[:modal] == ''
    #  create! { users_url }
    #else  
      respond_to do |format|
        password = Devise.friendly_token.first(6)
        @user.password = password
        @user.password_confirmation = password
        @user.external = true
        if @user.save!
          format.js   { render action: 'show', status: :created, location: @user }
        else
          format.js   { render json: @user.errors, status: :unprocessable_entity }
        end
      end
    #end  
  end

show.js.erb视图

$('#new_user_modal').modal_success();

和application.js代码：

$(document).ready(function(){
  $(document).bind('ajaxError', 'form#new_user', function(event, jqxhr, settings, exception){
    // note: jqxhr.responseJSON undefined, parsing responseText instead
    $(event.data).render_form_errors( $.parseJSON(jqxhr.responseText) );
  });
});

(function($) {

  $.fn.modal_success = function(){
    // close modal
    this.modal('hide');

    // clear form input elements
    // todo/note: handle textarea, select, etc
    this.find('form input[type="text"]').val('');

    // clear error state
    this.clear_previous_errors();
  };

  $.fn.render_form_errors = function(errors){

    $form = this;
    this.clear_previous_errors();
    model = this.data('model');

    // show error messages in input form-group help-block
    $.each(errors, function(field, messages){
      $input = $('input[name="' + model + '[' + field + ']"]');
      $input.closest('.form-group').addClass('has-error').find('.help-block').html( messages.join(' & ') );
    });

  };

  $.fn.clear_previous_errors = function(){
    $('.form-group.has-error', this).each(function(){
      $('.help-block', $(this)).html('');
      $(this).removeClass('has-error');
    });
  }

}(jQuery));

在团队表格中，我有链接和模态定义：

<%# Added Bootstrap data modal attribute %>
<%= link_to 'Add an External User', '#new_user_modal', 'data-toggle' => 'modal', class: 'btn btn-default' %>

<%# Bootstrap modal markup. @see: http://getbootstrap.com/javascript/#modals %>
<div class="modal fade" id="new_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Create new User</h4>
      </div>
      <div class="modal-body">
        <%# Render the new person form (passing modal => true to enable remote => true) %>
        <%= render 'users/new', modal: true %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在users / _new.html.erb视图中我有：

<% @user = User.new %>
<%= simple_form_for @user, remote: true, input_html: {role: :form, 'data-model' => 'user'} do |f| -%>

  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

    <fieldset>
      <!-- username -->
      <%= f.input :remote_id, label: "Payroll Code / Username" %>

      <!-- basic settings -->
      <div class="row">
        <div class="col-md-6">
                <%= f.input :first_name %>
            </div>
            <div class="col-md-6">
            <%= f.input :last_name %>
        </div>
      </div>
        <%= f.input :email %>
    </fieldset>

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

<% end -%>

所以，总结一下我在哪里：

我想在编辑另一个时从模态表单添加新用户模特
上述方法大多有效......
但是非常难看 - 它感觉不对/乱，我对它不满意。

Answer 1

似乎你没有任何帮助阻止＆＃39;表格上的课程。

尝试：

$.each(errors, function(field, messages){
  $input = $('input[name="' + model + '[' + field + ']"]');
  $span_error = $("<span></span>").addClass('help-block').html( messages.join(' & ') );
  $form_input = $input.closest('.form-group').addClass('has-error').find('.form-control');
  $span_error.insertAfter($form_input);
});

而不是：

// show error messages in input form-group help-block
$.each(errors, function(field, messages){
  $input = $('input[name="' + model + '[' + field + ']"]');
  $input.closest('.form-group').addClass('has-error').find('.help-block').html( messages.join(' & ') );
});

Rails4 + bootstrap3模式形式到不显示ajax错误的不同模型

1 个答案: