Using image as input type in submit_to_remote

Rails
1

Hi all,

After searching for a way to set the input type of a submit tag to
image when using submit_to_remote I realized that the method call
given below, while seemingly valid, wasn’t working since the method
button_to_function in actionpack/lib/action_view/helpers/
javascript_helper.rb was forcing the type to button.

  1. The method call in the view:
    <%=
    submit_to_remote(
    ‘update_resource_img’,
    ‘Update Resource 2’,
    :url => { :controller => ‘hello’, :action => ‘update’ },
    :before => “$(‘loading’).style.display = ‘block’”,
    :after => “return false”,
    :html => { :src => ‘/images/button.gif’, :type => ‘image’ }
    )
    %>

  2. def button_to_function in action_view/helpers/javascript_helper.rb
    does the following(note the :type => ‘button’) :
    tag(:input, html_options.merge(:type => ‘button’, :value =>
    name, :onclick => onclick))

  3. It is my opinion (finally :p) that the def button_to_remote should
    allow the input type to be either a button or an image since the w3c
    page on form input control types states that the input type image
    “Creates a graphical submit button.”
    http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1

  4. Hence, to ensure that button_to_remote allows me to set the type of
    either of button or image, I place the following in a file in
    $RAILS_ROOT/lib and require it at the end of $RAILS_ROOT/config/
    environment.rb

module ActionView
module Helpers
module JavaScriptHelper

  def button_to_function(name, *args, &block)
    html_options = args.extract_options!.symbolize_keys

    function = block_given? ? update_page(&block) : args[0] || ''
    onclick = "#{"#{html_options[:onclick]}; " if html_options

[:onclick]}#{function};"

    html_options[:type] = 'button' if( !html_options[:type] ||

html_options[:type] !~ /^image|button$/i )

    tag(:input, html_options.merge(:value => name, :onclick =>

onclick))
end

end

end
end

  1. Hope you guys have an opinion to share.
  • Gautam
    Programmer @ Azri
2

Hi David,

yep, you are right, link_to_remote(image_tag(“image”)…) would work.

In order to use link_to_remote I would have to either specify ID of
the DOM element which includes all the form elements, that I want to
submit, via the :submit argument or pass the Form.serialize Javascript
expression via the :with argument.

While this would work, based on my understanding of things I have two
problems with this approach:

  1. Having a real Submit button would make graceful degradation easy.
    (If the onclick handler didn’t execute, the form would just do the
    traditional submit with the button. With the hyperlink I would have to
    set an alternate URL).

  2. A more conceptual problem, is that it just doesn’t seem right to me
    that while link_to_remote works hard to soup up a hyperlink and give
    it the ability to submit a form, submit_to_remote, it seems, has
    decided that it will not allow an image its rightful place as a submit
    button. I would expect link_to_remote and submit_to_remote to be, kind
    of… “homomorphic”.