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

I'm trying to build an app that allows users to share quotes by artists about other artists. For instance, a quote by Bob Dylan about John Lennon. As such, my Artist model is set up in a way that allows an artist to be both the Speaker and Topic on a Quote, and each Quote belongs_to each Artist as the Speaker or Topic.

我正在尝试构建一个应用程序，允许用户分享艺术家关于其他艺术家的引用。例如，Bob Dylan关于约翰列侬的一句话。因此，我的Artist模型的设置方式允许艺术家在报价中同时成为演讲者和主题，每个报价都属于每个艺术家作为演讲者或主题。

I'm having trouble getting a Rails error message to display inside a Bootstrap modal when using Selectize to trigger the modal. I got the modal working by following this demo.

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

The modal is used to create a new Artist from the quotes/new form, but I can't get the error messages for the Artist model to display in the Bootstrap modal or on the quotes/new page. When I try to create something that triggers an error message (such as validates_uniqueness) in the modal, it just closes the modal and doesn't display the error message. Everything else is working as expected.

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

What am I missing to connect the Ajax request to the view?

将Ajax请求连接到视图时我错过了什么？

Here's the relevant section of my form:

这是我表格的相关部分：

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

Full source for quotes/form.html.erb

引号/ form.html.erb的完整来源

Here's the relevant code in my controller:

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

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

Full source for artists_controller.rb

artists_controller.rb的完整源代码

Relevant javascript code:

相关的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

Full source for quotes.js.

quotes.js的完整来源。

And my error message partial, shared/_error_messages.html.erb:

我的错误消息部分，共享/ _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 %>

Additional source files:

其他源文件：

models/quote.rb

车型/ quote.rb

models/artist.rb

车型/ artist.rb

controllers/quotes_controller.rb

控制器/ quotes_controller.rb

1 个解决方案

#1

Both a successful and unsuccessful save are returning a 200 response, which means that your success callback will be called:

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

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

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

This always toggles the modal, therefore closing it.

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

If you ensure that the response is a 4xx on validation error, then you can define an error callback which populates your errors list and does not close the modal.

如果确保响应是验证错误的4xx，则可以定义错误回调，填充错误列表并且不关闭模态。

So instead of:

所以代替：

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

Use something like:

使用类似的东西：

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

Then, pass an error callback to your AJAX call:

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

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

This won't work right now, though, because the errors container won't exist: you only render it under this condition:

但是，这不会立即生效，因为错误容器将不存在：您只在这种情况下呈现它：

object.errors.any?

Which, on initial load, will always evaluate false. What you can instead do is always render the errors container, default it to some hidden class if there aren't any errors, and in your error callback, remove the hidden class after it's populated.

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

1 个解决方案

#1

更多相关文章

随机推荐