How to load cdn jquery with local fallback in the footer and remove jQuery UI?
Permalink
Hi There,
I'm trying to control how jQuery loads - ideally I'd like to:
- Have jQuery load from Google with a local fallback
- Move the loading of jQuery to the footer
I'd prefer to do this without a plugin and have duplicated header_required.php & footer_required.php to the root /elements directory, then edited like this:
header_required.php
footer_required.php
This seems to work but when logged in, the edit bar doesn't load - if I move the jQuery loading back to header.php then the edit bar works.
Also, jQuery UI seems to load in the header but I can't find this to move or turn off - how would I figure out where that loads from and what would be the best way to control it?
Cheers
Ben
I'm trying to control how jQuery loads - ideally I'd like to:
- Have jQuery load from Google with a local fallback
- Move the loading of jQuery to the footer
I'd prefer to do this without a plugin and have duplicated header_required.php & footer_required.php to the root /elements directory, then edited like this:
header_required.php
$html = Loader::helper('html'); // Only load c5 css and js when logged in if ($u->isRegistered()) { $this->addHeaderItem($html->css('ccm.base.css'), 'CORE'); $this->addHeaderItem($html->javascript('ccm.base.js', false, true), 'CORE'); } // Load jquery moved to footer.php CDN with local fallback
footer_required.php
// Load html helper
$html = Loader::helper('html');
print $this->controller->outputFooterItems();
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<?php $this->addHeaderItem($html->javascript('jquery.js'), 'CORE'); ?>');
}
</script>This seems to work but when logged in, the edit bar doesn't load - if I move the jQuery loading back to header.php then the edit bar works.
Also, jQuery UI seems to load in the header but I can't find this to move or turn off - how would I figure out where that loads from and what would be the best way to control it?
Cheers
Ben
Thanks mate,
So those are changes to the html helper that gets loaded into header_required.php - is that right? And so I would just override in the top-level /helpers directory?
Sorry, my php is basic!
So those are changes to the html helper that gets loaded into header_required.php - is that right? And so I would just override in the top-level /helpers directory?
Sorry, my php is basic!
Yes. I originally had it proposed as a core change. But you could turn the same code into an override for the helper, then set some config/site constants to re-map any script or css.
Sorry to be painful but I'm not sure of the exact steps to get this working.
I have:
- Copied the contents of your file to: /helpers/core/html.php
- Added the following to site.php
I guessed that ASSET_MAP_ALL_FILE_JQUERYJS is a constant which should be added to site.php but am not sure how to add the CDN with local fallback.
I'm not seeing any errors but jQuery isn't loading so assume that I'm not doing this right.
Any pointers would be much appreciated.
Cheers
Ben
I have:
- Copied the contents of your file to: /helpers/core/html.php
- Added the following to site.php
define('ASSET_MAP_ALL_FILE_JQUERYJS', 'ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
I guessed that ASSET_MAP_ALL_FILE_JQUERYJS is a constant which should be added to site.php but am not sure how to add the CDN with local fallback.
I'm not seeing any errors but jQuery isn't loading so assume that I'm not doing this right.
Any pointers would be much appreciated.
Cheers
Ben
Also, is it just me or is it fairly painful to tame the amount of server requests c5 makes?
I'm having difficulty tracking down and controlling the css/js files that c5 and blocks load.
I realise a lot of developers don't care but it would be nice if c5 followed best practice. i.e. load 1 css file in the header and 1 js file in the footer - or at least have the flexibility to control how files combine and where they load more easily.
There doesn't seem to be much discussion and if there is, it looks complex (Miser etc)
I'm having difficulty tracking down and controlling the css/js files that c5 and blocks load.
I realise a lot of developers don't care but it would be nice if c5 followed best practice. i.e. load 1 css file in the header and 1 js file in the footer - or at least have the flexibility to control how files combine and where they load more easily.
There doesn't seem to be much discussion and if there is, it looks complex (Miser etc)
Maybe I have blocks that are loading these files?
- jquery.js
- jquery.ui.js
I only have content blocks, a page_list block and a designer_content block on this page.
Is there a good way to trace dependancies back to their block?
- jquery.js
- jquery.ui.js
I only have content blocks, a page_list block and a designer_content block on this page.
Is there a good way to trace dependancies back to their block?
I can see that in addition to jquery.js I have this loading:
This css file has html in it (when viewed in Firebug) and loads:
I haven't seen this before - is that weird? We're using a custom template (based on Jordan's clean page_list templates) and don't have any js dependancies so assume this is loading from the core?
At this point, my overridden header_required.php file has jQuery loading on the front-end like this:
I'm a bit confused about how this all works sorry.
<link href="/blocks/page_list/view.css?v=16bf1a84501e5d8f74e3e8fd817663f4" type="text/css" rel="stylesheet">
This css file has html in it (when viewed in Firebug) and loads:
<script type="text/javascript" src="/concrete/js/jquery.js?v=16bf1a84501e5d8f74e3e8fd817663f4"></script>
I haven't seen this before - is that weird? We're using a custom template (based on Jordan's clean page_list templates) and don't have any js dependancies so assume this is loading from the core?
At this point, my overridden header_required.php file has jQuery loading on the front-end like this:
// Only load c5 css and js when logged in if ($u->isRegistered()) { $this->addHeaderItem($html->css('ccm.base.css'), 'CORE'); $this->addHeaderItem($html->javascript('ccm.base.js', false, true), 'CORE'); } $this->addHeaderItem($html->javascript('jquery.js'), 'CORE');
I'm a bit confused about how this all works sorry.
It doesn't provide local fallback. Just a means to map a load made via the helper. So as you say, if something tries to load it without using the helper, then the intercept and mapping won't happen. This shouldn't be an issue for jQuery, but may be relevant if a theme directly loads an asset that you have also mapped elsewhere.
I had the code working on one of my c5.6 development sites (in fact, it still is when I test anything on that version of c5).
Its main purpose was as a means of blocking asset collisions within a site. CDN mapping came as a side effect.
UI may be best not to map because C5 uses a non-standard build (at least it used to, not sure if it still does).
For local fallback, you would need some (non jquery) script on the page to load jQuery after the CDN failed to load. Its not a favoured way of doing things because there will necessarily be a delay before the CDN load attempt times out and the local fallback then initiates loading (such decisions can be cached/optimised).
Anyway, the modified helper provides a means to experiment.
For more comprehensive re-mapping, combination and minification, have a look at miser (I have never used it, maybe not so much a hot topic now as it was 18 months ago).
http://miser.sourceforge.net/
There are several threads if you search the c5 forums.
I had the code working on one of my c5.6 development sites (in fact, it still is when I test anything on that version of c5).
Its main purpose was as a means of blocking asset collisions within a site. CDN mapping came as a side effect.
UI may be best not to map because C5 uses a non-standard build (at least it used to, not sure if it still does).
For local fallback, you would need some (non jquery) script on the page to load jQuery after the CDN failed to load. Its not a favoured way of doing things because there will necessarily be a delay before the CDN load attempt times out and the local fallback then initiates loading (such decisions can be cached/optimised).
Anyway, the modified helper provides a means to experiment.
For more comprehensive re-mapping, combination and minification, have a look at miser (I have never used it, maybe not so much a hot topic now as it was 18 months ago).
http://miser.sourceforge.net/
There are several threads if you search the c5 forums.
I don't know what should be happening in that page list css. Its not something I have ever dug into. If there is another loading of jQuery being initiated from within a css file, I would be surprised, shocked and horrified (though I have seen worse).
When initially putting this together I logged calls to the helper and to the mapping.
http://www.concrete5.org/documentation/how-tos/developers/concrete5...
There is also a php backtrace call, that will give levels of stack dump, so can be used in a similar way but with more verbose info.
http://www.concrete5.org/documentation/how-tos/developers/concrete5...
There is also a php backtrace call, that will give levels of stack dump, so can be used in a similar way but with more verbose info.
You may need an http:// at the start of that mapped asset address. I am pretty sure that was how I used it. So I don't know if it would work without.
https://github.com/concrete5/concrete5/pull/771...