Uses Bootstrap's modals
in place of the browser's builtin confirm()
API for links generated through Rails'
helpers with the :confirm
option.
Any link with the data-confirm
attribute will trigger a Bootstrap modal.
HTML in the modal supported, and also the ability to have the user input a certain value, for extra willingness confirmation (inspired by GitHub's "delete repository" function).
Add this line to your application's Gemfile:
gem 'data-confirm-modal'
The library supports Bootstrap 3 and 4. If you are stuck on Bootstrap 2.3, you must
use the bootstrap2
branch:
gem 'data-confirm-modal', github: 'ifad/data-confirm-modal', branch: 'bootstrap2'
Then execute:
$ bundle
And then require the Javascript from your application.js
:
//= require data-confirm-modal
Gem is not required for this use case.
Add the following package:
yarn add data-confirm-modal
Autoload jQuery in config/webpack/environment.js
:
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
jQuery: 'jquery',
})
)
module.exports = environment
And then require the JavaScript from your pack's application.js
, after require('@rails/ujs').start()
:
require('data-confirm-modal')
By default, the Gem's Javascript overrides Rails' [data-confirm behaviour][]
for you, with no change required to your code. The modal is applicable to
<a>
, <button>
and <input[submit]>
elements by default.
<%= link_to 'Delete', data: {confirm: 'Are you sure?'} %>
The modal's title text can be customized using the data-title
attribute.
If data-title
is not defined it falls back to the title
attribute.
<%= link_to 'Delete', data: {title: 'Are You Sure?'} %>
The modal's 'confirm' button text can be customized using the data-commit
attribute.
<%= link_to 'Delete', data: {confirm: 'Are you sure?', commit: 'Sure!'} %>
Add a data-verify
attribute to your input if you want an extra confirmation
from the user. The modal will contain an extra text input, and the user will be
asked to type the verification value before being allowed to proceed.
<%= link_to 'Delete', data: {confirm: 'Are you sure?', verify: 'Foo', verify_text: 'Type "Foo" to confirm'} %>
You can set global setting using dataConfirmModal.setDefaults
, for example:
dataConfirmModal.setDefaults({
title: 'Confirm your action',
commit: 'Continue',
cancel: 'Cancel'
});
To restore default settings use dataConfirmModal.restoreDefaults()
.
Given an element with data-confirm
attributes in place, such as
<a id="foo" href="#" data-confirm="Really do this?" data-commit="Do it" data-cancel="Not really"/>
you can then invoke .confirmModal()
on it using:
$('#foo').confirmModal();
that'll display the confirmation modal. If the user confirms, then the #foo
link will receive a click
event.
Use dataConfirmModal.confirm()
passing any of the supported options, and pass
an onConfirm
and onCancel
callbacks that'll be invoked when the user clicks
the confirm or the cancel buttons.
onHide
callback will be invoked when the modal closes.
dataConfirmModal.confirm({
title: 'Are you sure?',
text: 'Really do this?',
commit: 'Yes do it',
cancel: 'Not really',
zIindex: 10099,
onConfirm: function() { alert('confirmed') },
onCancel: function() { alert('cancelled') },
onHide: function() { alert('hidden') }
});
The default bootstrap modal options can be passed either via JavaScript or through data attributes.
$('#foo').confirmModal({backdrop: 'static', keyboard: false});
or
<a href="#" data-confirm="Really?" data-backdrop="static" data-keyboard="false">
Spinned off a corporate IFAD application in which an user did too much damage because the confirm wasn't THAT explicit ... ;-).
git checkout -b my-new-feature
)git commit -am 'Added some feature'
)git push origin my-new-feature
)