Прокрутка Chrome до верхней части страницы после запроса удаленной формы

Question

Версия Rails: 5.2.2

Версия Chrome: 78.0.3904.87

Во время тестирования моего сайта на Chrome сегодня я заметил, что он прокручивается в верхнюю часть страницы всякий раз, когда я отправляюAJAX запрос. Такое поведение нежелательно и не происходит в других браузерах, таких как Firefox. Я пытался отладить проблему, но не смог понять, в чем дело.

Вот как выглядит моя форма:

<div id="container">
  <%= form_for(obj, method: :post, url: url, remote: true) do |f| %>
    <button id="obj-<%= obj.id %>-btn" type="button" class="btn btn-primary obj-btn" title="Add" data-toggle="tooltip" data-placement="left">
      Add
    </button>
  <% end %>
</div>

Вот мой JavaScript для отправки формы:

$("#container").on("click", "form > .obj-btn", function(e)
{
  $(this).tooltip('hide');

  var form = $(this).parent();

  form.submit();
});

После отправки запроса на сервер контроллер запускает JavaScript в файле create.js.erb.

Я смотрел другие потоки, которые предлагали добавить e.preventDefault() или return false; в обработчик отправки. , но ни один из них не работал для меня.

В чем может быть проблема? Заранее спасибо за любую помощь.

Answer 1

Вы должны прослушивать и перехватывать событие отправки в вашей форме, а не событие нажатия кнопки. Если вы используете e.preventDefault() в этом случае, вы должны быть в состоянии исключить поведение отправки по умолчанию, вызывающееВаша страница для обновления. Таким образом, ваш подход будет выглядеть примерно так:

$(document).ready(function () {
  // ***** Listen to submit event on the form itself ***** //
  $('#form').submit(function (e) {

    e.preventDefault();

    // Capture data from form 
    // and manually submit by AJAX here

  });
});

Answer 2

Если вы используете e.preventDefault(), страница не будет обновляться вообще после успешного выполнения запроса AJAX. Таким образом, вам нужно обновить страницу в JavaScript с помощью window.location.reload()

Answer 3

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

Другое решение, о котором я могу подумать, - это поменять кнопку на тег <a>. Это предотвратит публикацию формы, однако вам придется обрабатывать отправку формы вручную. надеюсь, это поможет.

Answer 4

Отправка формы не является ajax-запросом, поэтому браузер (как правило) переходит в верхнюю часть страницы. Это то же самое (более или менее), что и переход на другую страницу.

У вас есть два варианта (как предлагают некоторые другие ответы):

1. Сделать реальный запрос AJAX (например,$ .ajax, какой-то нативный метод или методы, которые предоставляет ваша клиентская среда).
2. Внедрите javascript на страницу, чтобы автоматически прокрутить вас до той части страницы, которой вы хотите быть.

Я думаю, что первый вариант - это то, что вы ищете, так как второй может вызвать перелистывание страницы вверх и вниз.