Problem/Motivation

Drupal 11 ships with jQuery 4.

The module allows using Bootstrap 3, but that doesn't support jQuery 4.

Because of this, when enabling the default modal (thank_you_for_installing_modal_page) with the default settings (Bootstrap 3) on a D11 site, an infinite reload loop occurs. The reason is a reload in the module's js that will be looped because Bootstrap never initializes.

Steps to reproduce

On a D11 site (tested on 11.2.2, but all core versions should reproduce this that use jQuery 4) install the module.
Go to /admin/structure/modal and edit thank_you_for_installing_modal_page modal.
Save the modal (so it becomes enabled), the next page will reload infinitely.

Proposed resolution

Not sure about the resolution, seems like Bootstrap 3 is not supported in D11 because of the jQuery version.
The page reload after the ajax call should be also revised IMO (not sure what's the purpose of that).

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#13 3536267-13.patch3.28 KBrenatog
#3 3536267.patch6.64 KBrenatog

Comments

keszthelyi created an issue. See original summary.

renatog’s picture

renatog commented
Priority: Normal » Major

Nice catch! Thanks a lot for reporting that

Increasing the priority

renatog’s picture

renatog commented
StatusFileSize
new 3536267.patch6.64 KB

  • fc6bd3e5 committed on 6.0.x 
    [#3536267] feat: JQuery 4 not compatible with Bootstrap 3 causing...
renatog’s picture

renatog commented
Status: Active » Fixed

Moved the fix to the dev branch

Keeping only BS5 on D11 (Modal 6)

It was very important! Thank you so much @keszthelyi

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

  • 4b5e36d7 committed on 6.0.x 
    Revert "[#3536267] feat: JQuery 4 not compatible with Bootstrap 3...
renatog’s picture

renatog commented
Status: Fixed » Needs work

Reverted because Removing BS3 from Modal 6 isn't a good solution

Could exists sites with Modal 6 running on Drupal 10 which allows BS3

We can create a solution to verify:

  • If site is running on D11
  • and is marked to Load BS automatically with Modal
  • So load only BS5
  • Mark BS3 as "disabled" since is running D11
renatog’s picture

renatog commented
Parent issue: » #3553252: Plan for the next Modal Releases
renatog’s picture

renatog commented

The page reload after the ajax call should be also revised IMO

Agreed

I've thinking about that as well

not sure what's the purpose of that

The idea was:

  • User load a page that has a Modal
  • the function "Modal" isn't recognized
  • Verify is marked to load BS automatically with project Modal
  • If yes, controller PHP of Modal enables that
  • But the current page won't display the Modal yet (because needs to be rendered with BS library)
  • For this reason the "Reload" automatically
  • With that the end users don't need to refresh manually

P.S. It was the initial idea, but I'm open to review that

keszthelyi’s picture

keszthelyi commented

Hi @renatog

Just my two cents: I think removing Bootstrap 3 support on version 6 was the best idea. Bootstrap 3 is not supported by even Bootstrap, it reached end of life, sites should update their bootstrap version and they will need to do it anyway to follow core.

Version 6 of modal_page is a new major version and is still in beta, so it is the perfect time to remove support as it can introduce non-BC changes according to semantic versioning rules.

keszthelyi’s picture

keszthelyi commented

Yes, in the meantime I also figured out what is the purpose of that page reload since I wrote that in the IS.

I think it would be worth considering other solution instead of that though. Not sure if modal_page's js should guess what should happen and what js to load (because as I understand that's the purpose of that reload: if bootstrap is not available let's reload the page with the cdn). Maybe a better direction would be to let the site builders decide how they configure the module and explicitly set what library to load (is it the cdn vs library is already loaded by the theme).

One idea that comes to mind if it would be configurable to load or not the cdn according to active theme, like a conditional. Our use case for example: I'd like to load the cdn version only if the active theme is claro let's say (so we're on admin pages and bootstrap is not available), but otherwise the site's theme is based on bootstrap, so we don't need the cdn. So there could be configuration for load cdn: 1. always 2. if active theme is ... 3. if active theme is not ... or something similar. Then it would be all decided by configuration and there would be no need to check in js, call ajax and do page reloads: it would be the responsibilty of the user who configures the module to select the option they need.

renatog’s picture

renatog commented
StatusFileSize
new 3536267-13.patch3.28 KB

Agreed to #11

Based on that, created a separated issue #3556808: Remove BS3 from Modal 6 to handle the BS3 Removal (will be necessary more effort since has references on JS, Twig, PHP, etc)

For now, posting a quick-fix

Honestly isn't the best solution ever, however it works, until the the BS3 removal is completed

  • cc1e459a committed on 6.0.x 
    [#3536267] feat: JQuery 4 not compatible with Bootstrap 3 causing...
renatog’s picture

renatog commented
Status: Needs work » Fixed

Moved the fix to the dev branch

The BS3 removal we can handle on #3556808: Remove BS3 from Modal 6

Released at: https://www.drupal.org/project/modal_page/releases/6.0.0-beta6

Thanks a lot @keszthelyi

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

renatog’s picture

renatog commented

Maybe a better direction would be to let the site builders decide how they configure

Yeah, it really can be better 🤔

renatog’s picture

renatog commented

Another point:

I'm thinking about drop support to D11 on Modal 5.1.x

5.1.x with support for D11 makes hard to maintain

My initial draft is something like that:

  • 6.0.x: D11
  • 5.1.x: D10
  • 5.0.x: deprecated

So remove support for 5.0.x (it'll helps to have more time to maintain)
5.1.x supports D10 and receive bugfixes. Without new features and without support for D11. If someone needs to use Modal on D11 can upgrade to 6.0.x
6.0.x with support to Drupal 11 and new features

Edit: the problem is that 5.1.x is already marked as supported on D11 so it’s considerable the “stable version” currently

So many variables to think

Anyway if the support for D11 still on D11 I’ll need to move this fix and JS cookie there as well

keszthelyi’s picture

keszthelyi commented

Re #18

Removing support for D11 in 5.1 is problematic indeed, as it's the stable version and already supports D11. So this could cause issues for projects using that version and already on D11. I would avoid that or at least not until 6 has a stable version. Hopefully, there won't be too many issues with 5.1 in the future to keep D11 support there.

renatog’s picture

renatog commented

Yeah, agreed

I’m with that in mind,

6.x supported, beta release, new features, supports D11, BS5 and Dialog API
5.1.x supported, stable release, supports D11, BS3 and BS4
5.0.x deprecated, sunset at Jan, 2026

Thanks a lot @keszthelyi

  • 91a99972 committed on 5.1.x 
    [#3536267] feat: JQuery 4 not compatible with Bootstrap 3 causing...
renatog’s picture

renatog commented

As talked above, we're keeping support for D11 on Modal 5.1, so I moved this fix to that version as released a new version

https://www.drupal.org/project/modal_page/releases/5.1.4

Thanks @keszthelyi and @@fran-seva

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.