RAILS 6 Ajax событий и Ajax Spinner - PullRequest
Новая
       173

RAILS 6 Ajax событий и Ajax Spinner

5 голосов
/ 07 августа 2020

Я пытаюсь показывать анимацию загрузки / счетчик при каждом Ajax запросе

моем приложении. js

$(document).on("turbolinks:load", function() {
  window.addAjaxLoaderHandler();
});

window.addAjaxLoaderHandler = function() {
  $(document).on('ajax:send', function() {
    $('#ajax-loader').show();
  });

  $(document).on('ajax:complete', function(){
    setTimeout(() => {$('#ajax-loader').hide();}, 100);
  });
}

Это отлично работает, ДО ТОГО, КАК я загружаю удаленную форму по AJAX. Если я отправлю эту недавно загруженную форму, ajax:send сработает, но после завершения (без каких-либо ошибок) ajax:complete не будет (счетчик не будет скрыт).

Проблема, похоже, в том, что я удаляю загруженная форма с вызовом ajax.

Что я могу сделать, чтобы это работало?

Я просто пытаюсь щелкнуть ссылку, загрузить форму и удалить форму после отправки информация.

ОБНОВЛЕНИЕ

Мое приложение. html .haml (я использую HAML, поэтому синтаксис соответствует, поэтому #... означает <div id="...">#all indented code lines#</div>) 

#main
  = yield

#ajax-loader

Форма будет загружена как: 

$('#main').append('<%= j(render(:partial => 'new', :locals => {:model => @model})) %>');

Проблема в том, что #ajax-loader не скрыт и все еще отображается после отправки формы.

Я думаю, проблема То есть я удаляю элемент запуска AJAX -call. Но я надеялся, что, поскольку я привязал слушателя к document, он все равно срабатывает.

Конечно, в этом случае я просто могу сделать $('#ajax-loader').hide();, но я пытаюсь понять, почему ajax:complete не срабатывает.

1 Ответ

0 голосов
/ 20 августа 2020

Думаю, вы сами ответили на свой вопрос: проблема в том, что когда вы удаляете форму, то же самое делает и прослушиватель событий.

Вы можете проверить, какие прослушиватели событий по-прежнему применяются к вашему объекту документа, используя getEventListeners(document). Попробуйте это на своей консоли * после того, как счетчик сработает и откажется скрываться.

* изменить: это функция Google Chrome, может не работать в других браузерах, хотя у большинства из них есть способы для проверки слушателей на узле

Я думаю об этих обходных путях:

a) Повторная привязка слушателей каждый раз, когда вы удаляете форму;

b) Присоединение слушателя к объекту window вместо document

c). Если вы используете jQuery Ajax, вы можете использовать свойства beforeSend и complete, чтобы вместо этого показать и скрыть счетчик событий. Если это не jQuery Ajax, вероятно, есть аналогичный способ добиться такого же поведения.

...