2014-02-16 4 views
4

У меня есть form_tag(foo_path(@foo), remote: true, id: 'foo-form' форму и кнопка submit_tag ("Submit", :id => "foo-submit")Rails 4: Отключить кнопку представить после щелчка

Я хотел бы, чтобы отключить кнопку отправки после ее нажатия кнопки. Очевидно, я не могу использовать что-то вроде onlick="jQuery(this).prop('disabled', true);", потому что он сломал бы удаленные функции. Я знаю атрибут данных :disable_with для submit_tag, но он, похоже, не работает для меня. Он генерирует правильный код формы, но он не имеет никакого эффекта. Я не уверен, почему это не работает, но это может быть связано с тем, что я использую прототип (устаревшие причины) и jquery одновременно. Хотя, я загружаю только ujs для jquery, а не для прототипа. Однако все остальные функции query_ujs работают очень хорошо.

Есть ли другой способ отключить кнопку отправки?

+0

Вы запускаете 'jQuery.noConflict();' перед всеми вашими командами jQuery? Это может помочь. Можете ли вы подтвердить, что все идентификаторы верны, когда вы проверяете DOM и нет дубликатов? – mccannf

+0

Да для обоих. Однако мне удалось заставить 'disable_with 'работать, модифицируя мой код. Это может быть из-за ошибки в помощнике формы, но я пока не уверен. – Albert

+0

Убедитесь, что у вас загружены все необходимые библиотеки, такие как jquery-rails и т. Д. Атрибут данных «disable-with» должен работать во всех случаях. Или есть что-то конкретное, что вы делаете, что оно не работает? –

ответ

1

Проблема был вызван неверным HTML кодом. См <div> breaks <form> disable_with теперь работает

+12

Так что, по сути, проблема была полностью в другом месте, и вы не предоставили весь код, необходимый для его отладки. Вы также не сообщили о правильных симптомах :) Я надеюсь, что это хороший урок для вас при отладке - всегда сначала определяйте свою проблему и убедитесь, что проблема там, где вы ее ДУМАЕТЕ. –

2

Вы используете CoffeeScript, чтобы сделать что-то вроде этих строк:

jQuery -> 
    $('.theform').submit -> 
    $('input:submit').attr("disabled", true) 

Это отключающая формы кнопки отправки, когда форма с class="theform" представляется. В зависимости от вашей потребности вы настраиваете это, чтобы соответствовать вашему классу/id для формы.

+0

Кажется, что не работает. Просто убедитесь, что мой код верен: jQuery ('# foo-form'). Submit (function() { jQuery ('# foo-submit'). Attr ("disabled", true); }); Это то, что вы имели в виду? – Albert

+0

Когда кнопка отправки отключена, форма не будет отправляться, по крайней мере, в некоторых браузерах, и это то же, что и OP. –

35

использование

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." } 
+2

Как я писал в своем сообщении, атрибут data: disable_with не работает для меня – Albert

0

Поскольку это Аякс вызов, полученные в результате js.erb файла из соответствующего действия будет срабатывать.

Алгоритм disable-on-click можно разместить внутри этого js.erb-файла.

# in the controller 
def foo_method 
... 
# will render js.erb for ajax call 
# assuming there is no .html view file in the directory 
end 

# in foo_method.js.erb 
$('input:submit').attr("disabled", true); 

Это должно принести вам АВСК на ту же страницу с помощью кнопки noew инвалидов

8

Альтернативы submit_tag является button_tag. button_tag позволяет добавить шрифт awesome spinner.

<%= button_tag 'Submit', class: 'btn btn-primary', 
     data: { disable_with: "<i class='fa fa-refresh fa-spin'> 
     </i> Submitting Changes..."} %> 
Смежные вопросы