Rails 6.0.4 远程：true 不在浏览器中 js/ajax 渲染 _partial.html.erb

Posted 2023-02-15

【中文标题】Rails 6.0.4 远程：true 不在浏览器中 js/ajax 渲染 _partial.html.erb

【英文标题】：Rails 6.0.4 remote: true does not js/ajax render _partial.html.erb in browser

【发布时间】：2021-09-13 01:10:03

【问题描述】：

多年来，我一直使用以下 js/ajax "remote: true" 设置。

但是现在浏览器在被 action.js.erb 调用时不显示 _partial.html.erb。

控制台确实显示部分已呈现，但在浏览器 div 中不可见。

这是一个使用 Time.zone.now 的 js/ajax "remote: true" 设置的简单演示：

应用程序/_time_now.html.erb

<%= link_to Time.zone.now, time_now_path, remote: true %>

在网页上 - 注意类名（尝试使用和不使用 turbolinks）

<div class="time_now" data-turbolinks="false">
 <%= render "application/time_now" %>
</div> 

time_now.js.erb

$(".time_now").html('<%= j render partial: "application/time_now" %>');

其他 ***“js.erb 未在浏览器中呈现”问题无济于事。

Rails 6.0.4（第一次使用 Webpacker）

由于某种原因，在这个 Rails 6.0.4 应用程序上，这个“remote: true”设置在提交“remote: true”链接后无法 js/ajax 在浏览器中“显示”部分内容。

控制台确实显示部分已呈现，但在浏览器 div 中不可见。

完整的工作流程：

应用程序/_time_now.html.erb

<%= link_to Time.zone.now, time_now_path, remote: true %>

期望 js/ajax 在 class="time_now" div 内呈现部分内容：

<div class="time_now" data-turbolinks="false">
 <%= render "application/time_now" %>
</div> 

路线正在运行

get '/time_now', to: 'welcome#time_now', as: "time_now"

控制器欢迎正在工作

  def time_now
      
  end

并且 time_now.js.erb 有点工作。

为了测试，我添加了两个警报。奇怪的是第二个警报不起作用。

有没有比 ' j render partial: "some_partial" ' 更新的方法？

time_now.js.erb

alert('one - working!');
$(".time_now").html('<%= j render partial: "application/time_now" %>');
alert('two - NOT working!');

根据控制台，'application/_time_now.html.erb' 被渲染 - 但浏览器没有更新。

部分不显示在浏览器页面中：

Started GET "/time_now" for ::1 at 2021-06-30 23:15:20 +0300
Processing by WelcomeController#time_now as JS
  Rendering welcome/time_now.js.erb
  Rendered application/_time_now.html.erb (Duration: 0.4ms | Allocations: 89)
  Rendered welcome/time_now.js.erb (Duration: 0.7ms | Allocations: 178)
Completed 200 OK in 3ms (Views: 1.6ms | ActiveRecord: 0.0ms | Allocations: 745)

这段代码很简单，没有太多需要测试的地方。

Rails 6 javascript 设置可能是问题所在。 （再次，第一次使用 Webpacker）

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery-ui/ui/widget")
require("jquery-ui/ui/widgets/sortable")

import "jquery"
import "popper.js"
import "bootstrap"

import "clipboard"
import "jquery.raty-fa" 
import "leaflet"    
import "social-share-button"    

这太简单了，我一定忽略了一些明显的东西。

任何帮助和/或见解将不胜感激。

【问题讨论】：

启动了一个干净的 Rails 6.0.4 应用程序（rails new tester），问题仍然存在。仅使用默认的 'require("@rails/ujs").start()' 问题仍然存在。然后用 'require("@rails/ujs").start()' 和 'require("@jquery").start()' 运行它，问题仍然存在。

【参考方案1】：

我认为您的 jquery 设置 (webpack) 不正确，因此 $ 为零，您可以轻松搜索如何设置，例如 this

另一种方式，您可以使用dom querySelector 代替jquery

// time_now.js.erb
time_now = document.querySelector(".time_now")
time_now.innerHTML = '<%= j render partial: "application/time_now" %>'

【讨论】：

谢谢！ - 是的，这很棒而且有效！我只是想办法解决这个问题。你是对的 - > jquery 不能作为工具提示和可排序的，其他的不能工作。我会按照你建议的链接。再次感谢您！

你是正确的 jquery 没有正确加载 - 你提供的链接有更正的设置说明 - 全部设置 - 你的 querySelector 建议有效 - 并且 jquery 工作我原来的 time_now.js.erb 也工作。谢谢！