英文:
Javascript file in app/assets/javascript/ is correctly loaded but doesn't seem to work in a rail 6.1.7.2 web application
问题
在一个Docker化的Rails 6.1.7.2应用程序中，我无法使我的自定义JavaScript文件正常工作。它的名称对应于我希望加载它的视图文件。
当我访问这个页面时，我可以看到JS资源成功传输到网络面板，当我打开它时，我也可以看到我的自定义JS片段实际上位于.js文件的底部，如下图所示：
但无论我在网页上对复选框做什么，div都会一直显示，而不会消失。
如果我在JSFiddle上测试这些片段，它的工作方式如预期：选中框时，div显示，取消选中时，div隐藏。
以下是自定义.js文件的内容：
# cat app/assets/javascripts/custom.js
// 在这里放置与匹配控制器相关的所有行为和挂钩。
// 所有这些逻辑将自动在application.js中可用。
let checkbox = document.getElementById('show');
let box = document.getElementById('target');
box.style.visibility = 'hidden';
checkbox.addEventListener('click', function handleClick() {
if (checkbox.checked) {
box.style.visibility = 'visible';
} else {
box.style.visibility = 'hidden';
}
});
以下是custom/index.html.erb文件的内容：
# cat app/views/custom/index.html.erb
<h2 class="title">Title</h2>
<table>
<tr>
<td>
<input type="checkbox" id="show"/>
</td>
<td>
<p>勾选以显示目标div！</p>
</td>
</tr>
</table>
<div id="target">
<h4 class="title">Foo</h4>
</div>
可能出了什么问题，以及如何修复这种奇怪的行为呢？
我无法在开发和生产环境中都让它工作。
在app/log/{production|development}.log文件中没有特殊的错误或警告。
编辑
将<%= javascript_include_tag "custom.js", defer: true %>添加到HTML模板中也不起作用。但现在自定义JS代码在DOM中加载了两次：
对应于网页的行为（有复选框选中和未选中时）如下图所示：
英文:
In a dockerized rail 6.1.7.2 application, I'm not able to have my custom javascript file working.
Its name corresponds to the view file where I want it to be loaded.
I can see that the JS asset is successfully transmitted in the network panel of the web browser when I hit this page, and when I open it, I can also see that my custom JS snippet is actually present at the very bottom of that .js file, underline in green in this screenshot:
But whatever I do with the checkbox on the web page, the div is always displayed and never disappears.
And if I test those snippets on JSFiddle, it works as expected: box ticked: the div is displayed, unticked: the div is hidden.
# cat app/assets/javascripts/custom.js
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
let checkbox = document.getElementById('show');
let box = document.getElementById('target');
box.style.visibility = 'hidden';
checkbox.addEventListener('click', function handleClick() {
if (checkbox.checked) {
box.style.visibility = 'visible';
} else {
box.style.visibility = 'hidden';
}
});
# cat app/views/custom/index.html.erb
<h2 class="title">Title</h2>
<table>
<tr>
<td>
<input type="checkbox" id="show"/>
</td>
<td>
<p>Tick me to display the target div!</p>
</td>
</tr>
</table>
<div id="target">
<h4 class="title">Foo</h4>
</div>
What could be wrong and how could I fix this strange behavior?
I cannot get it to work both in development and production.
There is no particular error or warning in the app/log/{production|development}.log files.
Edit
Adding <%= javascript_include_tag "custom.js", defer: true %> to the HTML template doesn't work either. But the custom JS code is now loaded twice in the DOM:
With the corresponding behavior of the web page (without | with the checkbox ticked):
答案1
得分: 1
由于您是使用getElementId创建复选框变量，所以您必须确保HTML在浏览器加载JavaScript之前完成渲染。
在Rails中，您可以通过将"defer: true"属性添加到JavaScript包含标记中来实现，如下所示：
<%= javascript_include_tag "custom.js", defer: true %>
就像在这个帖子中所示：https://stackoverflow.com/questions/10982375/add-defer-attribute-to-javascript-include-tag-rails
英文:
Since you create the checkbox variable using getElementId, you have to make sure the html finished render before the browser load the javascript.
in rails you can do this by adding 'defer: true' properties to the javascript include tag like this
<%= javascript_include_tag "custom.js", defer: true %>
like what shown in this thread https://stackoverflow.com/questions/10982375/add-defer-attribute-to-javascript-include-tag-rails
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论