Bootstrap modal does not work well with jQuery UI dialog

See the existing JS overrides:
http://cgit.drupalcode.org/bootstrap/tree/js/misc/ajax.js
http://cgit.drupalcode.org/bootstrap/tree/js/misc/dialog.js
http://cgit.drupalcode.org/bootstrap/tree/js/misc/dialog.ajax.js

Same problem with Ctool modal

console error:

Uncaught TypeError: data[option] is not a function
    at HTMLDivElement.<anonymous> (modal.js?oj4igp:299)
    at Function.each (jquery.min.js?v=2.2.3:2)
    at n.fn.init.each (jquery.min.js?v=2.2.3:2)
    at n.fn.init.Plugin [as modal] (modal.js?oj4igp:293)
    at Object.attach (dialog.ajax.js?oj4igp:30)
    at Object.Drupal.attachBehaviors (drupal.js?v=8.2.4:168)
    at Drupal.AjaxCommands.insert (ajax.js?v=8.2.4:1084)
    at Drupal.AjaxCommands.openDialog (dialog.ajax.js?oj4igp:127)
    at Drupal.Ajax.success (ajax.js?oj4igp:155)
    at Object.success (ajax.js?v=8.2.4:505)

I can confirm this isn't working as expected.

So you can see bootstrap version just swaps out the setting "show" for core's "modal"

Hm. Yes... that shouldn't be show there.

My brief searching makes me think that bootstrap does not support non-modal dialogs.

In Bootstrap, the "modal" concept is actually centered around the backdrop option.

---

I will be looking at the dialogs/modals in Bootstrap in more depth sometime this week while I work on abstracting the outside_in stuff.

This doesn't work because core relies on the jquery ui dialog to create buttons, titles etc. Here's a WIP patch that adds some basic support. Needs to be refined and generalized, and not well tested yet.

Last patch had some cruft

Fix errors when closing

Still not right :)

Debugger statement. Wish i could delete comments now

More fixes, handle buttons in a more circumspect way and use bootstrap theme functions to build the modal as needed.

Here's another evolution that avoids a number of additional issues related to attaching behaviors and handling buttons. Non-modal now shows an error message indicating it's currently not supported. The only example of non-modal dialogs I know is the token browser, which is resizable, and movable, neither of which is supported by bootstrap's modal. I'm planning to simply fall back to the jquery ui dialog there for lack of a better solution.

I'm also tracking a list of all the permutations I'm using to test this:

* Linkit button on ckeditor [fixed with patch]
* Changing text formats (shows warning about losing content) [fixed with patch]
* (custom dialog with ajax forms -- need to create a reduced test case for public use) [fixed with patch]
* views UI [ broken ]
* token browser [ broken - non-modal ]
* file browser field widget [ broken - iframe foolishness ]
* purge settings /admin/config/development/performance/purge [ broken -- needs dropdown button rewrite to recognize attributes and use links rather than buttons when the original was a link not a button ]

Still needs work but maybe mark can take a look

This patch fixe described issue #2906543: openDialog Event doesn't works as expected

Ok ... We have chosen the Bootstrap theme also to be able to use bootstrap modals... Now we get JS Errors.

Will this be fixed?

By the way this JS Error does not occur when using the bootstrap Main theme... instead of a sub theme.
Anybody?

@fearlsgroove: great work! And I agree with the fall back...

I'm planning to simply fall back to the jquery ui dialog there for lack of a better solution.

This would be better than nothing. It isn't hard to "theme" ui dialog to fit Bootstrap if there is no easy alternative solution near the corner. I will test if this patch also fixes #2931769: Text editor 2nd level popups for autocomplete look broken in several ways

 $ drush pmi bootstrap
 Extension    :  bootstrap                                                                                                   
 Project      :  bootstrap                                                                                                   
 Type         :  theme                                                                                                       
 Title        :  Bootstrap                                                                                                   
 Descriptio   :  Built to use Bootstrap, a sleek, intuitive, and powerful front-end framework for faster and easier web      
 n               development.                                                                                                
 Version      :  8.x-3.7                                                                                                     
 Date         :  2017-11-30                                                                                                  
 Package      :  Bootstrap                                                                                                   
 Core         :  8.x                                                                                                         
 PHP          :  5.5.9                                                                                                       
 Status       :  enabled                                                                                                     
 Path         :  themes/bootstrap                                                                                            
 Configure    :  None                                                                                                        
 Engine       :  twig                                                                                                        
 Base theme   :                                                                                                              
 Regions      :  Navigation, Navigation (Collapsible), Top Bar, Highlighted, Help, Content, Primary, Secondary, Footer, Page 
                 top, Page bottom                                                                                            
 Features     :  favicon, logo, node_user_picture, comment_user_picture, comment_user_verification     

/themes/bootstrap $ git apply -v bootstrap-dialogs-2831237-14.patch
Checking patch js/misc/dialog.ajax.js...
Checking patch js/misc/dialog.js...
Checking patch js/modal.js...
Applied patch js/misc/dialog.ajax.js cleanly.
Applied patch js/misc/dialog.js cleanly.
Applied patch js/modal.js cleanly.

Patch applies cleanly. Not sure if it solves your issues, but it doesn't solve #2931769: Text editor 2nd level popups for autocomplete look broken in several ways (This issue isn't Bootstrap related no more). I see some successful changes like HTML element class attribute has changed from "drupal-modal" to "modal fade-in" and id="drupal-bootstrap-modal". Maybe I am mistaken by thinking these both issues are related from a first glimpse.

#14 solved my problems! One note:

+++ b/js/misc/dialog.js
@@ -61,42 +61,109 @@
+      console.log('create buttons');

Remove this

Ok, I've finally reviewed #14.

The more I look over the dialog.js and dialog.ajax.js changes, the more I'm beginning to think how we're handling everything so far is simply the wrong approach.

Perhaps it'd be better to just override the libraries so that instead of loading jQuery UI dialog, we simply create a bridge that mimics expected $.fn.dialog functionality. This way we're not constantly having to override core or contrib JS when they use it.

I'll see what I can come up with.

Ok. Here's my WIP patch. I'm fairly happy with this direction and seem to get most of jQuery UI's dialog functionality working in Bootstrap Modals. It also completely removes the need to override core's... interesting... concept of handling dialogs.

This also adds a new theme setting called "jQuery UI Bridge" (modal_jquery_ui_bridge) which is enabled by default.

Simply put, it replaces the core/jquery.ui.dialog dependency in core/drupal.dialog with bootstrap/modal.jquery.ui.bridge. If one wishes to keep the jQuery UI dialog, they can disable it without losing Bootstrap's Modals.

This new bridge mimics the $.fn.dialog jQuery plugin and essentially proxies it to the Bootstrap Modal plugin. It also extends Bootstrap's Modal plugin with the dialog methods and option mapping necessary to make everything "just work".

Obviously, some things will likely never be supported (e.g. $.fn.dialog('instance')) since the internals are very different. However, I think this gets us the majority of the way there and now it's just a matter of filling in the remaining "option" support.

I still have a little bit of work to do, but I'd say this is fairly close to being done.

I'll keep this open for a couple days and then commit sometime this week barring no obvious hangups.

Would appreciate some reviews @fearlsgroove and @tedbow.

edit: p.s. I purposefully didn't do an interdiff since the code is vastly different between the last patch and this one.

Remaining tasks:

• Finalize option support
• Verify drupal.dialog attachBehaviors
• Verify drupal.dialog events are triggered
• Verify form actions are cloned into and proxied from footer

Well, this didn't make it in this last release.

I'm less concerned with actual code review (I know it's a lot to take in).

Instead, if y'all could just apply the patch and test actual functionality on previously known issues, that will help out tremendously.

I have tested #25 against https://www.drupal.org/project/bootstrap/issues/2891600:

1-In contextual menu click "Quick Edit"
2-Click on any text to edit it
3-Edit it (add a letter)
4-change you mind and click the cross next to the save button to exit

=>the page will hangs... you can't do anything more.

Before applying the patch the page was hanging with a semi-transparent background, now I don't get this background... only the page.

Does the patch need to be against the the dev version? Had no success applying #25 on stable version.

Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2831237-25.patch

I found a few more issues.

#30 doesn't solve the #27 problem...

@DuneBL, I don't understand how #27 is related to this exactly. Quick edit is mostly inline CKE. The only time it would use a dialog is for things like images, no?

What you're describing (editing text) shouldn't invoke a dialog/modal at all.

I believe whatever you're experiencing is an entirely separate issue from this one.

@markcarver this is related because if you follow the steps I have described, you will get a modal dialog.
This is also related because, if I uncheck 'composants>Enable Bootstrap Modals' in 'admin/appearance/settings/mybootstraptheme', then the bug doesn't appear.
This is clearly linked to the use of the bootstrap modals as @suchdavid discovered it in https://www.drupal.org/project/bootstrap/issues/2891600#comment-12320268

Ah, I missed step #4 "change you[r] mind and click the cross next to the save button to exit".

That indeed is supposed to show a dialog.

I actually was running into this after I applied the patch, but only because it was trying to load the dialog.js file in the theme which is no longer present after this patch is applied.

You need to rebuild the cache after you apply the patch so the library info is updated.

Once that is done, it works properly (see this screencast: http://take.ms/wf3EW).

That being said, I did run into a slight bug in where jQuery UI's closeOnEscape dialog option is being used by core to force a user to choose an action (button). If present and disabled, this now makes the modal static (cannot click to close) and hides the close button.

Currently when there's no content inside .modal-body, the dialog/modal looks odd because of its padding which separates both the header and footer and makes their borders visible:

I did a little work in-browser to see if this could be accounted for and for now, I'll just paste this code here as I feel it's out of scope for this issue. We can address this in a follow-up once #2852156: Move "overrides" source files and generated CSS to separate project is addressed.

.modal-body:empty {
    padding: 0;
    margin-top: -1px;
}

I think that I have one more example of this bug and steps to reproduce the bug with CKEditor and Format filters.

How to reproduce:

• Create a content type with a body field with two possible format filters with CKEditor.
• Check the option to use Bootstrap theme to edit content instead of the default administration theme.
• Create content and save a new node.
• Edit the node with content, make some changes and change the body format filter.

This action will open a modal backdrop in with the message: Changing the text format to <em class="placeholder">HTML complet</em> will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.

With Seven theme works but with Bootstrap theme the backgroud opacity is changed but the dialog is not opened.

@markcarver I still get the bug after applying #36 and cache clear.

caught TypeError: data[option] is not a function
    at HTMLDivElement.<anonymous> (modal.js?p3tu2o:297)
    at Function.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.Plugin [as modal] (modal.js?p3tu2o:291)
    at r.fn.init.dialog (modal.jquery.ui.bridge.js?p3tu2o:83)
    at dialogAftercreate (dialog.position.js?v=8.4.5-dev:59)
    at dispatch (jquery.min.js?v=3.2.1:3)
    at q.handle (jquery.min.js?v=3.2.1:3)
    at Object.trigger (jquery.min.js?v=3.2.1:4)
    at jquery.min.js?v=3.2.1:4

Note that the step 3 (below) is mandatory to get the bug:
1-In contextual menu click "Quick Edit"
2-Click on any text to edit it
3-Edit it (add a letter)
4-change you mind and click the cross next to the save button to exit

@DuneBL, I think you're just not applying the patch correctly. The error you posted indicates that it is still using the Bootstrap Framework's original modal constructor, not the one that this patch introduces (replaces). I cannot reproduce your "issue" at all: http://take.ms/7qPBw

---

This patch addresses #37 and #39.1-2.

Discussed with @tedbow and any Off-canvas issues should likely be a separate follow-up issue, probably re-opening/re-titling #2821008: [bootstrap] Add support for the Off-canvas dialog used by Settings Tray and Layout Builder.

Change record here: https://www.drupal.org/node/2943327

The new patch is just some minor coding standard changes I noticed in the new theme settings file.

If someone wants to RTBC it, I think it's ready to be committed. We can address any other issues in follow-ups.

Fixes #43.

Only confirm that #44 fixes my bug related in #37

I confirm that #44 solve my problem.
Note the following: after having applied the patch, I drush cr but the problem was still there...
I had to restart my apache server to get it working....

I had to restart my apache server to get it working....

This sounds like your local may be using APC/Memcache or some other local caching mechanism that was preventing the new file changes from being discovered properly then.

So it also sounds like 3 people have already given this issue a green light. I'll mark it as RTBC for now then and will commit it sometime tomorrow barring anyone finding any further severe issues. Minor things can be addressed in follow-ups.

Hm. Guess it didn't take... trying again.

I have error after apply this patch:

drupal.js?v=8.4.4:13 Uncaught TypeError: Cannot read property 'Constructor' of undefined
    at Object.attach (tooltip.js?p3zc5t:38)
    at Object.Drupal.attachBehaviors (drupal.js?v=8.4.4:25)
    at drupal.init.js?v=8.4.4:16
    at HTMLDocument.t (ready.min.js?v=1.0.8:4)

I get error on line 38 in js/tooltip.js:
var options = $.extend({}, $.fn.tooltip.Constructor.DEFAULTS, $element.data());

When I disable tooltips in theme settings, I get this error:

modal.jquery.ui.bridge.js?p3zdz7:84 Uncaught TypeError: Cannot read property 'apply' of undefined
    at r.fn.init.dialog (modal.jquery.ui.bridge.js?p3zdz7:84)
    at openDialog (dialog.js?v=8.4.4:41)
    at Object.showModal (dialog.js?v=8.4.4:31)
    at Drupal.AjaxCommands.openDialog (<anonymous>:92:14)
    at Drupal.Ajax.success (ajax.js?p3zdz7:155)
    at Object.success (ajax.js?v=8.4.4:222)
    at i (jquery.min.js?v=3.2.1:2)
    at Object.fireWith [as resolveWith] (jquery.min.js?v=3.2.1:2)
    at A (jquery.min.js?v=3.2.1:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js?v=3.2.1:4)

@dillix, I cannot reproduce your errors (nor do they make much sense).

Please try rebuilding the cache and/or restarting your local web server if you have APC/memcache installed which may cause existing files to not "update" with the new code right away.

@markcarver, I rebuilded opcache & cleared site cache. To reroduce try to add ckeditor to node comments textarea and then click to Link or Image button.

@dillix, I still cannot reproduce your issue: http://take.ms/DvQTW

---

I did, however, find a bug (completely unrelated to #52) where the backdrop wasn't being removed after the dialog was closed though. Attaching patch.

I found issue: I used webpack .js compilation, so I attached simply bootstrap.min.js in subtheme and now modals show fine. But when I open any modal I get in console:

modal.js:512 Uncaught TypeError: No method named "option"
    at HTMLDivElement.<anonymous> (modal.js:512)
    at Function.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.each (jquery.min.js?v=3.2.1:2)
    at r.fn.init.o._jQueryInterface [as modal] (modal.js:497)
    at r.fn.init.dialog (modal.jquery.ui.bridge.js?p4067u:88)
    at dialogAftercreate (dialog.position.js?v=8.4.4:59)
    at dispatch (jquery.min.js?v=3.2.1:3)
    at q.handle (jquery.min.js?v=3.2.1:3)
    at Object.trigger (jquery.min.js?v=3.2.1:4)
    at jquery.min.js?v=3.2.1:4

What is method "option"?

@dillix, it sounds like you're loading the framework's JS after the base theme's JS has executed. JavaScript is synchronous by nature, so if your sub-theme loads stuff after the base theme, then you're essentially re-overriding what the base theme already overrode.

You really shouldn't be adding the framework's JS inside your custom webpack bundle anyway. They should be added as was defined in the original starterkits:

http://cgit.drupalcode.org/bootstrap/tree/starterkits/less/THEMENAME.lib...
http://cgit.drupalcode.org/bootstrap/tree/starterkits/sass/THEMENAME.lib...

edit: The starterkits are wrong... sigh.

@dillix, I just opened #2943967: Starterkits don't add framework assets properly to help resolve this.

Also remote was deprecated in 3.3.0 and removed in 4.0.0: https://getbootstrap.com/docs/3.3/javascript/#modals-options
May be we should fix it in this issue?

No @dillix..... please stop mentioning BS4. There is a separate issue for that (which you are well aware of since I have mentioned it to you several times). BS4 work is currently postponed on other issues.

This is about existing code.

I've also created the following change record: https://www.drupal.org/node/2943973

Downloaded the latest Bootstrap 8.x-3.x-dev (released on 12 Feb 2018), tried to apply #53 but got this:

git apply -v 2831237-53.patch
Checking patch bootstrap.info.yml...
error: while searching for:
    css:
      theme:
        css/node.preview.css: false

# The following are dynamic library overrides based on certain critera,
# usually a theme setting.
#
# @see \Drupal\bootstrap\Plugin\Alter\LibraryInfo::alter()
#
#  core/drupal.dialog: bootstrap/drupal.dialog
#  core/drupal.dialog.ajax: bootstrap/drupal.dialog.ajax

error: patch failed: bootstrap.info.yml:70
error: bootstrap.info.yml: patch does not apply
Checking patch bootstrap.libraries.yml...
Hunk #1 succeeded at 58 (offset 10 lines).
Hunk #2 succeeded at 91 (offset 10 lines).
Hunk #3 succeeded at 131 (offset 10 lines).
Checking patch js/attributes.js...
Checking patch js/drupal.bootstrap.js...
Checking patch js/misc/dialog.ajax.js...
Checking patch js/misc/dialog.js...
Checking patch js/modal.jquery.ui.bridge.js...
Checking patch js/modal.js...
Checking patch js/theme-settings.js...
Checking patch js/theme.js...
Checking patch src/Plugin/Alter/LibraryInfo.php...
Checking patch src/Plugin/Setting/JavaScript/Modals/ModalEnabled.php...
Checking patch src/Plugin/Setting/JavaScript/Modals/ModalJqueryUIBridge.php...

If you downloaded the dev release, then you should use patch -p1 2831237-53.patch, not git apply (which would be your sites repo).

Great! The patch applied perfectly, I will test it against my setup and come back to report. Thanks!

Mee too, I'm using #53 in production since last weekend without any reported error.

The patch works fine, the only issue I've found until now is when using Entity Browser (modal) but probably that's out of the scope of this issue.
Thank you for this really needed patch!

What issue?

@markcarver
Until now, the only thing that doesn't work after i applied #53 is the Entity Browser modal (8.x-2.0-alpha2). To be more specific, the modal doesn't automatically close after the items were selected (as you can see in the attached clip). No errors shown in the console.

the only issue I've found until now is when using Entity Browser (modal) but probably that's out of the scope of this issue.

I was thinking that we need to open a new ticket for that.

If this patch could also fix Entity Browser modal's problem would be awesome.

Yeah, that looks like an issue with Entity Browser itself, probably not using the appropriate events/APIs to close the dialog correctly. I'm doubtful this issue would be able to fix it, so yes... that can be a follow-up, but should probably file an issue with Entity Browser first.

Ok. I've given this a little over a whole week and @fearlsgroove hasn't responded. That being said, it seems like there is nothing but positive feedback from those who have reviewed the patch so, this is now committed. Any further issues should be addressed in follow-ups.

I'm trying to us ajax-confirm (https://cgit.drupalcode.org/ajax_confirm/tree/js/ajax-confirm.js). Although I'm no longer getting errors, the dialog that pops up doesn't have any buttons.

New issue please...

After updating attributes.js with the current patch Internet Explorer 11 users have been reporting a Syntax Error in regular expression.

Offending line is: identifier = identifier.replace(/[^\u002D\u0030-\u0039\u0041-\u005A\u005F\u0061-\u007A\u00A1-\uFFFF]/u, '', identifier);

So I found one example where now this fix not work correctly, but in version 3.9 works. I have got page where I use fullcalendar plugin and after update bootstrap to the latest version, detected that modal popup shows in ui-dialogs and after few ours spending on this problem i found the reason. Fullcalendar load own jquery-ui.min.js library from fullcalendar/lib/.
Solution:

• use bootstrap 3.9 or
• generate own jquery-ui build without dialog component and place it in fullcalendar/lib directory

I have this same problem with 8.x-3.13

@bricas
Is this the new issue that is now open. For missing buttons? https://www.drupal.org/project/bootstrap/issues/2956340

@leisurman I believe that is the same issue, yes. I've not looked at solutions as using ajax_confirm was only value-added and not a core requirement. It would be great to get a patch so we could re-enable that feature.

I have a link (see below code). When I click on the link, I want to open a page in a modal dialog. The page is at the href location. Instead of a modal, a new page opens. This div/a tag code was working and is recommended in numerous places (e.g., on StackExchange) for doing modals in D8. Does not work in Drupal 8.6.4 or 8.6.5.

<div class="topics"><a class="use-ajax" data-dialog-type="modal" href="/topics-listing">All Topics</a></div>

This used to work. My theme is a Bootstrap subtheme.

Chrome console error log:

Uncaught TypeError: Cannot read property 'addEventListener' of null
at expandable_search (main.js?v=8.6.5:7)
at main.js?v=8.6.5:50
at main.js?v=8.6.5:51

and

Uncaught TypeError: Cannot read property 'replace' of undefined
at new Drupal.Ajax (ajax.js?v=8.6.5:200)
at Object.Drupal.ajax (ajax.js?v=8.6.5:115)
at HTMLFormElement.<anonymous> (ajax.js?v=8.6.5:148)
at Function.each (jquery.min.js?v=3.2.1:2)
at r.fn.init.each (jquery.min.js?v=3.2.1:2)
at Function.Drupal.ajax.bindAjaxLinks (ajax.js?v=8.6.5:131)
at Object.attach (ajax.js?v=8.6.5:28)
at drupal.js?v=8.6.5:25
at Array.forEach (<anonymous>)
at Object.Drupal.attachBehaviors (drupal.js?v=8.6.5:22)
Drupal.Ajax @ ajax.js?v=8.6.5:200
Drupal.ajax @ ajax.js?v=8.6.5:115
(anonymous) @ ajax.js?v=8.6.5:148
each @ jquery.min.js?v=3.2.1:2
each @ jquery.min.js?v=3.2.1:2
Drupal.ajax.bindAjaxLinks @ ajax.js?v=8.6.5:131
attach @ ajax.js?v=8.6.5:28
(anonymous) @ drupal.js?v=8.6.5:25
Drupal.attachBehaviors @ drupal.js?v=8.6.5:22
(anonymous) @ drupal.init.js?v=8.6.5:16
t @ ready.min.js?v=1.0.8:4
setTimeout (async)
Drupal.throwError @ drupal.js?v=8.6.5:12
(anonymous) @ drupal.js?v=8.6.5:27
Drupal.attachBehaviors @ drupal.js?v=8.6.5:22
(anonymous) @ drupal.init.js?v=8.6.5:16
t @ ready.min.js?v=1.0.8:4

@dkrockville, you've answered your own issue; or rather your console output did.

The JavaScript engine will halt when it encounters a fatal error such as above. That means any scripts loaded after the error are not executed.

Your issue isn't with Bootstrap modals, but rather with the Expandable Search module, see #3024019: Uncaught TypeError: Cannot read property 'addEventListener' of null.

markcarver, thanks for the comment. #79
However, I have removed the expandable search and another module causing an error. Now there are no errors, but the code to open a modal still does not work.
I am using version 8.3.16 of bootstrap, and a subtheme from that. Drupal 8.6.5.

Please don't hijack an existing issue, especially one that has already been committed and closed.

I know for a fact these models work (I have spent countless hours on them).

I also need more than "It doesn't work" to go off of. If you can provide clear steps to reproduce your issue (from scratch), then please feel free to open a new issue.

Sorry. I am off this issue.

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery. (This means jQuery must be included before the plugin files.)

I got the same issue and to fixed it, i just disabled Bootstrap modal in my subtheme settings .