为什么在rails中调用局部时模态不起作用？

Question

基本设置工作：

translations / _edit_single_translation.html.erb

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

layouts / application.html.erb包含：

<%= render 'translations/edit_single_translation' %>

<div id="modal-window" class="modal hide fade modal-backdrop" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>

链接：

<a data-target="#exampleModalCenter" data-toggle="modal" data-backdrop="static" class="edit-image" data-remote="true" href="#">link</a>

因此可行

从applications.html.erb，我删除：

<%= render 'translations/edit_single_translation' %>

并将链接更改为：

<a data-target="#exampleModalCenter" data-toggle="modal" data-backdrop="static" class="edit-image" data-remote="true" href="/en/translations/edit_single_translation?label=name&amp;model=user">link</a>

在我放的javascript / packs / modal-action.js中：

$("#modal-window").find(".modal-content").html("<%= j (render partial: 'translations/edit_single_translation') %>");
$("#modal-window").modal('show');

现在不起作用。

添加时：

alert(\'<%= j (render partial: "translations/edit_single_translation") %>')

情态动作。我收到<%= j (render partial: "translations/edit_single_translation") %>]的警报

我想念什么？

[编辑]

我发现调用了'show'方法。搜寻了一两天，我发现它不是：

respond_to do |format|
    format.js
    format.html
end
我不得不放：

respond_to do |format|
    format.js { render :layout => false }
    format.html
end
在'显示'的翻译方法中。

然后我不得不移动

$("#modalDialog").html('<%= j (render partial: 'edit', locals: { items: @translation } ) %>');
$('#modal-window').modal();
从javascript/packs/modal-action.js到translations\show.js.erb

为了进行添加和更新，我将所有翻译都放在一个以id为键的范围内。在添加或编辑并关闭模态后更新相应的翻译：

$('#<%= params[:key].gsub(".","_") %>').html('<%= params[:value] %>');
$('#modal-window').modal('hide');
在translations\create.js.erb中和

$('#<%= params[:i18n_backend_active_record_translation][:key].gsub(".","_") %>').html('<%= params[:i18n_backend_active_record_translation][:value] %>');
$('#modal-window').modal('hide');
在translations\update.js.erb中我的添加表单是form_with，编辑是form_for

我的translations_controler.erb包含：

class TranslationsController < ApplicationController
  def index
  end

  def show
    @translation = Translation.find_by(:locale => find_locale,
                                        :key => params[:key])
    @key = params[:key]
    if @translation.nil?
      @Translation = Translation.new
    end
    respond_to do |format|
      format.js { render :layout => false }
      format.html
    end
  end

  def new
  end

  def create
    @translation = Translation.create(translation_create_params)
    respond_to do |format|
      if @translation.save
        I18n.backend.reload!
        format.json { head :no_content }
        format.js
      else
        format.json { render json: @customer.errors.full_messages, 
                            status: :unprocessable_entity }
      end
    end
  end

  def edit
  end

  def update
    respond_to do |format|
      @translation = Translation.find(t_id)
      if @translation.update(translation_update_params)
        I18n.backend.reload!
        format.json { head :no_content }
        format.js { } 
      else
        format.json { render json: @translation.errors.full_messages,
                                   status: :unprocessable_entity }
      end
    end
  end

  private
    def t_id
      params[:i18n_backend_active_record_translation][:id]
    end

    def find_locale
      params[:locale].nil? ? I18n.default_locale : params[:locale]
    end

    def translation_update_params
      params.require(:i18n_backend_active_record_translation).permit(:locale,
      :key, :value)
    end

    def translation_create_params
      params.permit(:locale, :key, :value)
    end
end

现在模态正在工作:)：）。

基本设置有效：translations / _edit_single_translation.html.erb

Answer 1

这里有很多混乱。