Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

simple_form-magic_submit

Package Overview
Dependencies
Maintainers
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

simple_form-magic_submit

  • 1.2.0
  • Rubygems
  • Socket score

Version published
Maintainers
1
Created
Source

Magic Submit Button for Simple Form

Dependency Status

A smart submit button extension for the Simple Form gem that:

  • Displays an alternate title on validation errors.
  • Displays a different "Loading..." title depending on whether the model is being created or updated.
  • Is optionally postfixed with a "Cancel" link.
  • Is fully localizable via the I18n gem.

A picture's worth a thousand words, right?

For a newly created model object, typically in a new.html.haml:

A preview of the submit button in the simples case.

Add a cancel link:

A preview of the submit button accompanied by a Cancel link.

When something goes wrong and the model fails validation:

A preview of the submit button with a different title when the validation has failed.

And all this and a bit more with just a single line of code:

= f.button :magic_submit, cancel: root_path

Installation

Add this line to your application's Gemfile:

gem 'simple_form-magic_submit'

And then execute:

$ bundle

Or install it yourself as:

$ gem install simple_form-magic_submit

Usage

In your view template add it allong the lines of:

= simple_form_for(resource) do |f|
    = f.error_notification
    .form-inputs
        = f.input :email, autofocus: true
    .form-actions
        = f.button :magic_submit

The last one is this gem's magic.

To add a cancel link:

= simple_form_for(resource) do |f|
    = f.error_notification
    .form-inputs
        = f.input :email, autofocus: true
    .form-actions
        = f.button :magic_submit, cancel: root_path

Replace root_path with whatever path is relevant for your app.

Localization

The gem comes bundled with an English translation in en.yml:

en:
  simple_form:
    magic_submit:
      default:
        new:
          submit: "Create a new %{model}"
          retry: "Try creating once again"
          disable_with: "Creating…"
        edit:
          submit: "Save changes"
          retry: "Try saving once again"
          disable_with: "Saving…"
      cancel:
        format: "%{submit_button} or %{cancel_link}"
        cancel: "Cancel"

Simply copy the file to you config/locales folder inside your Rails project if you want to change the default strings.

Say, for the title the keys will be looked up in the following order:

  1. simple_form.magic_submit.namespace_name.controller_name.model_name.action.submit
  2. simple_form.magic_submit.namespace_name.controller_name.action.submit
  3. simple_form.magic_submit.default.action.submit
  4. helpers.submit.action

Say, for a Admin::UsersController and a Roles model, the following lookups will be made on the edit action:

  1. simple_form.magic_submit.admin.users.roles.edit.submit
  2. simple_form.magic_submit.admin.users.edit.submit
  3. simple_form.magic_submit.default.edit.submit
  4. helpers.submit.edit

Each lookup will have %{model} interpolated to the name of the model.

To-do

  1. Add tests.
  2. Add more translations.
  3. You tell me.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

Thanks go to...

Victor Nahuel Chaves (https://github.com/nahue) for adding support for model-less forms.

FAQs

Package last updated on 19 Mar 2014

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc