ifad / data-confirm-modal Goto Github PK

I installed them gem and inserted the //= require data-confirm-modal in application.js
This resulted in a Sprocket error with message:
couldn't find file 'data-confirm-modal' with type 'application/javascript'

So I had to add the data-confirm-modal.js manually to my assets/javascripts directory :-(

This is working perfectly locally, but when pushed to Heroku, confirms are still using the browser default.

Herkou appears to have found the gem correctly:
Using data-confirm-modal 1.1.0 from git://github.com/ifad/data-confirm-modal.git (at master)

Hi,
How can I control the confirmation event, to close the modal only when it succeeds?
Do not have any option to set the backdrop and keyboard?

ex.
$('#myModal').modal({backdrop: 'static', keyboard: false})

I noticed that every time he makes a confirmation executed

  modal.find('.commit').on('click', function () {
    if (options.onConfirm && options.onConfirm.call)
      options.onConfirm.call();

    modal.modal('hide');
  });

If the option modalClass is used, the class name sits in between the class fade and the class in.

It does not affect any functionality, but it is unaesthetic.

I'm using this gem for bootstrap's project.

I like this gem, so I have forked for Semantic-UI.
http://semantic-ui.com

If you don't mind, add my forked gem to original README.

https://github.com/kntmrkm/data-confirm-modal-semantic-ui

thanks.

I'm getting this with bootstrap 4:

MODAL: Option "backdrop" provided type "undefined" but expected type "(boolean|string)"

The link is just

link_to 'Cancel account', registration_path(resource_name), method: :delete, class: 'btn btn-danger', data: { confirm: 'Are you sure?' }

I'm thinking the version of BS 4 I'm running changed the argument requirements. Looking at data-confirm-modal.js, it looks like it plugs the data attributes directly into the BS modal function without conferring with defaults. Should backdrop, keyboard and show be using ||= instead?

Hey guys, can I suggest adding a "how to use it" example to the documentation? Specifically the need to include the method in the link stumped me for a bit, hehe. :p Might help someone else to have it noted explicitly. Thanks for the great gem!

The master branch of the gem has a feature that allows the class of the modal to be selected using a data attribute:

https://github.com/ifad/data-confirm-modal/blob/master/vendor/assets/javascripts/data-confirm-modal.js#L98

Apparently, it was introduced after the release of v. 1.2.0 but, in my opinion, this feature is important enough to deserve its own version.

Would it be possible to release it to RubyGems?

Is it possible to add btn-sm to the buttons? And change the red color for example?

Is there any option that you push that gem into RubyGems? I have very unfortuate server that can't do bundle install if there are any dependencies directly from git (some kind of git error. And git binaries are quite old...)

I try to set title with this code <%= link_to 'Delete', data: {title: "test", confirm: 'Are you sure?'} %>
It not work and alway show "Are you sure?"
So i looking in your code and i suspect this line

title: element.attr('title') || element.data('original-title')

Then i test it with this code <%= link_to 'Delete', title: "test", data: {confirm: 'Are you sure?'} %> and it work

sorry about my english language

The version that you illustrate for using this without rails and without data attributes, shows the onConfirm and onCancel events popping alert messages. Is it possible to show what would be the correct callbacks to use to get the behavior of a normal confirmation: i.e. onConfirm would send the click event to #foo, and the onCancel event would simply close the confirmation dialog.

I'm sure I'm missing something here, but I just cannot get this to work, and unfortunately cannot use the other implementations because I cannot figure a way to set the 'text:' dynamically in any of the other implementations.

(Continued from twbs/bootstrap-rubygem#127...)

In integrating data-confirm-modal into my Rails app, I accidentally used this ordering in my application.js file:

//= require rails-ujs
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap
//= require_tree .

With this ordering data-confirm-modal doesn't perform Rails initialization, because $.rails wasn't set. I resolved the issue by moving the //= require jquery3 to the top. With jQuery included first, data-confirm-modal initialized without any problems.

I had originally created this as a documentation issue for bootstrap-rubygem (which explains the application.js setup), but @glebm has suggested that this be resolved by changing data-confirm-modal to stop using $.rails.

What do you think? Would an alternative to $.rails help make the initial setup of data-confirm-modal easier?

I installed this using yarn for rails 6. I have this in my application.js

import 'bootstrap'
require('data-confirm-modal')
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

However, when I try to test it, there is no modal coming up. it just shows a blank. Any reason why?

Two windows are displayed when you click the link that has a data-confirm attribute.
Please see below.

Versions:

• Internet Explorer: 11
• Ruby: 2.6.5
• Rails: 5.2.4
• data-confirm-modal: 1.6.3
• Bootstrap: 4.4

If the contents of the data-confirm attribute contain user-generated content, this library opens up the app to possible XSS vulnerabilities, which makes sense given the use of the html() function here.

Is it by design to allow script tags to execute if passed into the body? I understand the desire to pass in HTML that is rendered properly in the modal body, but perhaps we can work to prevent these script tags from also executing. Thoughts?

Crude Example:

<% # Assumption: user.name = "<script>alert('oops')</script>" %>

<%= link_to("Open", "#", data: { confirm: "Are you sure you want to open this #{user.name}?" }) %>

I asked this question on stackoverflow... but perhaps the question better should be asked here.

I have been at this for a day now, i seem to be running in circels.

Rails 6 project with webpacker using bootstrap and jquery

ruby 2.7.4
rails 6.0.4.1
jquery 3.6.0
bootstrap 5.1.0
and data-confirm-modal 1.6.2

When the page loads the chrome debugger tells me: Uncaught Error: The bootstrap modal plugin does not appear to be loaded.

  if ($.fn.modal == undefined) {
    throw new Error("The bootstrap modal plugin does not appear to be loaded.");
  }

Jquery is working.
Also i can see $ and $.fn are defined.
modal is missing from the properties of $.fn

enviroment.js

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery'
    })
)

module.exports = environment

application.js

require("@rails/ujs").start()
//require("turbolinks").start()  // gave reload bug... remove ?
require("@rails/activestorage").start()
require("channels")
//require("local-time").start()
require('jquery')

//import "./gems.js.erb"  # needs bundle exec rails webpacker:install:erb !
//import "./direct_uploads"

require('jquery-ui')

require('bootstrap')

window.jQuery = $;
window.$ = $;

import 'data-confirm-modal'

What am i missing ?

Hi,

It would be nice to automatically focus on the verify input when opening a confirm modal with the verify feature !

I am migrating from Rails 5.2 with the asset pipeline to Rails 6.1.3 with webpacker.

I want to use Bootstrap 5.0.0-beta2 and data-confirm-modal 1.6.2.

I believe I have the proper configuration according to the docs, but I keep getting this in my browser console:

data-confirm-modal.js:80 Uncaught Error: The bootstrap modal plugin does not appear to be loaded.
    at data-confirm-modal.js:80
    at Object.<anonymous> (data-confirm-modal.js:307)
    at Object../node_modules/data-confirm-modal/vendor/assets/javascripts/data-confirm-modal.js (data-confirm-modal.js:307)
    at __webpack_require__ (bootstrap:63)
    at Module../app/javascript/packs/application.js (application.js:28)
    at __webpack_require__ (bootstrap:63)
    at Object.0 (log.js:56)
    at __webpack_require__ (bootstrap:63)
    at bootstrap:198
    at bootstrap:198

But the modal plugin is available, because I can trigger modals. Any idea what is happening?

This is my configuration:

// app/javascript/packs/application.js

require.context("../images", true)
import Rails from "@rails/ujs"
import { Turbo } from "@hotwired/turbo-rails"
window.Turbo = Turbo
import "../stylesheets/bootstrap_overrides"
import "../stylesheets/application"
import "../javascripts/shared"
import "jquery"
import "bootstrap"
window.bootstrap = require('bootstrap/dist/js/bootstrap.bundle.js')
Rails.start()
require('data-confirm-modal')

/* app/javascript/stylesheets/application.scss */

@import "~bootstrap/scss/bootstrap";

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack         = require('webpack')

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Rails: '@rails/ujs',
    Popper: ['popper.js', 'default']
  })
)

module.exports        = environment

// package.json

{
  "dependencies": {
    "@hotwired/turbo-rails": "^7.0.0-beta.5",
    "@popperjs/core": "^2.9.0",
    "@rails/ujs": "^6.1.3",
    "@rails/webpacker": "5.2.1",
    "bootstrap": "5.0.0-beta2",
    "data-confirm-modal": "^1.6.2",
    "jquery": "^3.6.0",
    ...
  }
}

This Github issue may touch on the subject, but not sure.

Hi, I've installed your library, then I've pasted it in application.js

//= require jquery3 //= require popper //= require bootstrap //= require data-confirm-modal

but it doesn't work. Every time I'm getting old, browser window just like without using your lib. Console is clear, without errors.

• Gemfile.lock
• pkg folder with previous versions of the gem (from 1.3.0 to 1.6.2)

$ npm pack --dry-run
npm notice 
npm notice 📦  [email protected]
npm notice === Tarball Contents === 
npm notice 1.1kB  LICENSE                                        
npm notice 5.3kB  README.md                                      
npm notice 364B   package.json                                   
npm notice 11.3kB vendor/assets/javascripts/data-confirm-modal.js
npm notice === Tarball Details === 
npm notice name:          data-confirm-modal                      
npm notice version:       1.6.2                                   
npm notice filename:      data-confirm-modal-1.6.2.tgz            
npm notice package size:  6.3 kB                                  
npm notice unpacked size: 18.0 kB                                 
npm notice shasum:        bb9d143254d6a47fd08a91da949b517973d2acf6
npm notice integrity:     sha512-Tat63oGHW/FTz[...]Yl7Dt3A+hWRDg==
npm notice total files:   4                                       
npm notice 
data-confirm-modal-1.6.2.tgz

I would like to override the default close icon to use google material icon <i class='material-icons'>clear</i>. Is there any callbacks before the modal is shown so that I could inject the above html code. Or do you have any suggestions to do so?

Appreciate your response!

options.text is added to modal as follows:

$.each((options.text||'').split(/\n{2}/), function (i, piece) {
  body.append($('<p/>').html(piece));
});

However options.verifyLabel is added like:

if (options.verifyLabel)
  body.append($('<p>', {text: options.verifyLabel}))

Could both of these inserts be normalized? I am trying to add a class wrapper around some text in these inserted paragraphs to word break their content as my file names tend to be long and I'd rather not make the modal bigger if possible, instead just word breaking using css. If possible I'd like to do this specifically on file name rather then targeting the parent paragraph, as I don't want the the paragraphs to break on less long words.

confirm: "Are you sure you want to delete <span class='confirm-filename'>`#{file.filename}`</span>?  This is a permanent action an can not be undone.",
verify: "#{entity.filename}",
verify_text: "Type <span class='confirm-filename'>`#{file.filename}`</span> to confirm"},`

Could be fixed by using .html() instead of .. {text: 'options.verifyLabel'}

$.each((options.text||'').split(/\n{2}/), function (i, piece) {
  body.append($('<p/>').html(piece));
});

if (options.verifyLabel)
  body.append($('<p>').html(options.verifyLabel))

Let me know if there is any issues with this approach?

Hi, has anyone already started converting this to Vanilla JS for support for the next Bootstrap 5?

Hi guys, thanks for this gem I love it !!
I've just updated to rails 5 and I'm encountering a problem since that. The template is working but when I click on continue, the default modal (not deigned) appear. So I have to click two times on validate. Someone has already had the same problem ?

This gem checks if if (window.Rails || $.rails) are defined. Which doesn't appear to be the case for Rails 6.

I updated app/javascript/packs/application.js to make window.Rails globally available:

const Rails = require("@rails/ujs")
Rails.start()
window.Rails = Rails

Hope it helps.

I am using rails, and after clicking the link and confirming it does not follow the link. Here's the link code:

<td><%= link_to 'Cancel Appt', cancel_appointment_path(appointment), class: 'btn btn-default btn-xs btn-danger btn-disable-after-click', data: { confirm: "Are you sure you want to cancel the appointment?", commit: 'Yes', cancel: 'No' } %></td>

This is called after_click so that the button cannot accidentally be clicked twice by an impatient user:

$('.btn-disable-after-click').on 'click', (e) ->
    $(this).addClass('disabled')

Also, I need to not disable the button if 'Cancel' is clicked. How can I implement this? How can I reference the modal's after-confirm or after-cancel events from javascript? What is the modal's class/id?

Thanks!

Hello!

I'm trying to dynamically change confirmation text. But dialog actually changes only the first time I change data-confirm value. Is there anything else I'm doing wrong or some event I need to trigger for this to work correctly?

I'm using v.1.3.0.

UPD. Updating to 1.6.1 made no effect.

The current js checks if there is any other elements with class ".modal.in" and sets the z-index to be on top of this one but if there are other elements with higher z-indexes it remains on "z-index:1".

That's the function. I would remove it and leave it using a high z-index set via CSS or check all elements and setup the z-index to be on top of all of them or at set the "highest" value to something bigger.

// Make sure it's always the top zindex
    var highest = current = 0;
    $('.modal.in').not('#'+id).each(function() {
      current = parseInt($(this).css('z-index'), 10);
      if(current > highest) {
        highest = current
      }
    });
    modal.css('z-index', parseInt(highest) + 1);

When confirm dialog show. It not show correct show dialog modal.
Please help me fix it.

I had to dig into the source code to check what works, then I found out that only verifyLabel works. 'verify-text' or verifyText doesn't work.
Works:

Doesn't work:

Is there a way to call this inside a js or coffee file instead of using the js confirm?

for example, I want to use this instead of the confirm below:

$(document).on "click", "div.people-snippet", (e) ->
  $this = $(this)
  url = $(this).data("url")
  if $this.hasClass('selected')
    if confirm "Are you sure you want to remove this invitee?"
      $.get url if url
  else
    $.get url if url
  return

I can get the verify box working, but I can't see how to get the verify-text option working in rails, i have the following without the label:

<%= link_to('Delete', leave_type, title: 'Delete Transaction Type', data: { method: 'delete', verify: 'Yes', commit: "Yes, Delete it", confirm: "Are you sure you want to delete the Transaction Type for <b>#{leave_type.name}</b>?" })  %>

I'm a bit lost on how to get the verify-text option in there as Rails won't accept just putting verify-text: 'Type Yes to confirm' into this option.

JSFiddle replicating issue: https://jsfiddle.net/zhuxdyfb/

In the fiddle, no matter what you put in data-modal-close-content, it doesn't change the default × content. Am I using it wrong?

Implementation is based on this config option, and this line should be replacing the default value with what I put in data-modal-close-content so I'm not sure what's happening.

options.verifyLabel should create a <label> tag referencing the <input>. The input will need also need a id attribute as well.

var verification = $('<input/>', {"type": 'text', "id": "confirm", "class": settings.verifyClass}).on('keyup', function () {
  commit.prop('disabled', !isMatch($(this).val()));
});

...

if (options.verifyLabel)
        body.append($('<label>', {text: options.verifyLabel, for: 'confirm' }))

I have a subscribe/unsubscribe link that looks a little like this:

<%= link_to 'Subscribe', subscribe_deck_path(@deck), class: "subscribe_action subscribe #{@deck.subscribed? ? '' : 'active'}", remote: true %>
<%= link_to 'Unsubscribe', unsubscribe_deck_path(@deck), method: :delete, data: { confirm: "Are you sure?" }, class: "subscribe_action unsubscribe #{@deck.subscribed? ? 'active' : ''}", remote: true %>

Switching the display state of the links based on subscription status.
If I Unsubscribe once, I get the correct modal.
If I then subscribe and unsubscribe again without refreshing the page, I get the browser dialog. It's as if the event is being attached with jQuery's one() function..

I'm also using https://github.com/jschr/bootstrap-modal if that's a conflict.

Hi, thanks for this gem, it made replacing confirm alerts with modals a breeze.

The latest version brought Rails 5 and Bootstrap 4 support. In the pull #55 you where wondering about the backward compatibility and said that everything is fine. But I noticed the Bootstrap 4 modal change break the Bootstrap 3 modals.
v1.5.0 with Bootstrap 3 looks like this:
Here a jsfiddle(your example with the latest version) to demonstrate: http://jsfiddle.net/ze2Lz8tm/56/

Downgrading solved it for me, but maybe you should create a Bootstrap 3 compatible version and add a notice in the readme.

I've had an app running for a long time, but just started getting this error out of the blue

At first, it was breaking functionality in my app. I then moved data-confirm-modal to the bottom of my application.js and things started working again, but I'm still getting the error in the js console.

Here are all the pertinent files (I think)

## Gemfile
source 'https://rubygems.org'

gem 'aasm'
gem 'active_model_serializers'
gem 'activejob-retry'
gem 'acts-as-taggable-on'
gem 'aes'
gem 'animalcodes', git: 'https://github.com/crossblaim/animalcodes.git'
gem 'aws-sdk'
gem 'bootstrap-sass', '~> 3.1.1'
gem 'burgundy'
gem 'capistrano', '~> 2.15.9'
gem 'cells-rails'
gem 'cells-slim'
gem 'charlock_holmes'
gem 'coffee-rails'
gem 'delayed_job_active_record'
gem 'delayed_job_web'
gem 'devise'
gem 'devise-authy'
gem 'devise-encryptable'
gem 'devise_invitable', '~> 1.5.2'
gem 'enum_help'
gem 'enumerize'
gem 'escape_utils'
gem 'figaro'
gem 'flag_shih_tzu'
gem 'font-awesome-sass', '~> 4.5.0'
gem 'gon'
gem 'gretel'
gem 'httparty'
gem 'iconv'
gem 'jbuilder', '~> 2.4.0'
gem 'jquery-rails', '4.1'
gem 'json', '~> 1.8.3'
gem 'kaminari'
gem 'kaminari-bootstrap', '~> 3.0.1'
gem 'kaminari-cells'
gem 'nilify_blanks'
gem 'oj', '~> 2.12.14'
gem 'omniauth-google-oauth2', '~> 0.4.1'
gem 'paperclip', git: 'https://github.com/thoughtbot/paperclip.git'
gem 'paranoia', '~> 2.2'
gem 'pg'
gem 'pundit'
gem 'rack-cors', require: 'rack/cors'
gem 'rails', '4.2.9'
gem 'rails-observers', git: 'https://github.com/rails/rails-observers'
gem 'ranked-model'
gem 'ransack', '~> 1.8.8'
gem 'react-bootstrap-rails'
gem 'react-flux-rails'
gem 'react-rails', '~> 1.5.0'
gem 'redcarpet'
gem 'roadie-rails'
gem 'rollbar'
gem 'rubyXL'
gem 'rubyzip'
gem 'sass-rails', '~> 5.0', '>= 5.0.6'
gem 'schema_plus_views'
gem 'select2-rails'
gem 'simple_form'
gem 'slim-rails'
gem 'spreadsheet'
gem 'thin'
gem 'tinymce-rails'
gem 'uglifier'
gem 'underscore-rails'
gem 'whenever', require: false

# keep these at the bottom
gem 'data-confirm-modal', git: 'https://github.com/ifad/data-confirm-modal.git'

group :production do
  gem 'newrelic_rpm'
end

group :test, :development do
  gem 'annotate'
  gem 'fantaskspec'
  gem 'pry-byebug'
  gem 'rspec-rails', '~> 3.4.2'
end

group :development do
  gem 'better_errors'
  gem 'binding_of_caller'
  gem 'foreman'
  gem 'letter_opener'
  gem 'quiet_assets'
  gem 'rubocop', '~> 0.37.2', require: false
end

group :test do
  gem 'capybara', '~> 2.6'
  gem 'capybara-email'
  gem 'database_cleaner'
  gem 'factory_girl_rails'
  gem 'poltergeist'
  gem 'shoulda-matchers'
  gem 'simplecov', require: false
  gem 'timecop'
  gem 'webmock'
end

## application.js
#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require react
#= require react_ujs
#= require react-flux
#= require underscore
#= require react_bootstrap
#= require_tree ./components/shared
#= require_tree ./components/app
#= require ./pickadate/picker
#= require ./pickadate/picker.date
#= require ./pickadate/picker.time
#= require ./pickadate/legacy
#= require jsoneditor
#= require ./epiceditor.min
#= require select2
#= require_tree ./shared
#= require_tree ./application
#= require data-confirm-modal

Thanks!!

Hello

= link_to destroy_user_session_path, data: {title: t(:confirm_action), confirm: t(:are_you_sure_logout), commit: t('yes'), cancel: t('not')}

Is used in the link attribute data-title, but the title he did not appear.
Everything else works fine. Thanks

I did a bundle update today and noticed that the lastest version does not show the modal dialog for me. Debugging revealed that the div is added to the DOM, but it does not get displayed (zindex issue?).

Rails 3.2.x
Bootstrap 2.3.2

Pointing the gem entry specifically at the bootstrap2 branch works fine.

Is this expected?

My current gem entry:
gem 'data-confirm-modal', github: 'ifad/data-confirm-modal', branch: 'bootstrap2'

Thanks,

Jeff

https://www.chromestatus.com/feature/5148698084376576 Since chrome now prevents alert dialogs from embedded applications, I'm trying to use data-confirm-modal to replace all dialogs from my application.

I could install the gem but, at first, it removed the dialog but the modal didn't show up, and the action was confirmed even without the user accepting it.

I did some investigation and found out the problem at this part of the code:

The modal responds to true even before it's spawned. I've spawned it manually through the console and it worked. The modal shows up and the user can confirm the action as it should be.

The modal object:

<div 
  id="confirm-modal-216530675292821" 
  class="modal false fade" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="confirm-modal-216530675292821Label" 
  aria-hidden="true" style="z-index: 1051;"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h5 id="confirm-modal-216530675292821Label" class="modal-title">Entfernen</h5> 
      </div>
      <div class="modal-body"><p>Do you really want to remove this service?</p></div>
      <div class="modal-footer">
        <button class="btn cancel btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button class="btn commit btn-danger" data-dismiss="modal">Confirm</button>
      </div>
    </div>
  </div>
</div>

Do you have any idea on why the modal is responding to true? If you need any other info, I'll be glad to bring it

Does possibility exist to change background of buttons with options?

The url went like this http://localhost:3000/cart/10fb416e-a97b-4cf6-9501-fd4417669b2b

<%= link_to cart_path(cart_item.id), method: :delete,class: 'remove-cart-item', data: {confirm: 'Are you sure that you want to remove from this cart'} do %>

//= require data-confirm-modal if i remove this line, everything works fine.

I tried to use it with Rails 5.1 and Bootstrap 4 but the default alert messages is showing instead of the modal. There are no JS errors in the console. Do you have any plan to support Bootstrap 4 and Rails 5?

I'm using the NPM package since I'm using webpacker. When the jQuery selector works and the dataConfirmModal object exists, I'm still getting $(...).confirmModal is not a function when calling $('#delete_link').confirmModal();. I'm also loading rails-ujs though webpacker, although not including data-confirm-modal isn't giving me a browser confirm. Does this mean I have a rails-ujs loading issue? I would have thought data-confirm-modal would be a function regardless of the presence of rails-ujs.

Just as the question states, how would I create a delete popup where the use has to explicitly type "DELETE" in order to delete?

I don't want this to be applied to all the require confirm popups that I have throughout my app, just on a particular delete button. In the readme I only see how I can set global settings.

First of all: thanks for this gem! I was about to build something similar when I found it 😁

I was wondering: why isn't "form-control" set as default for verifyClass, being this a bootstrap styled gem? I know I can set it like this:

dataConfirmModal.setDefaults({
verifyClass: 'form-control',
});

but I would have thought this to be the default already, again, being this a bootstrap styled gem.

I was going to do a pull request with this, but I thought I ask first, in case there is something I'm missing here.

Thanks,

Jesús.-

https://github.com/ifad/data-confirm-modal/blob/master/vendor/assets/javascripts/data-confirm-modal.js#L49

should be ''