jQuery-ui require assest not working for me
Permalink
Hey
I am trying to require jquery-ui in a custom theme I am building.
However, when i add a page_theme.php file in my theme with the following code and remove the script tag i was using in development the behaviour I was expecting doesn't work.
I am not sure what I am missing. Any help appreciated.
I am trying to require jquery-ui in a custom theme I am building.
However, when i add a page_theme.php file in my theme with the following code and remove the script tag i was using in development the behaviour I was expecting doesn't work.
<?php namespace Application\Theme\Ekcg; use Concrete\Core\Area\Layout\Preset\Provider\ThemeProviderInterface; class PageTheme extends \Concrete\Core\Page\Theme\Theme { public function registerAssets() { $this->requireAsset('javascript', 'jquery/ui'); } }
I am not sure what I am missing. Any help appreciated.
Hi
its the code that isn't working. When I am logged in it shows certain scripts in the source such as font-awssome and jQuery but when i am not logged in it shows none of these just a custom js file I had written.
I either case the jquery-ui doesn't load and the code doesn't work....
its the code that isn't working. When I am logged in it shows certain scripts in the source such as font-awssome and jQuery but when i am not logged in it shows none of these just a custom js file I had written.
I either case the jquery-ui doesn't load and the code doesn't work....
Could be that an asset group is needed, for js and css.
https://documentation.concrete5.org/developers/appendix/asset-list...
https://documentation.concrete5.org/developers/appendix/asset-list...
Does that need different syntax for jquery-ui?
$this->requireAsset('javascript', 'jquery/ui');
that would be
$this->requireAsset('jquery/ui');
In app.php in can see:
for just assests and:
for the asset group. Is it different in each case for requireAssets?
'jquery/ui' => [ ['javascript', 'js/jquery-ui.js', ['minify' => false, 'combine' => false]], ['javascript-localized', '/ccm/assets/localization/jquery/ui/js'], ['css', 'css/jquery-ui.css', ['minify' => false]], ],
for just assests and:
'jquery/ui' => [ [ ['javascript', 'jquery/ui'], ['javascript-localized', 'jquery/ui'], ['css', 'jquery/ui'], ], ],
for the asset group. Is it different in each case for requireAssets?
If I use $this->requireAsset('jquery/ui');
I still dont see jquery-ui in the head
I still dont see jquery-ui in the head
<link href="/concrete/css/app.css" rel="stylesheet" type="text/css" media="all"> <link href="/concrete/css/account.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="/concrete/js/jquery.js"></script> <link href="/concrete/css/font-awesome.css" rel="stylesheet" type="text/css" media="all"> <link href="/concrete/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all">
JS is loaded in the footer at the bottom along with jQuery and other JS files
Hi
Thanks for this.
In the footer i have:
but there are hese files in the head:
It doesn't look like things are loading twice but it does work. the error in the console only shows the jquery-ui not working. I added both $this->requireAsset('jquery/ui'); and $this->requireAsset('javascript'); the page_theme.php
Thanks for this.
In the footer i have:
<script type="text/javascript" src="/concrete/js/account.js"></script> <script type="text/javascript" src="/concrete/js/bootstrap/dropdown.js"></script> <script type="text/javascript" src="/concrete/js/asset-loader.js"></script> <script type="text/javascript" src="/concrete/js/events.js"></script> <script type="text/javascript" src="/concrete/js/underscore.js"></script> <script type="text/javascript" src="/concrete/js/backbone.js"></script> <script type="text/javascript" src="/concrete/js/bootstrap/tooltip.js"></script> <script type="text/javascript" src="/concrete/js/bootstrap/popover.js"></script> <script type="text/javascript" src="/concrete/js/jquery-ui.js"></script> <script type="text/javascript" src="/index.php/ccm/assets/localization/jquery/ui/js"></script> <script type="text/javascript" src="/index.php/ccm/assets/localization/core/js"></script> <script type="text/javascript" src="/concrete/js/app.js"></script>
but there are hese files in the head:
<link href="/concrete/css/app.css" rel="stylesheet" type="text/css" media="all"> <link href="/concrete/css/account.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="/concrete/js/jquery.js"></script> <link href="/concrete/css/font-awesome.css" rel="stylesheet" type="text/css" media="all"> <link href="/concrete/css/jquery-ui.css" rel="stylesheet" type="text/css" media="all"> <meta charset="utf-8" /> <title>EKC Group</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet"> <link href="/application/themes/ekcg/styles/layout.css" rel="stylesheet" type="text/css" /> <link href="/application/themes/ekcg/styles/base.css" rel="stylesheet" type="text/css" /> <link href="/application/themes/ekcg/styles/modules.css" rel="stylesheet" type="text/css" /> <link href="/application/themes/ekcg/styles/normalize.css" rel="stylesheet" type="text/css" /> <script src="/application/themes/ekcg/scripts/modules.js" ></script>
It doesn't look like things are loading twice but it does work. the error in the console only shows the jquery-ui not working. I added both $this->requireAsset('jquery/ui'); and $this->requireAsset('javascript'); the page_theme.php
Yes I made a mistake, jQuery is loaded in the head to make sure it is available to all other scripts that require it.
Other than that, as far as core stuff is concerned, CSS is loaded in the head and JS in the footer.
What you're showing looks correct
Other than that, as far as core stuff is concerned, CSS is loaded in the head and JS in the footer.
What you're showing looks correct
Ok, but I have to require the core stuff in page_theme.php?
The thing is, if I remove my page_theme.php completely nothing changes so I am not sure it's ding anything.
in the sources tab on dev tools the jquery and jquery-ui files are in the "concrete" theme folder and a folder called "index.php/ccm/assets/localization" which I assume arethe different theme folders. Alas it still throws an error
The thing is, if I remove my page_theme.php completely nothing changes so I am not sure it's ding anything.
in the sources tab on dev tools the jquery and jquery-ui files are in the "concrete" theme folder and a folder called "index.php/ccm/assets/localization" which I assume arethe different theme folders. Alas it still throws an error
Also, just so you know. When i log out as a user there are no core files in the source at all.
the core stuff is only needed for Concrete5 editing operations so it's only loaded when you are logged in with administrator rights or any permissions that allow you to edit some aspects of the site.
And because C5 needs it, it also loads jquery UI. So if you remove it from your page theme file but are still logged in then it will still be loaded directly by C5 for its own needs.
When you are not logged in C5 should only load stuff that is required by your theme or any of the packages and blocks you are using.
And because C5 needs it, it also loads jquery UI. So if you remove it from your page theme file but are still logged in then it will still be loaded directly by C5 for its own needs.
When you are not logged in C5 should only load stuff that is required by your theme or any of the packages and blocks you are using.
"When you are not logged in C5 should only load stuff that is required by your theme or any of the packages and blocks you are using."
So there must be something wrong requireAsset() call because it doesn't seem to do anything. I put it directly in my theme folder yeah?
"And because C5 needs it, it also loads jquery UI. So if you remove it from your page theme file but are still logged in then it will still be loaded directly by C5 for its own needs."
Also, when I logged in the jquery-ui file doesn't actually execute my jquery-ui custom code.
So there must be something wrong requireAsset() call because it doesn't seem to do anything. I put it directly in my theme folder yeah?
"And because C5 needs it, it also loads jquery UI. So if you remove it from your page theme file but are still logged in then it will still be loaded directly by C5 for its own needs."
Also, when I logged in the jquery-ui file doesn't actually execute my jquery-ui custom code.
maybe there's something wrong with your jquery ui code. Do you see any errors in the browser's console?
Hi
When I am logged in and the JS scripts is loading I get the following:
For my code:
But as I say when I am not logged in there are no js scripts at all. The error just says
Thanks
When I am logged in and the JS scripts is loading I get the following:
modules.js:90 Uncaught TypeError: $(...).tabs is not a function
For my code:
$(document).ready(function() { $('#tabContainer').tabs({ beforeActivate : function(evt) { location.hash=$(evt.currentTarget).attr('href'); }, show: 'fadeIn', hide: 'fadeOut' }); var hash = location.hash; if (hash) { $('#tabContainer').tabs("load", hash) } }); // end ready
But as I say when I am not logged in there are no js scripts at all. The error just says
Uncaught ReferenceError: $ is not defined
Thanks
Tbh I think I am not understanding this correctly.
So you require assets in page_theme.php when you want to use the jquery-ui that C5 supplies. You can then remove any scripts you have stored in you custom theme and use the core ones instead. Conversely, i would use providesAsset if I was including my own files in my custom theme.
That's what I am getting from the assets doc but I must be misunderstanding
is this correct?
So you require assets in page_theme.php when you want to use the jquery-ui that C5 supplies. You can then remove any scripts you have stored in you custom theme and use the core ones instead. Conversely, i would use providesAsset if I was including my own files in my custom theme.
That's what I am getting from the assets doc but I must be misunderstanding
is this correct?
Looks like you also need to require jQuery as an asset. When logged in, you get it as a side effect of the core loading. When logged out, its up to blocks and themes to load it if they use it.
For .tabs
The core jQuery.ui is built for what the core uses and includes some c5 specific adaptations. Unfortunately that makes it troublesome to use on front end code because the ui theme and functionality are tied to what the core needs/provides. Overriding it with your own ui build can be problematic because that can easily mess with what the core requires.
If you only need .ui for front end tabs, consider another tabs mechanism.
Shameless plug: Magic Tabshttps://www.concrete5.org/marketplace/addons/magic-tabs1/... (orhttps://www.concrete5.org/marketplace/addons/magic-tabs... for 5.6)
For .tabs
The core jQuery.ui is built for what the core uses and includes some c5 specific adaptations. Unfortunately that makes it troublesome to use on front end code because the ui theme and functionality are tied to what the core needs/provides. Overriding it with your own ui build can be problematic because that can easily mess with what the core requires.
If you only need .ui for front end tabs, consider another tabs mechanism.
Shameless plug: Magic Tabshttps://www.concrete5.org/marketplace/addons/magic-tabs1/... (orhttps://www.concrete5.org/marketplace/addons/magic-tabs... for 5.6)
If your theme is bootstrap or foundation based, you could use the respective tabs they provide.
John is absolutely right, Concrete5 jquery UI doesn't include tabs. Here's a list of what it includes:
core.js, widget.js, mouse.js, position.js, draggable.js, droppable.js, resizable.js, sortable.js, button.js, datepicker.js, dialog.js, menu.js, slider.js, spinner.js, effect.js, effect-blind.js, effect-fade.js, effect-highlight.js, effect-slide.js
And he is also right to say you should consider another tab solution.
I tried in the past to use m own version of jquery UI and I ended up in a world of pain so like John said, better use a different one. And if really you only need it for tabs, loading the whole core jquery ui is a bit overkill anyway
core.js, widget.js, mouse.js, position.js, draggable.js, droppable.js, resizable.js, sortable.js, button.js, datepicker.js, dialog.js, menu.js, slider.js, spinner.js, effect.js, effect-blind.js, effect-fade.js, effect-highlight.js, effect-slide.js
And he is also right to say you should consider another tab solution.
I tried in the past to use m own version of jquery UI and I ended up in a world of pain so like John said, better use a different one. And if really you only need it for tabs, loading the whole core jquery ui is a bit overkill anyway
and I just saw the "shameless plug" about magic tabs. I used it in a project recently and I was supposed to convert some messy theme code base from legacy to v8. I thought I'd have to go through hoops and loops to make the tabs work but they worked right away with minimal effort so I can say this is an incredibly trustworthy shameless plug.
Can you post that in a review please...
unfortunately no, my client bought it I didn't so I don't have access to post a review.
If you send me a license, however, I'll be more than happy to leave a review (hint hint wink wink)
If you send me a license, however, I'll be more than happy to leave a review (hint hint wink wink)
Are you saying the jquery-ui scrip is not loading or just that your code relying on it is not working? Did you check if jquery-ui is actually loading?