Bootstrap accordion not working when published

Bootstrap accordion not working when published

by Paul Thrippleton -
Number of replies: 10

Hi, I am using the Bootswatch theme version 2014120803 with Moodle 2.8 and am trying to implement a Bootstrap accordion.  I have included the relevant Bootstrap javascript files and put the code for an accordion in a html block.

When the code for the accordion is in the editor it works as expected, however after saving the block and viewing the accordion on the course page it no longer works (doesn't react to any mouse clicks) and I can't see any errors in Chrome's inspector.

I also tried the accordion code in a custom area on the front page and it works both in the editor mode and published version.


As there isn't any errors been thrown I am at a bit of a loss as why this isn't working, so was wondering if anyone could point me in the right direction to get this sorted?

Average of ratings: -
In reply to Paul Thrippleton

Re: Bootstrap accordion not working when published

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I have not tried this out so at a loss, but just to make sure that if this works in the Front page, did you add some code to the layout file for the frontpage layout file but not in the course layout?

Average of ratings: -
In reply to Mary Evans

Re: Bootstrap accordion not working when published

by Paul Thrippleton -

Unfortunately not, I have gone through frontpage.php and default.php line by line making sure that I haven't missed anything out.


The weird thing to me though is that the code works in the code editor but not when published.  I have even compared the code rendered to the code I put in the editor and the only difference I can see is that Moodle will add YUI ids' to divs without an id.

Average of ratings: -
In reply to Paul Thrippleton

Re: Bootstrap accordion not working when published

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi John,

I use the Accordion JS in my Shoehorn theme and that works.  Have you added the JS using the information published here: https://docs.moodle.org/dev/jQuery?

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Bootstrap accordion not working when published

by Paul Thrippleton -

I believe so - it's working for a carousel I have on the front page.


In my plugins.php file I have:

$plugins = array(
        'bootstrap' => array('files' => array('bootstrap_min.js')),
	'scorm-focus' => array('files' => array('scorm-focus.js')),
	'smooth-scroll' => array('files' => array('smooth-scroll.js'))
);

Then in my default.php and frontpage.php I have:

$PAGE->requires->jquery();
$PAGE->requires->jquery_plugin('bootstrap', 'theme_bootswatch');

All the js files appear to be loaded in Chrome's dev tools.


-------

Ok, so I am an idiot...

In my default.php after I included the bootstrap plugin I then had the following:

if ($_SERVER['PHP_SELF'] == "/mod/scorm/player.php") $PAGE->requires->jquery_plugin('scorm-focus', 'theme_bootswatch');
if ($_SERVER['PHP_SELF'] != "/mod/scorm/player.php") $PAGE->requires->jquery_plugin('smooth-scroll', 'theme_bootswatch');

I guess that calling multiple $PAGE->requires was overwriting the bootstrap call?


Thank you both for your help on this though smile

Average of ratings: -
In reply to Paul Thrippleton

Re: Bootstrap accordion not working when published

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Paul,

Oh no, the $PAGE call would only add and the logic looks fine.

Are there any errors on the console?  Are all files loaded on the network tab?

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Bootstrap accordion not working when published

by Paul Thrippleton -

Nope, no errors in the console and all js files loaded.


However I changed the code in default.php to:

$PAGE->requires->jquery();
if ($_SERVER['PHP_SELF'] != "/mod/scorm/player.php") 
{
	$PAGE->requires->jquery_plugin('bootstrap', 'theme_bootswatch', 'smooth-scroll', 'theme_bootswatch');
}else
{
	$PAGE->requires->jquery_plugin('scorm-focus', 'theme_bootswatch');
}

And now it is working.

Average of ratings: -
In reply to Paul Thrippleton

Re: Bootstrap accordion not working when published

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Humm, odd and for M2.8 it should have been: https://docs.moodle.org/dev/jQuery_pre2.9

Plus: 

$PAGE->requires->jquery_plugin('bootstrap', 'theme_bootswatch', 'smooth-scroll', 'theme_bootswatch');

Looks odd with too many parameters, so I suspect that:

'smooth-scroll', 'theme_bootswatch'

is causing the conflict when used as before.

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Bootstrap accordion not working when published

by Paul Thrippleton -

Ok after further testing it isn't fully working; you were right Gareth.

The code I am using now is:

$PAGE->requires->jquery();
if ($_SERVER['PHP_SELF'] != "/mod/scorm/player.php") 
{
	$PAGE->requires->jquery_plugin('bootstrap', 'theme_bootswatch');
	$PAGE->requires->jquery_plugin('smooth-scroll', 'theme_bootswatch');
}else
{
	$PAGE->requires->jquery_plugin('scorm-focus', 'theme_bootswatch');
}

That works fine.  

There seems to be a problem with my smooth-scroll js plugin that is causing a conflict as I commented out all the code and added a simple console.log command into it and then on page refresh the accordion was working and there was a console.log message.

Odd that the conflict didn't report any errors in the console.

Average of ratings: -
In reply to Paul Thrippleton

Re: Bootstrap accordion not working when published

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

That sounds overly complicated...but if it works who cares!

cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Bootstrap accordion not working when published

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

If something works and you don't know why then you'll not know for next time smile

Average of ratings: -