Respond_to js 与 JavaScript 一起返回 html 页面的一部分，而不是 js.erb 文件答案

【问题标题】：Respond_to js returns a part of the html page along with the JavaScript instead of js.erb fileRespond_to js 与 JavaScript 一起返回 html 页面的一部分，而不是 js.erb 文件
【发布时间】：2021-04-24 07:46:00
【问题描述】：

我正在尝试重写表单以显示为模态表单。为此，我使用了 popper 和 bootstrap lib，它们都包含在项目中并且可以正常工作。但是我没有成功，总是出现同样的错误：

VM44399:1 Uncaught SyntaxError: Unexpected token '<'
    at DOMEval (jquery3.self-74ad.js?body=1:112)
    at Function.globalEval (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:346)
    at text script (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9641)
    at ajaxConvert (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:8788)
    at done (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9256)
    at XMLHttpRequest.<anonymous> (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:9549)

我的 js 库：

// app/assets/javascripts/application.js 
 
/* External libraries */
//= require jquery3
//= require jquery_ujs
//= require popper
//= require bootstrap

在控制器中，我使用 respond_to 返回我的 js 文件：

 
def new
   respond_to do |f|
      f.js
   end
end

添加到 index.slim 模态类并将链接更改为 remote=true：

= link_to new_article_path, { remote: true,
                              'data-toggle' =>  "modal",
                              'data-target' => '#modal-window',
                              class: 'btn btn-outline-success' }
#modal-window.modal.fade[role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"]
   .modal-dialog.text-left[role="document"]
      .modal-content

将 new.slim 重命名为 _new.slim 并为其添加模态类：

# ArticlesController

.card.modal-header
  .card-body.w-100
    h5.card-header New Article
    = render 'form'

使用添加和调用模态窗口的js创建new.js.erb：

$("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
$("#modal-window").modal();

因此，我仍然得到一些难以理解的 html 的一部分，其中包含一堆脚本标记，如我所理解的 <script src="/assets/jquery-ui/，这只是整个应用程序页面的一部分，其中有带有 new.js 的代码。 erb 只是代码的形式。

这可能是什么问题？

感谢您的回答！

【问题讨论】：

标签： javascript jquery ruby-on-rails bootstrap-modal

【解决方案1】：

可能在控制器中遵循更多的导轨约定：

def new
  @article = Article.new
end

def create
  @article = Article.create!(article_params)

  respond_to do |format|
    format.js
  end
end

【讨论】：

【解决方案2】：

通过在format.js里面或者respond_to方法之前添加render layout: false解决问题：

def new
   respond_to do |format|
     format.js { render layout: false }
   end
end

【讨论】：