在 jQuery .load() Ajax 事件后阻止 Turbolinks 从运行

Question

我有一个控制器更新操作，基本上分为两部分。有一个初始的 create/update，然后是一个 after_action 回调，它返回并向记录添加额外的数据。 Javascript.

需要随时获取这些额外数据

出于这个原因，我无法简单地将最初创建的对象 .append() 放入 div，因为在最初的 "first pass" 阶段，它还没有 after_action数据。

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

然而！我注意到的是，在 Ajax 提交通过后，服务器实际上在后台处理整页重新加载，重新呈现完整的辣酱玉米饼馅，而不是仅在我通过的 div 处停止进入 .load() 函数。

如何在此过程后禁用 Turbolinks during/immediately，使其不会重新加载整个页面？

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

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

提前致谢，如果您还想看任何其他代码片段，请告诉我！

.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>*");

Answer 1

好的，原来我的问题有点不对。经过大量 reading/searching 我了解到参数在 .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 回调添加裁剪尺寸，我在原来的 post.

在 jQuery .load() Ajax 事件后阻止 Turbolinks 从运行

Prevent Turbolinks from running after jQuery .load() Ajax event

jquery

ruby-on-rails

ajax

turbolinks

在 jQuery .load() Ajax 事件后阻止 Turbolinks 从 运行

Prevent Turbolinks from running after jQuery .load() Ajax event

jquery

ruby-on-rails

ajax

turbolinks

在 jQuery .load() Ajax 事件后阻止 Turbolinks 从运行