DOCSEARCHbyAlgolia
Submit Docs

data-confirm-modal

repository·master·Indexed 42 days ago

https://github.com/ifad/data-confirm-modal

A JavaScript library (v1.6.4) that replaces the browser's native confirm() dialog with customizable Bootstrap modals. It integrates with Rails' :confirm helper to replace link_to confirm: 'foo' behavior and supports Bootstrap 3 and 4. Features include custom titles, commit buttons, text verification, and a manual API for non-Rails environments.

Tokens
1.5K
Snippets
6
Records
6
Agent score
4%

What's inside data-confirm-modal

  1. Install data-confirm-modal via Sprockets

    master

    To use this library in a Rails application using Sprockets, add the gem to your Gemfile and require it in your JavaScript asset pipeline.

    Note: The library supports Bootstrap 3 and 4. If you are using Bootstrap 2.3, you must use the bootstrap2 branch.

    1. Add to Gemfile: gem 'data-confirm-modal' (or use the bootstrap2 branch if needed).
    2. Run bundle.
    3. Require the JavaScript in application.js using the Sprockets directive.
    # Gemfile
gem 'data-confirm-modal'

# If using Bootstrap 2.3:
gem 'data-confirm-modal', github: 'ifad/data-confirm-modal', branch: 'bootstrap2'
    // application.js
//= require data-confirm-modal

  2. Use data-confirm-modal with Rails helpers

    master

    The library automatically overrides Rails' default data-confirm behavior. It works with <a>, <button>, and <input[submit]> elements.

    Customizing the Modal

    • Title: Use data-title. If not provided, it falls back to the element's title attribute.
    • Confirm Button: Use data-commit to change the text of the confirmation button.
    • Verification: Add data-verify with a value (e.g., data-verify='Foo') and data-verify_text (e.g., data-verify_text='Type "Foo" to confirm') to require the user to type a specific string before proceeding.
    <%# Basic usage %>
<%= link_to 'Delete', data: {confirm: 'Are you sure?'} %>

<%# Custom title and commit button %>
<%= link_to 'Delete', data: {title: 'Are You Sure?', confirm: 'Are you sure?', commit: 'Sure!'} %>

<%# With text verification %>
<%= link_to 'Delete', data: {confirm: 'Are you sure?', verify: 'Foo', verify_text: 'Type "Foo" to confirm'} %>

  3. Install data-confirm-modal via Webpacker

    master

    If you are using Webpacker, you do not need the Gem. Instead, install the package via yarn and ensure jQuery is autoloaded.

    1. Install the package: yarn add data-confirm-modal.
    2. Autoload jQuery in config/webpack/environment.js using the ProvidePlugin.
    3. Require the library in your pack's application.js after require('@rails/ujs').start().
    yarn add data-confirm-modal
    // 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
    // pack's application.js
require('@rails/ujs').start()
require('data-confirm-modal')

  4. Configure global defaults for data-confirm-modal

    master

    You can set global settings for all modals using dataConfirmModal.setDefaults. To revert to the original settings, use dataConfirmModal.restoreDefaults().

    dataConfirmModal.setDefaults({
  title: 'Confirm your action',
  commit: 'Continue',
  cancel: 'Cancel'
});

// To restore defaults
dataConfirmModal.restoreDefaults();

  5. Trigger confirmation modals manually (Non-Rails)

    master

    If you are not using Rails, you have two ways to trigger the modal:

    1. Via jQuery on an element with data attributes

    If an element has data-confirm, data-commit, or data-cancel attributes, you can call .confirmModal() on it. If the user confirms, the element will receive a click event.

    2. Via the dataConfirmModal.confirm() API

    Pass an options object to dataConfirmModal.confirm() to trigger a modal without needing specific data attributes on an element. This method supports callbacks for onConfirm, onCancel, and onHide.

    // Method 1: Using jQuery on an element
// <a id="foo" href="#" data-confirm="Really do this?" data-commit="Do it" data-cancel="Not really"/>
$('#foo').confirmModal();

// Method 2: Using the direct API
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') }
});

  6. Pass Bootstrap modal options to the confirmation modal

    master

    You can pass standard Bootstrap modal options (like backdrop or keyboard) either through JavaScript or via data attributes.

    // Via JavaScript
$('#foo').confirmModal({backdrop: 'static', keyboard: false});
    <!-- Via Data Attributes -->
<a href="#" data-confirm="Really?" data-backdrop="static" data-keyboard="false"></a>