Question

I am using Ruby on Rails 3 and I would like to use RJS callbacks. I read from here that there are following callbacks: :create, :uninitialized, :loading, :loaded, :interactive, :complete, :failure, :success, but how to use them?

Can someone give me an example? Or post links to some useful resource?

In my case I would like to disable a simple form after clicking on the submission button and until saving is completed. The form is like this:

<%= 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 %>

P.S.: I read about the file ‘RAILS_ROOT/public/javascripts(application.js’ but online there isn’t good documentation.

Answer 1

Have you looked at the :disable_with => 'Saving...' code for the submit button? This was created for exactly why you are trying to do. All this actually does is add the data attribute ‘data-disable-with’ to the submit button.

If you actually want to disable the whole form you could take the logic directly from your javascript driver in rails and change it to disable the whole form.

As an example the disable-with code for the jQuery driver is

    /**
     * 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'));
        });
    });