Rails 5 - Turbolinks 5,一些 JS 未在页面渲染上加载

2023-11-24

我有一个 Rails 应用程序,最近更新为5.0.0.RC1。大部分过渡都很顺利,但我在使用新的 Turbolinks 时遇到了一些麻烦。例如,在我的应用程序中,我使用这个 gem:

gem 'chosen-rails'

My application.js文件看起来像这样:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require best_in_place
//= require tether
//= require bootstrap
//= require chosen-jquery
//= require_tree .
//= require turbo links

当我单击链接并呈现视图时chosen-query (best_in_place也不起作用)在初始加载中不起作用,但如果我对页面进行硬刷新,那么它就可以工作。下面是我得到的结果的图像:

How it looks now

这是我希望它看起来如何的图像:

enter image description here

同样,如果我对页面进行硬刷新,则预期的外观会起作用,但在常规刷新后则不会redirect_to ...

我的下拉列表的代码如下所示:

= select_tag :screen, options_from_collection_for_select(@screens, "id",  "name"), id: "screen-selection", prompt: "Jump to screen", class: 'form-control  chosen-select', style: "max-width: 250px !important"

After a redirect_to它会产生以下 HTML:

<select name="screen" id="screen-selection" class="form-control chosen-select"  style="max-width: 250px !important">[...]</select>

...在硬页面重新加载后我得到这个:

<select name="screen" id="screen-selection" class="form-control chosen-select"  style="max-width: 250px !important; display: none;">[...]</select>

<div class="chosen-container chosen-container-single" style="width: 190px;" title="" id="screen_selection_chosen"><a class="chosen-single"><span>Jump to screen</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"><li class="active-result result-selected" data-option-array-index="0" style="">Jump to screen</li><li class="active-result" data-option-array-index="1" style="">tests</li></ul></div></div>

In a .coffee我尝试初始化的文件chosen像这样:

# enable chosen js
$('#screen-selection').chosen({
  width: '190px'
})

关于我做错了什么有什么想法吗?


使用 Turbolinks,JavaScript 只加载一次。关于硬刷新chosen有效是因为整个页面被重新渲染。一旦您单击某个链接,turbolinks 就会劫持该请求并将其转换为 ajax 请求(而不是整个页面刷新)。一旦收到请求,turbolinks 只会替换body页面的状态,让 JS 保持原来的状态。

要解决此问题,您需要将您选择的初始值设定项包装在turbolinks:load像这样的事件

$(document).on('turbolinks:load', function() {
  $('#screen-selection').chosen({
    width: '190px'
  })
})

有关更多信息,请参阅https://github.com/turbolinks/turbolinks#installing-javascript-behavior

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Rails 5 - Turbolinks 5,一些 JS 未在页面渲染上加载 的相关文章

  • 将 ruby​​ 类转换为模块比使用改进更好的方法?

    Module refine http ruby doc org core 2 0 0 Module html method i refine方法接受一个类和一个块并返回一个细化模块 所以我想我可以定义 class Class def inc
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 在 Web 应用程序中显示最新的提交值?

    我有一些 Rails 应用程序 我使用 Git 作为版本控制系统 我使用 GitHub 或 Beanstalk 作为存储库主机 从理论上讲 我想要做的事情非常简单 以某种方式在 Web 应用程序的页脚中显示最新的提交 ID 号 哈希值 这样
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • PHP 数组通过 JSON 转为 jquery 数组

    我有点困惑为什么以下不起作用 get php
  • 如何正确取消引用然后删除 JavaScript 对象?

    我想知道从内存中完全取消引用 JavaScript 对象的正确方法 确保删除时不会在内存中悬空 并且垃圾收集器会删除该对象 当我看这个问题时在 JavaScript 中删除对象 https stackoverflow com questio
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • 如何在服务调用后检查 rspec 中的数组更改?

    目标很简单 例如我们有一个数组 name ghost state rejected name donkey state rejected 运行服务调用后UpdateAllUsers 这会将所有用户更改为 accepted name ghos
  • 通过 ESI:include 设置 Cookie,如何?

    我正在尝试使用 esi 在我的网站上创建忍者缓存 这个想法是 该网站大部分是静态的 我只需要在用户是否登录时做一些花哨的事情 所以我试图在页面A上放置一个 并在页面B的应用程序中设置触发器 这样我就可以将页面 A 缓存在 varnish 上
  • Rails 3.1+ 的 Jasmine 与 Mocha JavaScript 测试 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我对茉莉花有经验并且非常喜欢它 有谁有 Jasmine 和 Mocha 的经验 特别是 Rails 的经验吗 我想知道是否值得转用 我已经在 J
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 如何从 json 文件创建模型? (ExtJS)

    这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 使用 ServiceStack.ORMLite 实现工作单元和存储库模式的最佳实践

    假设有两个存储库接口 interface IFooRepository void Delete int id interface IBarRepository void Delete int id 以及工作单元界面 例如 interface
  • React 从 URL 内联导入 SVG

    我正在解决一个问题 其中 SVG 图像需要从 URL AWS S3 加载到反应组件 我能够使用本地文件中的 SVG 内联反应组件成功显示和加载图像 但是 svg 文件需要从 S3 存储桶内联加载 JS svg 导入不适用于 URL 所以我想
  • 从 Python 中的 webbrowser.get() 调用 Chrome Web 浏览器

    我应该如何调用 webbrowser get 函数以便打开 chrome 网络浏览器 我正在运行 Ubuntu 11 04 和 Python 版本 2 7 使用 webbrowser get chrome 会产生错误 快速解决方法是将 Ch
  • HttpClient 不支持 PostAsJsonAsync 方法 C#

    我正在尝试从我的 Web 应用程序调用 Web API 我正在使用 Net 4 5 在编写代码时出现错误HttpClient不包含定义PostAsJsonAsync method 下面是代码 HttpClient client new Ht
  • 批处理在 for /f 命令上过早关闭

    我有一个批处理文件 在 Windows XP 中 激活了命令扩展 其中包含以下行 for f s in type version txt do set VERSION s 在某些计算机上 它工作得很好 如图所示这个问题 但在其他方面它杀死了
  • UISplitViewController 和方向 - iOS < 5.0

    我使用 splitviewcontroller 作为我的应用程序的根视图 我需要将登录和注册视图显示为 splitviewcontroller 顶部的模式视图 当我尝试从 splitViewController 的 rootview 的 v
  • “RepeatedCompositeContainer”类型的对象不可 JSON 序列化

    使用 Google Client Library 与视觉库交互 我有一个从图像中检测标签的功能 GoogleVision py import os from google cloud import vision from google cl
  • HTML Canvas - 绘制弯曲箭头

    我正在尝试在 html 画布中绘制弯曲的箭头 我画一条曲线没有问题 但我不知道如何放置 gt 在线的末端 方向 ctx beginPath ctx fillStyle rgba 55 217 56 opacity ctx moveTo th
  • 是什么触发了此异常实例:“java.lang.IllegalArgumentException:观察者为空。”如何避免呢?

    返回原始版本时出现此异常ListActivity使用用户选择的项目的内容打开新活动后 它只出现在冰淇淋三明治上 这是痕迹 java lang IllegalArgumentException The observer is null at
  • 如何从 String 中获取 Date 对象

    DateFormat formatter new SimpleDateFormat MM dd yyyy HH mm ss Date d Date formatter parse dateTime System out println da
  • C++ 将字符串转换为十六进制[重复]

    这个问题在这里已经有答案了 可能的重复 C 将十六进制字符串转换为有符号整数 我已经在谷歌上搜索过 但没有找到任何帮助 所以这是我的问题 我有已经包含十六进制代码的字符串 例如 string s1 5f0066 我想将此字符串转换为十六进制
  • Tablesorter zebra 在排序之前不会条纹

    我有我的桌子 它们很棒 我可以对它们进行排序 而且效果非常好 只是在我第一次对它们进行排序之前 它们不会进行斑马条纹 我的理解是 一旦表排序器初始化 它们就会被条带化 不是这样吗 这是来自此处的 tablesorter v 2 10 最新版
  • Graphics.MeasureCharacterRanges 给出错误的尺寸计算

    我正在尝试将一些文本渲染到 Web 表单应用程序中图像的特定部分 文本将由用户输入 因此我想改变字体大小以确保它适合边界框 我的代码在概念验证实现上做得很好 但我现在正在针对设计器的资产进行尝试 这些资产更大 并且我得到了一些奇怪的结果 我
  • Edittext 行号和当前行光标位置。

    现在我正在开发一个 Android 应用程序 我创建了一个具有功能的自定义键盘 我正在使用 edittext 来显示输入的文本 编辑文本可能有 n 行 现在我的问题是我的键盘上有一个向上按钮 所以如果我单击向上按钮 那么我必须转到前几行的相
  • Flask-SQLAlchemy:SQLALCHEMY_ENGINE_OPTIONS 设置不正确

    我刚刚将我的项目 Flask SQLAlchemy 版本更新到最新版本 v2 4 由于某些 SQL Alchemy 配置参数已被弃用 我现在遵循文档并将 SQLALCHEMY ENGINE OPTIONS 作为字典添加到我的配置类中 但是
  • git 如何跨提交树将 blob 与文件进行匹配?

    Git 书的第 3 1 章明确指出只有暂存文件才能作为 blob 存储在提交树中 如果像提交对象一样 Blob 获得对其内容唯一的哈希 ID 那么 Git 如何管理跨提交跟踪 Blob 和文件之间的对应关系 不同提交中相同文件 blob 的
  • 编写“fib”并行运行:-N2 更慢?

    我正在学习 Haskell 并尝试编写并行执行的代码 但 Haskell 总是按顺序运行它 当我执行时 N2运行时标志 与省略此标志相比 执行需要更多时间 这是代码 import Control Parallel import Contro
  • 在本地计算机上创建 Sql Server 备份

    我正在使用在本地计算机上运行的 SQL Server Management Studio 我可以登录到远程盒子 数据库引擎 并使用 Studio 创建数据库备份 并将其保存到远程设备上的驱动器中 如何将备份保存到本地计算机上的驱动器上 Se
  • 如何在 PHP 中将两个字符串组合在一起?

    我实际上不知道如何描述我想要的 但我会告诉你 例如 data1 the color is data2 red 我应该做什么 或处理 所以 result 是以下组合 data1 and data2 期望的结果 result the color
  • Rails 5 - Turbolinks 5,一些 JS 未在页面渲染上加载

    我有一个 Rails 应用程序 最近更新为5 0 0 RC1 大部分过渡都很顺利 但我在使用新的 Turbolinks 时遇到了一些麻烦 例如 在我的应用程序中 我使用这个 gem gem chosen rails My applicati