I want to add some custom JavaScript to the Boost Theme. I'm running on 3.2.3.
What I've tried (note this process worked for other themes):
Any ideas on where I'm suppose to put my custom javascript?
Hi,
Perhaps if you explained what it is you are adding to this theme that requires JS to make it work...we may be able to help you.
Thanks
Mary
Hello,
Are you saying it's not possible to add a custom javascript file with the theme?
Thanks,
Jeremy
Hi,
You have already shown how to do this in your original question, I assumed that is what you had done, so your quesion came as a bit of a shock, that is why I asked you to explain what you were trrying to achive.
You started off saying that the JS code worked in other themes. So why do you think Boost is any different? Have you tried it yet? There is no reason as far as I know to suggest it wont work. If the code worked in other themes then it should work in Boost.
My only concern is that it is not good practice to add to CORE themes, but better to make a child theme based on Boost, such as the Photo theme.
Hope this answers your question?
Thanks
Mary
That method doesn't work anymore for the Boost architecture it seems.
It may well help if you read this section of the Moodle Doc on the subject of JavaScript in a Mustache Template
https://docs.moodle.org/dev/Templates#What_if_a_template_contains_javascript.3F
Hi Mary,
I wanted to create my login and signup form as a popup window
like once the user clicks on login or signup button, A popup window will come.
Please help me to find this solution as much as you can
Thanks & Regards
Himanshu Sharma
Adding js is a bit different on boost based themes. I was able to get js tooltips working by adding this to the bottom the mustache templates:
https://github.com/dbnschools/moodle-theme_fordson/blob/master/templates/columns2.mustache#L130
I'm not even sure this is 100% correctly done. We stumbled across how to do it. The old way of adding js doesn't apply to the best of my knowledge.
This page near the bottom shows how to use JavaScript in a page.
Yea that's a bummer that we can't just slap in a custom js file. Looks like I'll have to learn how to override templates and then add JS using mustache. That's going to take awhile to learn! lol
Don't under estimate it...you will probably find it quite easy once you get into the swing of things.
At least we have jQuery now...a year or so ago we didn't hence the JS directory.
I am not a JS coder, but I have managed to add a script or two into Moodle before today. LOL
Sorry I wasn't much help as I was not aware that the old style of doing things had changed.
Ah well you live and learn!
Cheers
Mary
Hi Mary,
I'm hoping that maybe you can help me here. I searched through forums for jquery ui usage and this is the first post I could find.
I did this in my discuss.js file
require(['jquery', 'jqueryui'], function ($, jqui) {
// JQuery is available via $
// JQuery UI is available via $.ui
$.ui("#draggable").draggable();
});
and then in discuss.php file I included this file using $PAGE->requires->js('/mod/discussions/js/discuss.js');
I then have a div in discuss.php with an id of draggable. But when i test for the draggable capability which comes with jquery ui, nothing happens. And I have cleared my caches quite thoroughly.
Please point me in the right direction here on how I can get my plugin to start using jquery UI.
Regards, Ray
Hi Raymond,
I am no expert, but wondered if you should have used
$.ui instead of jqui
In the function part on the first line?
function($, $.ui)
A wild guess...to tell you the truth this is all beyond me at the moment.
Besides, I am off to London tomorrow to see my two new grand-children...twin girls.
JQuery will have to wait until I get back next week.
Kind regards,
Mary
require(['jquery', 'jqueryui'], function ($, jqui) {
// JQuery is available via $
// JQuery UI is available via $.ui
$.ui("#draggable").draggable();
});Is wrong as the comment does not match the parameters to the function. Thus jQueryUI is available via 'jqui' and not '$.ui'.But given https://jqueryui.com/draggable/ then it looks like jQueryUI is added to '$', so try just '$("#draggable").draggable();'.
Then looking at: https://docs.moodle.org/dev/jQuery#What_about_JQuery_UI_.3F - looks odd.
Thanks for the responses. At least this confirms that I'm not as daft as I thought I was!! I have tried both
require(['jquery', 'jqueryui'], function ($, jqui) {
// JQuery is available via $
// JQuery UI is available via $.ui
$.jqui("#draggable").draggable();
});andrequire(['jquery', 'jqueryui'], function ($) {
// JQuery is available via $
// JQuery UI is available via $.ui
$("#draggable").draggable();
});and still, I'm not getting any jquery ui functionality in the browser.
Hi Jeremy
With regard to the mustache templates, while I still can't say I like them and find them just another layer, I would say they are not that difficult to get your head around, and once you can get to grips with the basics, overriding existing templates to add a line like the java script call is really quite straightforward - for simple things like that, it's easier than overriding a renderer.
When you get to writing your own and having to write functions to serve template contexts etc it starts to get more complex, but I'm getting there now with the theme I'm currently building.
Richard
@Richard
Cool you give me hope that it's as easy as finding the right template and editing the template to include the JS call.
Jeremy,
Today I had to figure this out and I can tell you how I did it.
First, put custom javascript file in theme/javascript folder.
https://github.com/dbnschools/moodle-theme_fordson/tree/master/javascript
Then call it in the theme layout file. In this case I also had to use jquery as seen below.
https://github.com/dbnschools/moodle-theme_fordson/blob/master/layout/frontpage.php#L71-L72
Then it just seemed to work. This was just to make a "back to top" scroll button appear. I did not use the mustache template and i don't know how I would have done it differently.
This worked for me and maybe it will help you. The 3.3 version of Academi also calls some custom javascript so check out how they do it too.
Hi Chris
I have recently installed your presets for the flashcards using the database. Have you a new javascript fix for it? I only get the flip card botton but not the three others. I haven't be able to figure out a solution myself yet ...
And thanks for the inspiration to use the database ...
Kaspar
