Installing to a theme which uses bootstrap breaks the modal dialog function

ct

ctweed 16 Feb, 2020

See: https://www.group-technical.com/forums

Mostly the forums work, but the search and upload functions are broken by some kind of collision raising modal dialogs. When I change the theme on that site to protostar, which does not use bootstrap, the ChronoForums modal dialogs work great.

How can I remove or change the dialog function so it works with the existing bootstrap code please?

he

healyhatman 16 Feb, 2020

Are there any errors in your javascript console?

ct

ctweed 17 Feb, 2020

Yes, but I can't make sense of them.
They only appear when the them I made which uses bootstrap is used.
Am I correct in thinking ChronoForums doesn't use bootstrap at all?

Here's the log:

bootstrap.js:1207 Uncaught TypeError: data[option] is not a function
    at HTMLDivElement.<anonymous> (bootstrap.js:1207)
    at Function.each (jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2)
    at a.fn.init.each (jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2)
    at a.fn.init.Plugin [as modal] (bootstrap.js:1201)
    at Object.$.G2.actions2.fns (g2.actions2.js:70)
    at Object.<anonymous> (g2.actions2.js:305)
    at Function.each (jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2)
    at Object.$.G2.actions2.run (g2.actions2.js:304)
    at Object.success (g2.actions2.js:276)
    at u (jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2)
(anonymous) @ bootstrap.js:1207
each @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
each @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
Plugin @ bootstrap.js:1201
$.G2.actions2.fns @ g2.actions2.js:70
(anonymous) @ g2.actions2.js:305
each @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
$.G2.actions2.run @ g2.actions2.js:304
success @ g2.actions2.js:276
u @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
fireWith @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
C @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
n @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
XMLHttpRequest.send (async)
send @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
ajax @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
$.G2.actions2.fns @ g2.actions2.js:197
(anonymous) @ g2.actions2.js:305
each @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
$.G2.actions2.run @ g2.actions2.js:304
(anonymous) @ g2.actions2.js:320
dispatch @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2
v.handle @ jquery.min.js?abd87c2fb15e4acf925a65046a20a926:2

he

healyhatman 17 Feb, 2020

Ouch nasty. Some templates let you attach different versions of bootstrap, or have it in no conflict mode, is that a possibility with your template at all?

ct

ctweed 18 Feb, 2020

Hi & thanks for your help. Nope, because its my own template :-) Bootstrap is needed for is the menu module, which I didn't write and actually does have an option to override bootstrap CSS, but nothing else. I think the clue to this is to recognise it only goes wrong when there is a dialog from ChronoForums, such as uploading a file, doing a search etc, and that's because it wants to dim the background and make the dialog the focus. I am not very strong on JS, but can see in those circumstances the page source is modified such that the page's <body> tag becomes

<body class="modal-open">

for my template with chronoforums, yet when I use the protostar template for example, which doesn't show the error, the line becomes

<body class="site com_chronoforums2 view-board no-layout no-task itemid-218 dimmable dimmed">

You can see this at the test site I mentioned earlier. I'm ironing out all these issues before I go live on the actual site.
If anyone has tips on what I can look for now I'd be very grateful.

he

healyhatman 18 Feb, 2020

Sorry but if you've made the template then you're going to have to stop it from conflicting. Not sure this is one I can help with sorry, you could ask the dev using the contact link above

ct

ctweed 19 Feb, 2020

I made some progress. I did a clean Joomla install, and installed only chronoforums and the bootstrap menu which is here btw https://github.com/joomdigi/mod_bootstrapnav. I know its old but it does exactly what I want. Anyway, with that setup there is no problem. So either it's another module or the way I've customised that one, which is quite extensively. Thanks - I'm not there yet, but I'm sure you're familiar with how this detective work goes!

Hey whilst I'm here I just love Chronoforums and the way it looks & acts. It's perfect for what I plan to use it for.

ct

ctweed 28 Feb, 2020

Answer

I solved this and it was down to my own customizations. Specifically, clashes between the bootstrap version supplied with joomla being version 2, and the one with another module requiring 3. It seems I'd somehow gotten away with some conflicts for some time, but not when I added Chronoforums. It just needed each conflict tracking down and new js/css files being added after all the others had loaded which dealt with each one.