Запретить запуск Turbolinks после события Ajax jQuery .load () - PullRequest
Новая
       8

Запретить запуск Turbolinks после события Ajax jQuery .load ()

0 голосов
/ 05 октября 2018

У меня есть действие по обновлению контроллера, которое по существу работает в двух частях.Существует первоначальное создание / обновление, затем обратный вызов after_action, который возвращается и добавляет дополнительные данные в запись.Эти дополнительные данные - это то, что должно быть легко доступно для Javascript.

По этой причине я не могу просто .append () изначально созданный объект в div, поскольку на этом начальном «первом проходе»Этап, он еще не имеет данных after_action.

Чтобы обойти это, я использую действие jQuery .load ().Это обновляет рассматриваемый div с новым содержимым, и полный объект (с дополнительными атрибутами данных) готов к работе.

ОДНАКО!Что я замечаю, так это то, что после отправки Ajax в фоновом режиме сервер по существу обрабатывает полную перезагрузку страницы, перерисовывая полную энчиладу, а не останавливается только на div, который я передаю в функцию .load ().

Как отключить Turbolinks во время / сразу после этого процесса, чтобы он не перезагружал всю страницу?

Из документации 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>*");

1 Ответ

0 голосов
/ 05 октября 2018

Хорошо, так получается, что мой вопрос был немного неуместен.После долгого чтения / поиска я узнал, что параметры доступны в файле .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, который я отметил в моем исходном сообщении.

...