:disable_with kills form_remote_tag’s AJAXiness

Rails, Ruby

I had this awesome page. It had several forms on it – all pretty much the same thing – each form was a row of data parsed into form fields from a CSV file. So there were a lot of them (so the user can double check each item before committing the item to the db).

So I was using form_remote_tag to get the job done. Let me say now the tutorials out there are so outdated – they still use <%=form_remote_tag %>stuff<%=end_form_tag%> which has been deprecated for some time now. I finally figured out that its <%form_remote_tag %> (sans =) and then just <%end%>.

Great my remote form works.

Now I didn’t want the user to click the submit button twice (didn’t want duplicate objects in the db) so I did this: <%=submit_tag "add to db", :disable_with=>"adding to db" %>

I didn’t notice that after I added the :disable_with option my ajax request would die, and Rails being nice, sent the request as a regular POST request to the controller – thus the object is created but the page reloads – not fun when you have 80 items to add to the db.

I tore the entire form apart twice and finally today found that the :disable_with option kills the ajax request. I guess I’d have to use button_to with an onclick option that hides the button shows a disabled button and submits the request, but I’ll stick to just having a working ajax form with no fancy disabled buttons.


3 thoughts on “:disable_with kills form_remote_tag’s AJAXiness

  1. I found a way to override the submit_tag method to fix this issue. Update the code to the following:

    if disable_with = options.delete(“disable_with”)
    options[“onclick”] = “this.disabled=true;this.value=’#{disable_with}’;if(this.form.onsubmit){a=this.form.onsubmit();this.disabled=a;this.value=’#{value}’;return a;}else{this.form.submit()};#{options[“onclick”]};”

    I added this as a core extension by creating a new file in vendor/plugins/core_extensions/lib/ called “actionview_extensions.rb”. Insert the following code:
    module ActionView
    module Helpers
    module FormTagHelper
    # Creates a submit button with the text value as the caption. If options contains a pair with the key of “disable_with”,
    # then the value will be used to rename a disabled version of the submit button.
    def submit_tag(value = “Save changes”, options = {})

    if disable_with = options.delete(“disable_with”)
    #options[“onclick”] = “this.disabled=true;this.value=’#{disable_with}’;this.form.submit();#{options[“onclick”]}”
    #NDIC: custom code to ensure that the form’s onsubmit event is fired when disable_with attrib is used on the submit tag.
    options[“onclick”] = “this.disabled=true;this.value=’#{disable_with}’;if(this.form.onsubmit){a=this.form.onsubmit();this.disabled=a;this.value=’#{value}’;return a;}else{this.form.submit()};#{options[“onclick”]};”


    tag :input, { “type” => “submit”, “name” => “commit”, “value” => value }.update(options.stringify_keys)

    Also, be sure to put the following into vendor/plugins/core_extensions/init.rb:
    require ‘actionview_extensions’

    This has not been thoroughly tested, but it’s worked for me so far. I appreciate any feedback from others who use this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s