Rails 5：使用rails-ujs和jquery处理错误消息

Question

在Rails 5.1.6中我试图使用rails-ujs和jquery处理表单的错误消息。

lot.rb

class Lot < ActiveRecord::Base

    belongs_to :user

    mount_uploader :lot_image, LotImageUploader
    serialize :lot_images, JSON # If you use SQLite, add this line.
    default_scope -> { order('created_at DESC') }

    validates_processing_of :lot_image
    validate :image_size_validation
    validates :price, :lot_image, :description, presence: true

  private

    def image_size_validation
      errors[:lot_image] << "should be less than 5MB" if lot_image.size > 5.megabytes
    end
end

lots_controller.rb

...
  def index
    @lot = current_user.lots.build
    @lots = current_user.lots.paginate(page: params[:page])
  end
...
  def create
    @lot = current_user.lots.create(lot_params)

    respond_to do |format|
      if @lot.save
        format.html { redirect_to @lot, notice: 'Lot was successfully created.' }
        format.json { render :show, status: :created, location: @lot }
        format.js
      else
        #format.html { render action: "new" }
        format.json { render json: @lot.errors.full_messages, status: :unprocessable_entity }

      end
    end
  end
...

正如预期的那样，当我提交无效表单时，我在浏览器控制台422中看到状态和json响应：

0."Price can't be blank" 
1."Lot image can't be blank"
2."Description can't be blank"

问题是如何用rails-ujs呈现这个json响应？

_form.html.erb

<%= form_with(model: @lot, remote: true, id: :new_lot) do |form| %>
  <div id="errors"></div>

  <%= tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %>

  <%= form.label :description, class: "label label-default" %>
  <%= form.text_area :description, class: "form-control", id: :lot_description, autofocus: true %>

  <%= form.label :price, class: "label label-default" %>
  <%= form.text_field :price, class: "form-control", id: :lot_price %>   

  <%= form.label :lot_image, class: "label label-default" %>
  <%= form.file_field :lot_image, id: :lot_lot_image %>
    <p class="help-block">image must be present, less than 5 Mb.</p>   

  <%= form.submit "create a lot", class: "btn btn-default", data: { "disable-with": "Saving..." } %>
<% end %>

create.js.erb

$('#new_lot').remove();
$('#new_lot_link').show();
$('#lots').prepend('<%= j render(@lot) %>')

的application.js

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require bootstrap
//= require_tree .


$(document).on("ajax:error", function(event) {
  var detail = event.detail;
  var data = detail[0], status = detail[1],  xhr = detail[2];

  var errors, message, results;
  errors = xhr.responseJSON.error;
  results = [];
  for (message in errors) {
    results.push($('#errors ul').append('<li>' + errors[message] + '</li>'));
  }
  return results;
});

出了什么问题？感谢您的解释，尤其是解决方案（;

Answer 1

就像地球上的最后一个人一样，我在跟自己说话（8

我解决了这个问题。也许有人也会感兴趣。

$(document).on("ajax:error", function(event) {
  var detail = event.detail;
  var data = detail[0], status = detail[1],  xhr = detail[2];
  var errors = JSON.parse(xhr.responseText);
  var er ="<ul>";
    for(var i = 0; i < errors.length; i++){
        var list = errors[i];
        er += "<li>"+list+"</li>"
   }
    er+="</ul>"
    $("#errors").html(er);
});

Answer 2

这样怎么样？它不干净，因为有一些控制器在js文件中工作，但它适用于我。我也找不到其他简单的方法。

create.js.erb

<% if [email protected]? %>
  $('#new_lot').remove();
  $('#new_lot_link').show();
  $('#lots').prepend('<%= j render(@lot) %>')
  <% @lot = Lot.new %>
<% end %>
$("#new_lot_form").html("<%= j (render 'form', lot: @lot) %>")

确保在_form.html.erb partial中显示错误。

<% if lot.errors.any? %>
  <%= render 'shared/error_messages', object: form.object %>
<% end %>

当您使用创建操作中的@lot变量重新加载表单时，它会显示错误按摩。如果没有错误，它将附加新记录并需要创建新的@lot变量<％@lot = Lot.new％>，因为否则表单将获得已保存的对象，下次将发送给您更新操作。

将format.js添加到lots_controller.erb中的if @ lot.save的else部分

...
respond_to do |format|
  if @lot.save
    format.html { redirect_to lots_path, notice: 'Lot was successfully created.' }
    format.json { render :show, status: :created, location: @lot }
    format.js
  else
    format.html { render :index }
    format.json { render json: @lot.errors, status: :unprocessable_entity }
    format.js
  end
end
...

使用div＃new_lot在index.erb上换行表单

<div id="new_lot_form">
  <%= render 'form', lot: @lot %>
</div>