[SOLVED] Adding jQuery Slider to Moodle 2.9 Front Page

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Chris Chapman -
Number of replies: 27

works for me too but just cant get it to cycle on load, cycles as soon as you click next. I've had a good google and tried a few things, namely including 

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 3000
    });

    $('.carousel').carousel('cycle');
});
</script>
in various locations , none seem to work I've tried Footers and Headers of layout files, adding as Additional HTML, the label itself: but it either does nothing or gives me the Uncaught ReferenceError: $ is not defined error

I gather the error is due to the script loading before jquery. I wondered whether I can change the behaviour another way or even change the default in bootstrap.js ? since im only going to be using one instance in the whole of moodle.

Average of ratings: -
In reply to Chris Chapman

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Christine Legemble -

Hi,

I have the same problem as you (use of clean theme in Moodle 2.9 and add of a bootstrap carousel in a label).

My carousel works when i click the next or previous buttons, but it doesn't automatically cycle on load.

Have you found a solution ?

Many thanks,

Christine

Average of ratings: -
In reply to Christine Legemble

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers
Try adding this instead?
<!-- COPY AND PASTE THIS CODE TO YOUR SITE TOPIC OR COURSE TOPIC -->
<div id="frontpage-slider" class="carousel slide" data-ride="carousel" data-interval="3000"><!-- class of slide for animation -->
  <div class="carousel-inner">
    <div class="item active"><!-- class of active since it's the first item -->
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>First caption text here</p>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>Second caption text here</p>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>Third caption text here</p>
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/960x200" alt="" />
      <div class="carousel-caption">
        <p>Fourth caption text here</p>
      </div>
    </div>
  </div><!-- /.carousel-inner -->
  <!--  Next and Previous controls below
        href values must reference the id for this carousel -->
    <a class="carousel-control left" href="#frontpage-slider" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#frontpage-slider" data-slide="next">&rsaquo;</a>
</div>
<!-- / END -->
Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Christine Legemble -

Thanks for your answer.

I added "data-ride" attribute as chown, but no change.

Average of ratings: -
In reply to Christine Legemble

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

You also need to add this highlighted section just before the end of the layout file:

<script>
  $(document).ready(function(){
    $('.carousel').carousel();
  });
</script>

</body>
</html>

More information about this setting can be found here:

http://getbootstrap.com/2.3.2/javascript.html#carousel

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Christine Legemble -

I did it, but this seems to change nothing.

Like Chris, in the javascript console, i have the error : Uncaught ReferenceError: $ is not defined error.

However, i added this script just before the end of body tag.

...
...
<script type="text/javascript">
  $(document).ready(function(){
    $('.carousel').carousel();
  });
</script>

</div>
</body>
</html>

Average of ratings: -
In reply to Christine Legemble

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

in that case try adding it inside the footer. Then Purge all cache before testing it.

If you still get the error then it may be that jQuery is not working. You are using Moodle 2,9 so should be automatically jQuery enabled!

Average of ratings: -
In reply to Christine Legemble

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Hi Christine,

I have just sent you a message with another method of adding these changes.

By the way what theme are you using?

Cheers

Mary

Average of ratings: -
In reply to Christine Legemble

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Hi Christine,

I am sorry to say that no matter what you add nothing seems to be working.

I have been looking at this for nearly 2 hours now and cannot get it to work.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Christine Legemble -

 (Thanks again for your help).

I use Moodle 2.9.2 and the Clean Theme.

I added the code with the line "$THEME->javascripts_footer('interval');" (in the config.php).

I show that the code is well loaded with : /theme/javascript.php?theme=clean&rev=-1&type=footer

But, the carousel doesn't slide automatically.

Christine

Average of ratings: -
In reply to Christine Legemble

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

The problem as I see it is that because the 'Slider' is added as HTML via the Text Editor and to all intents and purposes it IS picking up jQuery from Moodle. Se we can concur the jQuery is working. What it is missing is $(document).ready(function().

This makes me think that there is something missing in Moodle/lib/jquery so that the HTML via the Editor can pick up that necessary function to make the slider work.

I know it works if you hard code the slider into the theme.

So the alternative would be to clone Clean theme and then add the slider to the layout file.

Another alternative which I was thinking about this morning when I woke up, was to add the $(document).ready(function(){ for the carousel via a HTML block.

That may work but I have not tested it.

As an aside, I don't know if $THEME-> javascripts_footer = array(); is working properly or at all, because none of the JS added to the theme was showing up in the source code for the page when viewing it via FireBug.

This is what leads me to think something in Moodle core is broken. And if I am right...then all the older themes that added JS to the config wont work! sad

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

This must be a change between Bootstrap2 and Bootstrap 3 then. The carousel/slider I use in Flexibase is just the standard BS3 carousel (adapted for settings etc) with no changes to the basic functions or the javascript and that runs immediately (well a couple of seconds delay) with no clicks on anything.


Average of ratings: -
In reply to Richard Oelmann

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

I don't think there is a change in the initialisation code for the carousel between 2 and 3.  Perhaps some JS is missing or markup is wrong.  I just know it can be tricky to get it right.  Look at how Shoehorn (BS 3) and Essential (BS3) do the same thing.

Average of ratings: -
In reply to Gareth J Barnard

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Yes, its BS3 that works (like Essential and Flexibase - my example) its BS2 that appears to be causing the issues Gareth and not starting up immediately

Average of ratings: -
In reply to Richard Oelmann

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Essential is a BS 2.3.2 theme which works, which is why I suggested to look at it.  But then again, I've separated the carousel module from the rest of bootstrap and perform an initialisation via AMD: https://github.com/gjb2048/moodle-theme_essential/blob/master/amd/src/carousel.js#L211 and https://github.com/gjb2048/moodle-theme_essential/blob/master/layout/includes/slideshow.php#L32 when the slide is actually needed.

From experience the slider is difficult to get working.  And I think it may stop sliding if the mouse is within it.

Average of ratings: -
In reply to Gareth J Barnard

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

I've got it working.

I'm using the Zine Green theme which you can see working on my Moodle 2.6 site HERE.

This has bootstrap.min.js and interval.js in the javascript directory and added via the config.php using $THEME->javascripts_footer = arrary('bootstrap.min', 'interval'); where bootstrap.min.js is Bootstrap v3.0.3.

However in my Moodle 2.9 test server I added the un-minified bootstrap.js v2.1.1 as well as the interval.js and found that it works as expected.

So it's NOT the versions of bootstrap.js, it is probably the the fact that although jQuery is available via Moodle, you still need the $(document).ready(function()) which is in interval.js to be associate with the bootstrap.js direct.

So as I see it, there is a connection missing, perhaps because Moodle is using YUI Javascript is some places, and jQuery in others and so some things are working but others not. So in these cases the theme has to carry a backpack of spares!

So Christine, if you are reading this, get a copy of the bootstrap.js v2.3.2 from HERE  and add it to the javascript directory you made and then add 'bootstrap' to the config.php like so:

$THEME->javascripts_footer = array('bootstrap', 'interval');

Then a final Purge all cache and that should get it working.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

I don't think it is a YUI conflict.  With M2.9, AMD is being used and therefore inline scripts that are added using the old method will be problematic.  So as '$' is undefined then I guess it is out of scope: https://docs.moodle.org/dev/jQuery#With_a_require_call.  So a better way would be to put in a JS file like this: https://github.com/gjb2048/moodle-theme_essential/blob/master/javascript/essential.js using the same method as shown on https://docs.moodle.org/dev/jQuery#With_a_require_call and then set that in the config.php file like so: https://github.com/gjb2048/moodle-theme_essential/blob/master/config.php#L61....

i.e.

require(['core/first'], function() {
    require(['jquery', 'theme_bootstrapbase/bootstrap', 'core/log'], function($, bootstrap, log) {
        log.debug('Theme JavaScript initialised');
        $(document).ready(function(){
            $('.carousel').carousel();
        });
    });
});

Cheers,

Gareth

P.S. Educated best guess - bootstrap might not be needed as could be already imported by parent.

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Thanks for that Gareth, but what I am really saying is, why should a theme need to have all that extra backpack of spares? As far as I am concerned all these nice things like the carousel slider and tabs and all the other 'extras' that are shipped with bootstrap, should all work out of the box, but they don't, even when you add the correct markup.

Tabs did not work as they should, although they will in Moodle 3.0 as this has (I think) been fixed now.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Very good point Mary and I agree with you.  Hence my themes have some of the components split out of the main BS JS file and are only loaded when needed.  Tabs in previous versions was down to the broken YUI port because the jQuery version was outlawed.  I've always found JS difficult to work with and get working, especially hard to debug, so I don't think its particularly a BS thing but rather needing to use the 'force' to get things right and know what's not working.

Average of ratings: -
In reply to Gareth J Barnard

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Hi,

Just saying THANKS for the fix for the slider.

That requires js stuff did the trick!

I only just twigged that Bootstrapbase uses something similar!

https://github.com/lazydaisy/moodle/blob/master/theme/bootstrapbase/javascript/moodlebootstrap.js

doh!

Thanks...I can sleep now! LOL

cheers!

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Stefano Valmorri -

Hi Mary,

what exactly the solution was?

I am facing the same issue with the Clean theme.

Thanks

Average of ratings: -
In reply to Stefano Valmorri

[FIX INSTRUCTIONS HERE] Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Hi,

If using Clean theme you would be better to make a clone copy and customise that instead.

Theactual fix is this...

require(['core/first'], function() {
    require(['jquery', 'theme_bootstrapbase/bootstrap', 'core/log'], function($, bootstrap, log) {
        log.debug('Theme JavaScript initialised');
        $(document).ready(function(){
            $('.carousel').carousel();
        });
    });
});

Save it as a .js file using the name of your theme. But first you need to create a javascript directory in your theme's folder...

For Example...

moodle/theme/yourthemename/javascript/yourthemename.js

Next you need to add this PHP code to your theme's config.php

$THEME->javascripts_footer = array('yourthemename');

and save that file?

And tha is all you need to do.

However, before testing you need to Purge all cache otherwise the code won't work.

Hope this helps?

Mary

Credit for fix to Gareth J. Barnard for original suggestion HERE

Average of ratings: Useful (4)
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Stefano Valmorri -

sweeettttt!

works very well ... thanks!

Average of ratings: -
In reply to Stefano Valmorri

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

You are most welcome...glad it worked!

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

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

Just to say I have added SOLVED to this discussion and also added a FIX INSTRUCTIONS HERE label to the post where I added the information on how to go about adding the extra PHP etc.

Thanks

Mary

Average of ratings: -
In reply to Mary Evans

Re: Adding jQuery Slider to Moodle 2.9 Front Page

by Christine Legemble -

Hi,

Sorry for lack of response for several days, but I had some trouble on my side.

Thanks very much to everyone for your help.

Thanks to Mary J Evans and Gareth Barnard for the given solution that works perfectly for me.

Average of ratings: -