action_button

Created: 2008-06-10 19:13
Updated: 2016-05-08 09:34
License: mit

README.markdown

ActionButton

This provides helpers for creating a non-AJAX form containing a single button element. Using a button element allows the actions to be safe, not javascript dependent, and easily styled.

This plugin also includes a custom version of the lowpro javascript library, and a helper for adding a unobtrusive javascript snippet to handle AJAX form submission of the button.

Methods and Options

  • button_tag (name, content, type, html_options)
    • name: the name and id attribute of the button
    • content: the content inside the open/close tags
    • type: submit, reset, or button
  • action_button (name, content, url_for_options, options)
    • name: the name and id attribute of the button
    • content: the content inside the button open/close tags
    • url_for_options: same as for link_to, and form_for, etc.
    • options:
      • accepts all normal HTML options that are generally available on content_tag
      • :wrapper_tag - this takes a symbol for the tag name to be used around the button default is :p
      • :form_class - set's the class attribute for the form tag
      • :form_id - set's the id attribute for the form tag
      • :wrapper_class - set's the class for the wrapper tag. default: nil
  • lowpro_remote_form (selector, options)
    • selector: the CSS selector used to specify which element(s) to apply this observer to.
    • options:
      • all the standard options_for_ajax options used in all the remote Prototype helpers
      • :confirm - presents the user with a confirm dialog before submitting form
      • :update - can either be a single DOM ID specifying which element to update or a hash of :success and :failure to update different elements based on the AJAX result.

Examples

Create a delete button:

action_button 'delete-comment', 'Delete this Comment', comment_path(@post, comment), {:method => :delete, :number => comment.id}

Produces:

<form action="/posts/5/comments/12" class="delete-comment-form" id="delete-comment12-form" method="post">
   <div style="margin:0;padding:0">
      <input name="_method" type="hidden" value="delete" />
   </div>
   <p>
      <button class="delete-comment" id="delete-comment12" name="delete-comment12" type="submit">Delete this Comment</button>
   </p>
</form>

Embed an image and use custom classes and id for easier styling:

action_button 'delete-comment', image_tag('icons/delete.png', :alt => 'Add a Comment'),
                                new_comment_path(@post),
                                { :id => "commentDel", :class => 'delComment', 
                                  :form_class => 'delComment', :form_id => "delCommentForm" }

Produces:

<form action="/posts/5/comments/12" class="delComment" id="delCommentForm12" method="post">
   <div style="margin:0;padding:0">
      <input name="_method" type="hidden" value="delete" />
   </div>
   <p>
      <button class="delComment" id="delComment12" name="delComment12" type="submit">
        <img src="https://github.com/images/icons/delete.png" alt="Delete this Comment" />
      </button>
   </p>
</form>

License

Copyright (c) 2008 Brian Landau of Viget Labs, released under the MIT license

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more