Rails удаленная форма отправки несколько раз с 'enter'

Question

У меня есть форма на странице, которая представляет собой одно поле ввода. Я хотел бы, чтобы пользователь мог нажать Enter, чтобы отправить форму. К сожалению, форма отправляется несколько раз, когда enter используется для отправки. Я знаю, что форма отправляется несколько раз, потому что на сервер отправлено несколько запросов POST. Это происходит как в процессе разработки, так и в производстве, и это происходит только спорадически.

= form_for thing, remote: true do |f| 
    = f.text_field :name, placeholder: "hit enter to submit" 

Если добавить f.submit в форму, она будет представлять только один раз.

Это Rails 5 с turbolinks и jquery_ujs, включенным в application.js, если это имеет значение.

UPDATE

Я не был в состоянии воспроизвести после внесения некоторых изменений.

Я подозреваю, что проблема связана с jquery_ujs, загружаемым несколько раз на страницу. Это было связано с turbolinks. Точнее, из-за того, что я включил весь свой javascript в тег body. turbolinks предлагает добавить файлы javascript в тег head. Поскольку это так, я не смог воспроизвести ошибку.

Answer 1

При использовании турбонагнетателей важно, чтобы вы добавляли обработчики событий, используя правильный метод. Не помещайте Javascript в свой тег тела HTML. Используйте документацию turbolinks, чтобы определить, какие события необходимо подключить, чтобы добавить собственные обработчики событий или сделать другие преобразования элементов страницы.

Текущая версия turbolinks: https://github.com/turbolinks/turbolinks#full-list-of-events Старая версия turbolinks: https://github.com/turbolinks/turbolinks-classic#events

Текущая версия также имеет некоторые recommendations on making your document changes idempotent, которые я хотел бы сделать для добавления слушателей событий, а также.

Answer 2

В другом случае с такими симптомами используется rails-ujs и jquery_ujs одновременно. Для моих наблюдений, если rails-ujs идет до jquery_ujs в application.js, все в порядке, но два раза в виде ajax-форм появились в другом случае.