Как временно отключить форму с помощью шаблонов RJS

Question

Я использую Ruby on Rails 3 и хотел бы использовать обратные вызовы RJS.Из здесь я прочитал, что есть следующие обратные вызовы:: создать,: неинициализирован,: загрузка,: загружен,: интерактив,: завершен,: сбой,: успех, но как их использовать ?

Может кто-нибудь привести пример?Или разместить ссылки на какой-нибудь полезный ресурс?

В моем случае я бы хотел отключить простую форму после нажатия на кнопке отправки и пока сохранение не будет завершено.Форма выглядит следующим образом:

<%= form_for(@account, :remote => true, :id => "form_id" ) do |f| %>
  <%= f.text_field :name, :html => { :id => "text_field_id" } ) %>
  <%= f.file_field :name, :html => { :id => "file_field_id" } ) %>
  <%= f.submit "Submit", :id => "button" %>
<% end %>

PS: Я читал о файле 'RAILS_ROOT / public / javascripts (application.js', но в Интернете нет хорошей документации.

Answer 1

Вы смотрели на код :disable_with => 'Saving...' для кнопки отправки?Это было создано именно для того, почему вы пытаетесь сделать.Все, что на самом деле делает, это добавляет атрибут данных «data-disable-with» к кнопке отправки.

Если вы действительно хотите отключить всю форму, вы можете взять логику прямо из вашего драйвера javascript в rails и изменитьотключить всю форму.

Например, код отключения с драйвером jQuery:

    /**
     * disable-with handlers
     */
    var disable_with_input_selector = 'input[data-disable-with]';
    var disable_with_form_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')';

    $(disable_with_form_selector).live('ajax:before', function () {
        $(this).find(disable_with_input_selector).each(function () {
            var input = $(this);
            input.data('enable-with', input.val())
                 .attr('value', input.attr('data-disable-with'))
                 .attr('disabled', 'disabled');
        });
    });

    $(disable_with_form_selector).live('ajax:complete', function () {
        $(this).find(disable_with_input_selector).each(function () {
            var input = $(this);
            input.removeAttr('disabled')
                 .val(input.data('enable-with'));
        });
    });