Javascript 和 Ajax 调用答案

【问题标题】：Javascript and Ajax CallsJavascript 和 Ajax 调用
【发布时间】：2016-07-06 15:51:17
【问题描述】：

我有几个关于在 ajax 调用后加载 javascript 的问题。

所以我在 Rails 上使用 ruby，并且通过 ajax 调用加载了不同的页面（我这样做是因为我有一个音频播放器，我想在页面重新加载时继续播放）。

问题是，当我使用 ajax 更改页面时，javascript 不会在新页面上重新加载（或工作）。

例如，我有一个网格系统，它使用 javascript 根据宽度设置网格图像的高度。除非我重新加载页面或将脚本放在 html 文件底部的脚本标记中，否则该脚本不起作用。

有没有办法重新加载javascript？我试过 location.reload() 但这只是刷新页面并破坏了整个目的。谢谢！

这是一个例子：

show.js.erb

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");

歌曲控制器

  def show
    respond_to do |format|
      format.js
      format.html
    end
  end

显示页面的链接

<%= link_to song, remote: true do %><%= song.title %><% end %>

这是我正在加载一个名为 cardSize.js 的文件中的 cardSize 函数

$(document).ready(function cardSize () {
  var cardWidth = $('.card-image').width();
  $('.card-image').css({
    'height': cardWidth + 'px'
  });
});

【问题讨论】：

标签： javascript jquery html ruby-on-rails ajax

【解决方案1】：

在 UJS 文件show.js.erb 中，您需要调用控制视图/网格的全局函数。

例如，如果控制高度等的全局方法是implement_grid()，那么文件应该是这样的：

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");
implement_grid();

动态添加到 DOM 的项目不一定会触发任何操作，除非您指定它们。您可以在 div/table（网格）上查看绑定侦听器到 html 修改，然后如果您希望将该代码保留在 UJS 文件之外，它将调用您正在寻找的高度更改。

另外，$('#results') 可以大大缩短：

$('#results').html("<%= j render 'songs/showcard', song: @song %>");

【讨论】：

真棒 d_ethier。我应该想到的。感谢您指出这一点！并感谢您提供缩短的代码。我的文件现在看起来干净多了！

【解决方案2】：

您遇到的问题似乎与 turbolinks 有关。 Turbolinks 将刷新/更改文档的 <body> 标记内的内容，而不是文档的 <head> 标记内的脚本和样式表，Rails 会在此处加载所有自定义编写的 javascript。

那么，当您将 javascript 粘贴到文件底部的 <script> 标记中时，为什么它会起作用？因为当您这样做时，<script> 标签现在在您文档的 <body> 标签内。因此，当您更改页面时，脚本会重新加载并可以将事件处理程序正确绑定到页面上的 DOM 元素。

那么为什么它也只在您完全重新加载页面时才有效？因为您将 jquery 包裹在 $(document).ready(...) 中。当您手动刷新整个页面时，turbolinks 也会完全刷新并重新加载回 DOM，因此当您在该特定页面上时，您的 $(document).ready(...) 处理程序将正确绑定。但是当您更改页面并且内容更改时，文档在技术上仍然准备就绪并且不会绑定到该新页面，因此它不会执行自身内部的代码。为什么？由于 turbolinks 的工作方式，整个页面在技术上不会重新加载，只是 <body> 标记中的内容，对于您的 $(document).ready(...) 调用中的代码，看起来像是无法绑定的动态生成的内容。

那么解决方法是什么？

这可能会或可能不会要求使用jquery turbolinks gem。这将允许您保持 turbolinks 并在每次更改页面时调用 $(document).ready(...)。

【讨论】：