CODEWITHSUNDEEP
ruby-on-railsrubyajaxruby-on-rails-3callback
user502052
user502052

Reputation: 15259

How to disable temporarily a form using RJS templates

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.

Upvotes: 2

Views: 1532

Answers (1)

Steve Smith
Steve Smith

Reputation: 5201

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

Upvotes: 1

Related Questions