Bootstrap accordion not working when published

Bootstrap accordion not working when published

di Paul Thrippleton -
Numero di risposte: 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?

Media dei voti:  -
In riposta a Paul Thrippleton

Re: Bootstrap accordion not working when published

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine 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?

Media dei voti:  -
In riposta a Mary Evans

Re: Bootstrap accordion not working when published

di 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.

Media dei voti:  -
In riposta a Paul Thrippleton

Re: Bootstrap accordion not working when published

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine 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

Media dei voti:  -
In riposta a Gareth J Barnard

Re: Bootstrap accordion not working when published

di 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 sorridente

Media dei voti:  -
In riposta a Paul Thrippleton

Re: Bootstrap accordion not working when published

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine 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

Media dei voti:  -
In riposta a Gareth J Barnard

Re: Bootstrap accordion not working when published

di 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.

Media dei voti:  -
In riposta a Paul Thrippleton

Re: Bootstrap accordion not working when published

di Gareth J Barnard -
Immagine Core developers Immagine Particularly helpful Moodlers Immagine 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

Media dei voti:  -
In riposta a Gareth J Barnard

Re: Bootstrap accordion not working when published

di 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.

Media dei voti:  -
In riposta a Paul Thrippleton

Re: Bootstrap accordion not working when published

di Mary Evans -
Immagine Core developers Immagine Documentation writers Immagine Peer reviewers Immagine Plugin developers Immagine Testers

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

cheers

Mary

Media dei voti:  -