Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Both the modal and the confirm-window are displayed on IE11. #80

Open
mya-zaki opened this issue Jul 9, 2020 · 2 comments
Open

Both the modal and the confirm-window are displayed on IE11. #80

mya-zaki opened this issue Jul 9, 2020 · 2 comments
Labels

Comments

@mya-zaki
Copy link

mya-zaki commented Jul 9, 2020

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

Versions:

  • Internet Explorer: 11
  • Ruby: 2.6.5
  • Rails: 5.2.4
  • data-confirm-modal: 1.6.3
  • Bootstrap: 4.4
@tagliala tagliala added the bug label Feb 13, 2021
@tagliala
Copy link
Member

tagliala commented Feb 13, 2021

Hi,

apologies for the late reply.

I can confirm the issue. It only happens when using webpacker

Edit: It happens when using @rails/ujs instead of jquery-ujs, even without webpacker

Demo: https://jsbin.com/lejopuq/

@tagliala
Copy link
Member

@vjt with latest versions @rails/ujs, it is possible to override Rails.confirm.

Instead of

if (window.Rails || $.rails) {
/**
* Attaches to Rails' UJS adapter's 'confirm' event, triggered on elements
* having a `data-confirm` attribute set.
*
* If the modal is not visible, then it is spawned and the default Rails
* confirmation dialog is canceled.
*
* If the modal is visible, it means the handler is being called by the
* modal commit button click handler, as such the user has successfully
* clicked on the confirm button. In this case Rails' confirm function
* is briefly overriden, and afterwards reset when the modal is closed.
*
*/
var window_confirm = window.confirm;
$(document).delegate(settings.elements.join(', '), 'confirm', function() {
var modal = $(this).getConfirmModal();
if (!modal.is(':visible')) {
modal.spawn();
// Cancel Rails' confirmation
return false;
} else {
// Modal has been confirmed. Override Rails' handler
window.confirm = function () {
return true;
}
modal.one('hidden.bs.modal', function() {
// Reset it after modal is closed.
window.confirm = window_confirm;
});
// Proceed with Rails' handlers
return true;
}
});
}

we could write:

/**
 * Override `Rails.confirm` dialog.
 *
 * If the modal is visible, it means that the handler is being called by the
 * modal commit button click handler, as such the user has successfully
 * clicked on the confirm button.
 *
 * If the modal is not visible, then it is spawned and the default Rails
 * confirmation dialog is canceled.
 *
 */
Rails.confirm = function (message, el) {
  const modal = $(el).getConfirmModal()

  if (modal.is(':visible')) {
    return true
  } else {
    modal.spawn()
    return false
  }
}

It also works on IE11, FWIW

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants