防止 Turbolinks 在 jQuery .load() Ajax 事件之后运行答案

【问题标题】：Prevent Turbolinks from running after jQuery .load() Ajax event防止 Turbolinks 在 jQuery .load() Ajax 事件之后运行
【发布时间】：2018-10-04 23:14:13
【问题描述】：

我有一个控制器更新操作，它基本上分为两部分。有一个初始的创建/更新，然后是一个 after_action 回调，它返回并向记录添加额外的数据。这些额外的数据需要 Javascript 随时可用。

因此，我不能简单地将最初创建的对象 .append() 附加到 div 中，因为在最初的“第一次传递”阶段，它还没有 after_action 数据。

为了解决这个问题，我使用了 jQuery .load() 操作。这将使用新内容刷新有问题的 div，并且完整的对象（带有额外的数据属性）已准备就绪。

但是！我注意到的是，在 Ajax 提交完成后，服务器在后台实质上是在处理一个完整的页面重新加载，重新呈现完整的辣酱玉米饼馅，而不是仅仅停留在我传递给 .load() 函数的 div 处。

如何在此过程期间/之后立即禁用 Turbolink，使其不会重新加载整个页面？

从 Turbolinks 文档看来，data-turblinks="false" 应该可以解决问题，但到目前为止我还没有运气。

知道我哪里出错了吗？还有什么我应该尝试的吗？

提前谢谢你，如果你想看任何其他代码sn-ps，请告诉我！

.html.erb

<%= button_tag "", type: 'submit', class: "btn btn-lg btn-default glyphicon glyphicon-ok above-interaction-barrier",
id: "crop-submit-button-#{image.id}", data: { turbolinks: false, no_turbolink: true } do %>
  # Nesting a link_to just in case turbolinks requires it to be an actual link element (??)
  <%= link_to "", data: { turbolinks: false, no_turbolink: true} %>
<% end %>

控制器

after_action :set_crop_attributes_for_crop_image, only: [:update, :create]

def set_crop_attributes_for_crop_image
  if image_params[:crop_x].present? && @crop_image.parent_image_id.present?
    @crop_image.crop_x = image_params[:crop_x]
    @crop_image.crop_y = image_params[:crop_y]
    @crop_image.crop_w = image_params[:crop_w]
    @crop_image.crop_h = image_params[:crop_h]
    @crop_image.save!
  end
end

.js

$('form').submit(function(event) {
  $(this)
    .off('ajax:beforeSend')
    .on('ajax:beforeSend', function() {
      $body.addClass('loading');
    });
  $(this)
    .off('ajax:success')
    .on('ajax:success', function() {
      cropperInstance.clear();
      // Show/Hide div under the radar so lazyloading plugin kicks in
      $('#selection-confirmation-highlights')
        .removeClass('above-interaction-barrier')
        .attr('z-index', '-500');
      $('#selection-confirmation-highlights').show();
      $('#selection-confirmation-highlights').hide();
      $('#selection-confirmation-highlights')
        .addClass('above-interaction-barrier')
        .removeAttr('z-index');
      $body.removeClass('loading');
    });
});

.js.erb

$('#selection-confirmation-highlights').load(location.href+" #selection-confirmation-highlights>*");

【问题讨论】：

标签： jquery ruby-on-rails ajax turbolinks

【解决方案1】：

好的，事实证明我的问题有点放错了地方。经过大量阅读/搜索后，我了解到参数在 .js.erb 文件中可用。这太棒了！

这让我可以完全绕过我最初的 Turbolinks/Ajax 问题，并使用 .append() 方法走一条更简单的路线。我基本上最终重新创建了 _image.html.erb 输出

$('#selection-confirmation-highlights')
  .append("<div class= 'highlight'> <%= j image_tag @image.crops.last.file_url(:small_thumb),
          data: { imageid: @image.crops.last.id,
                  imagepath: image_path(@image.crops.last),
                  parentimageid: @image.crops.last.parent_image.id,
                  cropx: params[:image][:crop_x],
                  cropy: params[:image][:crop_y],
                  cropw: params[:image][:crop_w],
                  croph: params[:image][:crop_h] } %> " +
          // ...
   );

这样，添加了 Javascript/Ajax 的图像与页面中已经加载的图像具有相同的数据结构。

在控制器中，由于 Carrierwave 生成裁剪图像的方式，我仍然必须通过我在原始帖子中提到的 after_action 回调添加裁剪尺寸。

【讨论】：