Forum: Ruby on Rails using image as input type in submit_to_remote

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
gautam chekuri (Guest)
on 2009-05-23 14:05
(Received via mailing list)
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

5. Hope you guys have an opinion to share.

- Gautam
  Programmer @ Azri
gautam chekuri (Guest)
on 2009-06-05 22:20
(Received via mailing list)
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".
This topic is locked and can not be replied to.