时间戳

首页 > 解决方案 > 使用 Selectize 和 Ajax 时在 Bootstrap 模式中显示 Rails 错误消息

javascript - 使用 Selectize 和 Ajax 时在 Bootstrap 模式中显示 Rails 错误消息

问题描述

我正在尝试构建一个应用程序，允许用户分享艺术家对其他艺术家的引用。例如，鲍勃·迪伦（Bob Dylan）对约翰·列侬（John Lennon）的引用。因此，我的 Artist 模型的设置方式允许艺术家既是演讲者又是引用的主题，并且每个引用都属于每个艺术家作为演讲者或主题。

使用 Selectize 触发模式时，我无法在 Bootstrap 模式中显示 Rails 错误消息。我按照这个演示使模态工作。

模态用于Artist从quotes/new表单创建一个新的，但我无法获取Artist模型的错误消息以显示在 Bootstrap 模态或引号/新页面上。当我尝试在模态中创建触发错误消息（例如 validates_uniqueness）的内容时，它只会关闭模态并且不显示错误消息。其他一切都按预期工作。

将 Ajax 请求连接到视图时我缺少什么？

这是我的表格的相关部分：

<%= f.label :speaker, 'Who said it?' %>
<%= f.collection_select :speaker_id, @speakers, :id, :name,
{prompt: 'Select an artist'}, {class: 'form-control selectize-speaker'} %>

报价/form.html.erb的完整来源

这是我的控制器中的相关代码：

class ArtistsController < ApplicationController
  def create
    @artist = current_user.artists.build(artist_params)
    authorize @artist

    respond_to do |format|
      if @artist.save
        if request.referer.include?("artists")
          flash[:success] = "Artist was successfully created."
          format.html { redirect_to @artist }
        else
          format.json { render json: @artist }
        end
      else
        format.html { render :new }
        format.json { render json: @artist.errors.full_messages }
      end
    end
  end
end

Artists_controller.rb的完整源代码

相关的javascript代码：

$(document).on('turbolinks:load', function() {

  var selectizeCallback = null;

  // Selectize Speaker
  $('.speaker-modal').on('hide.bs.modal', function(e) {
    if (selectizeCallback != null) {
      selectizeCallback();
      selecitzeCallback = null;
    }

    $('#new_speaker').trigger('reset');
  });

  $('#new_speaker').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      method: 'POST',
      url: $(this).attr('action'),
      data: $(this).serialize(),
      success: function(response) {
        selectizeCallback({value: response.id, text: response.name});
        selectizeCallback = null;

        $('.speaker-modal').modal('toggle');
      }
    });
  });

  $('.selectize-speaker').selectize({
    create: function(input, callback) {
      selectizeCallback = callback;

      $('.speaker-modal').modal();
      $('#speaker_name').val(input);
    }
  }); // end selectize speaker
}); // end document on

quote.js的完整源代码。

而我的错误消息部分，shared/_error_messages.html.erb：

<% if object.errors.any? %>
  <div id='error_explanation'>
     <div class='alert alert-danger'>
        <button type='button' class='close' data-dismiss='alert'>&times;</button>
        <p><strong>The form contains
          <%= pluralize(object.errors.count, 'error') %>.</strong></p>
        <ul>
           <% object.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
           <% end %>
        </ul>
     </div>
  </div>
<% end %>

附加源文件：

模型/quote.rb

模型/艺术家.rb

控制器/quotes_controller.rb

标签： javascriptjqueryruby-on-railsajaxbootstrap-modal

解决方案

成功和不成功的保存都返回200响应，这意味着您的success回调将被调用：

  success: function(response) {
    selectizeCallback({value: response.id, text: response.name});
    selectizeCallback = null;

    $('.speaker-modal').modal('toggle');
  }

这总是切换模式，因此关闭它。

如果您确保响应是4xx验证错误，那么您可以定义一个error回调来填充您的错误列表并且不关闭模式。

所以而不是：

format.json { render json: @artist.errors.full_messages }

使用类似的东西：

format.json { render json: @artist.errors.full_messages, status: :bad_request }

然后，将error回调传递给您的 AJAX 调用：

error: function(response) {
  // somehow populate your errors list
  // display the errors list
}

但是，这现在不起作用，因为错误容器不存在：您只能在这种情况下渲染它：

object.errors.any?

在初始加载时，它总是会评估为假。相反，您可以做的是始终呈现错误容器，如果没有任何错误，则将其默认为某个隐藏类，并在您的error回调中，在填充隐藏类后将其删除。

推荐阅读