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.

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

 
mnakalay replied on at Permalink Reply
mnakalay
this looks correct.

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?
jbag replied on at Permalink Reply
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....
JohntheFish replied on at Permalink Reply
JohntheFish
Could be that an asset group is needed, for js and css.
https://documentation.concrete5.org/developers/appendix/asset-list...
jbag replied on at Permalink Reply
Does that need different syntax for jquery-ui?
$this->requireAsset('javascript', 'jquery/ui');
mnakalay replied on at Permalink Reply
mnakalay
that would be
$this->requireAsset('jquery/ui');
jbag replied on at Permalink Reply
In app.php in can see:

'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?
jbag replied on at Permalink Reply
If I use $this->requireAsset('jquery/ui');

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">
mnakalay replied on at Permalink Reply
mnakalay
JS is loaded in the footer at the bottom along with jQuery and other JS files
jbag replied on at Permalink Reply
Hi

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
mnakalay replied on at Permalink Reply
mnakalay
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
jbag replied on at Permalink Reply
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
jbag replied on at Permalink Reply
Also, just so you know. When i log out as a user there are no core files in the source at all.
mnakalay replied on at Permalink Reply
mnakalay
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.
jbag replied on at Permalink Reply
"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.
mnakalay replied on at Permalink Reply
mnakalay
maybe there's something wrong with your jquery ui code. Do you see any errors in the browser's console?
jbag replied on at Permalink Reply
Hi

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
jbag replied on at Permalink Reply
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?
JohntheFish replied on at Permalink Reply
JohntheFish
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)
JohntheFish replied on at Permalink Reply
JohntheFish
If your theme is bootstrap or foundation based, you could use the respective tabs they provide.
mnakalay replied on at Permalink Reply
mnakalay
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
mnakalay replied on at Permalink Reply
mnakalay
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.
JohntheFish replied on at Permalink Reply
JohntheFish
Can you post that in a review please...
mnakalay replied on at Permalink Reply
mnakalay
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)