A Rails plugin for creating a non-AJAX form containing a single button element. Allowing actions to be both safe, not javascript dependent and easily styled.
Pull request Compare This branch is 5 commits behind brianjlandau:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
public
tasks
test
CHANGES
MIT-LICENSE
README.markdown
Rakefile
about.yml
init.rb

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="/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