No commit activity in last 3 years
No release in over 3 years
There's a lot of open issues
Replace the Rails system confirm box with SweetAlert2
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 2.9
>= 0
>= 4.2
 Project Readme

sweet-alert2-rails

Build Status

This library easily integrates the SweetAlert 2 library into a Rails application.

It replaces the boring standard JavaScript alert boxes with nice looking and animated ones.

before

Using the same Rails markup :

  = link_to 'Delete', item, method: :delete, data: { confirm: 'Are you sure you want to delete this item?' }

It is heavily based on the work from Moises Viloria with SweetAlert. Some cleaning and refactoring were made to make it compatible with SweetAlert 2.

It replaces the browser confirm dialog when using data: { confirm: 'message' } with the link_to helper with a nice looking sweet alert.

Requirements

Rails >= 4.2, tested with Rails 5

Usage

Add the SweetAlert2 and sweet-alert2-rails to your Gemfile:

gem 'rails-assets-sweetalert2', '~> 5.1.1', source: 'https://rails-assets.org'
gem 'sweet-alert2-rails'

Add the following to application.js:

//= require sweetalert2
//= require sweet-alert2-rails

Note : if you're using Rails >= 5.1, you need to inject before this plugin jquery and jquery-ujs because they are not dependencies anymore. Read https://github.com/rails/jquery-rails#installation for more information.

Add the following to application.css:

/*
 *= require sweetalert2
 */

Try it:

  = link_to "Delete", user, method: :delete, data: { confirm: 'Are you sure?' }

Custom options

You may pass options in data:

 data: {
  confirm: 'Are you ready?',
  'confirm-button-text': 'Im ready',
  'cancel-button-text': 'No way',
  'confirm-button-color': '#66CD00',
  'sweet-alert-type': 'info',
  text: 'This is a subtitle',
  'image-url': '/pic.png'
}

Default options that will be used application wide so it is not necessary to set the option on each link. Put this object inside your app to override default options with the sweetAlertConfirmConfig object.

window.sweetAlertConfirmConfig = {
  title: 'Are you sure?',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#DD6B55',
  confirmButtonText: 'Ok'
};

Contribute

Fork the repo & make a pull request with your fix or feature. Thanks :).