Can't make form datepicker work on front end - 5.7 asset woe, what am I doing wrong!
Permalink
Subject says it all really..
Trying 5.7 for the first time proper for what I thought would be a simple project, but hitting complications left, right and centre!
The form date picker is not working for non-logged in users and I'm getting js error. The obvious answer seems jquery isn't loading - However the Inspector shows that both jquery and jquery UI are present - I'm sure I saw somewhere that the 5.7 intelligently loads core assets if they are needed, and as the form block is a core block I guess this is what's happening here.
Much searching points to problems with the new asset system - I'm not currently using a page_theme file and I've dabbled with trying this for the first time - but cannot make it work/fully understand the docs on how I'm supposed to use this. All very unclear.
Sure I'm making a basic error, more than likely with the theme I'm converting, rather than C5 but all the new stuff making it harder to trouble shoot!... C5 used to be the simple solution for us designers for the simpler projects that didn't always need the full dev treatment - but all seems so complex now. :-/ pulling my hair out!
Trying 5.7 for the first time proper for what I thought would be a simple project, but hitting complications left, right and centre!
The form date picker is not working for non-logged in users and I'm getting js error
Uncaught ReferenceError: $ is not defined
Much searching points to problems with the new asset system - I'm not currently using a page_theme file and I've dabbled with trying this for the first time - but cannot make it work/fully understand the docs on how I'm supposed to use this. All very unclear.
Sure I'm making a basic error, more than likely with the theme I'm converting, rather than C5 but all the new stuff making it harder to trouble shoot!... C5 used to be the simple solution for us designers for the simpler projects that didn't always need the full dev treatment - but all seems so complex now. :-/ pulling my hair out!
Hi MrK - not at my desktop at the moment to check, but likely the latest stable version, only downloaded a few days ago.
From other threads I've seen, I'm fairly sure this is simply a case of the date picker requiring a script that's not being included on the logged out front end version of my site as all works fine when I'm logged in - but as a designer I'm really struggling to get my head round the asset management docs. So many questions are left unanswered for me:
- no example template for the page_theme.php or clue to setting this up from scratch, just docs referring to extending your page theme class without fully explaining it
- do we have to reinstall theme every time to make changes to this file take affect?
- do we still need to include the css/js tags in the template files if they are are in the page them file?
- why would a core 5.7 feature require additional assets just to function as designed. Not user friendly to a non technical user?
From other threads I've seen, I'm fairly sure this is simply a case of the date picker requiring a script that's not being included on the logged out front end version of my site as all works fine when I'm logged in - but as a designer I'm really struggling to get my head round the asset management docs. So many questions are left unanswered for me:
- no example template for the page_theme.php or clue to setting this up from scratch, just docs referring to extending your page theme class without fully explaining it
- do we have to reinstall theme every time to make changes to this file take affect?
- do we still need to include the css/js tags in the template files if they are are in the page them file?
- why would a core 5.7 feature require additional assets just to function as designed. Not user friendly to a non technical user?
"- no example template for the page_theme.php or clue to setting this up from scratch, just docs referring to extending your page theme class without fully explaining it"
The default Elemental theme includes a page_theme.php that can be used as an example.
https://github.com/concrete5/concrete5/blob/release/5.7.4.3/web/conc...
"- do we have to reinstall theme every time to make changes to this file take affect?"
No, themes do not need to be reinstalled to reflect changes made to a page_theme.php.
"- do we still need to include the css/js tags in the template files if they are are in the page them file?"
If you are "requiring" a CSS or JS asset, then they do not need to be included in your template file. If you are "providing" an asset, then it does need to be included.
Example: jQuery
- By requiring the asset, I am telling concrete5 to load jQuery for me.
- I am telling concrete5 that I am providing my own copy of jQuery.
Here is a list of assets that can be required by concrete5:
https://www.concrete5.org/documentation/developers/5.7/appendix/asse...
"- why would a core 5.7 feature require additional assets just to function as designed. Not user friendly to a non technical user?"
I was able to use the Form block datepicker without issue (with and without a page_theme.php). Both jQuery and jQuery UI were loaded and the datepicker worked as expected.
This leads me to believe that there is probably something else involved in your problem.
The default Elemental theme includes a page_theme.php that can be used as an example.
https://github.com/concrete5/concrete5/blob/release/5.7.4.3/web/conc...
"- do we have to reinstall theme every time to make changes to this file take affect?"
No, themes do not need to be reinstalled to reflect changes made to a page_theme.php.
"- do we still need to include the css/js tags in the template files if they are are in the page them file?"
If you are "requiring" a CSS or JS asset, then they do not need to be included in your template file. If you are "providing" an asset, then it does need to be included.
Example: jQuery
$this->requireAsset('javascript', 'jquery');
- By requiring the asset, I am telling concrete5 to load jQuery for me.
$this->providesAsset('javascript', 'jquery');
- I am telling concrete5 that I am providing my own copy of jQuery.
Here is a list of assets that can be required by concrete5:
https://www.concrete5.org/documentation/developers/5.7/appendix/asse...
"- why would a core 5.7 feature require additional assets just to function as designed. Not user friendly to a non technical user?"
I was able to use the Form block datepicker without issue (with and without a page_theme.php). Both jQuery and jQuery UI were loaded and the datepicker worked as expected.
This leads me to believe that there is probably something else involved in your problem.
Thanks for your thorough answer, patience and assistance - determined to get this cracked as I can see the benefits if it is working!
So just as a test I've commented out the jquery script call from my theme files and can confirm it breaks my site without it present (when not logged in - admin mode works as as C5 includes its own jquery).
Then I've created my page_theme.php file with the following in it, based on the Elemental file as suggested (but changed namespace to application instead of Concrete:
I've disabled my theme, uninstalled it, re-installed it with the page theme file included.
But jquery still isn't loaded on the front end :-/
Am I being stupid?! :P
So just as a test I've commented out the jquery script call from my theme files and can confirm it breaks my site without it present (when not logged in - admin mode works as as C5 includes its own jquery).
Then I've created my page_theme.php file with the following in it, based on the Elemental file as suggested (but changed namespace to application instead of Concrete:
<? namespace application\Theme\LHEC5Theme; class PageTheme extends \Concrete\Core\Page\Theme\Theme { public function registerAssets() { $this->requireAsset('javascript', 'jquery'); } }
I've disabled my theme, uninstalled it, re-installed it with the page theme file included.
But jquery still isn't loaded on the front end :-/
Am I being stupid?! :P
As a troubleshooting technique:
- activate the default Elemental theme
- add a Form block (with a question that requires the datepicker) to a page
- see if the datepicker works
- see if jQuery UI is loaded
- activate the default Elemental theme
- add a Form block (with a question that requires the datepicker) to a page
- see if the datepicker works
- see if jQuery UI is loaded
ok I've done this - and works fine in Elemental.
So as suspected it is the theme - but still no closer to working out what/why.
I've tried removing all other scripts from the site to check for a conflict. And if I remove the theme's version of jquery the page_theme file (as above) is failing to kick in with C5's own as I understood it should be.
Plus - the form works fine if I'm logged into the site - which why I feel it must be something to do with the asset management rather than a code/script error with the theme.
Puzzled.
So as suspected it is the theme - but still no closer to working out what/why.
I've tried removing all other scripts from the site to check for a conflict. And if I remove the theme's version of jquery the page_theme file (as above) is failing to kick in with C5's own as I understood it should be.
Plus - the form works fine if I'm logged into the site - which why I feel it must be something to do with the asset management rather than a code/script error with the theme.
Puzzled.
Ok, I'm making progress now. Performed a simple test.
As I suspected from the word go - jquery isn't loading if I'm not logged in. Which takes me back to the asset loading issue.
If I'm not much mistaken the page_theme code I posted earlier ^ should load in the core jQuery as I've 'required' it for the theme... but it's just not working.
Anyone got an idea why?
if (window.jQuery) { document.write('JQUERY LOADED'); } else { // jQuery is not loaded document.write('JQUERY NOT LOADED'); }
As I suspected from the word go - jquery isn't loading if I'm not logged in. Which takes me back to the asset loading issue.
If I'm not much mistaken the page_theme code I posted earlier ^ should load in the core jQuery as I've 'required' it for the theme... but it's just not working.
Anyone got an idea why?
At a complete loss - have created a new page template with absolutely nothing in it other than plain html5 page code, the header/footer loaders and one editable area into which I've put my form.
No JS whatsoever.
Form works perfectly when logged in. Log out and the error returns. Surely C5 rather than the theme, nothing left in the template to conflict?
No JS whatsoever.
Form works perfectly when logged in. Log out and the error returns. Surely C5 rather than the theme, nothing left in the template to conflict?
When you log in as an admin, c5 will load jquery for you. so that´s why it works when you are logged in, and not if not logged in.
What theme are you using,
What version is the theme ?
can you post the content of page-theme.php /registerAssets ?
Are there any more functions doing some related work there ?
Can you search your theme map (especially headers, footers elements, etc.) to check if assets are loaded there ? maybe some inc statement or addHeaderItem ?
*edit*
What theme are you using,
What version is the theme ?
can you post the content of page-theme.php /registerAssets ?
Are there any more functions doing some related work there ?
Can you search your theme map (especially headers, footers elements, etc.) to check if assets are loaded there ? maybe some inc statement or addHeaderItem ?
*edit*
try Application instead of application
for the namespace...
for the namespace...
Ok - the weirdest thing has happened!... I've managed to fix it. Seems all our above assumptions about jQuery issues were correct, but some issue with the initial theme installation seems to have stopped the page_theme file working.
I duplicated my theme folder, and renamed it to something different, and made sure my Page_Theme file was included from the start of the new theme.
When I installed the new (identical) theme, hey presto, the page theme file now worked and I was able to successfully resolve the conflicting assets using the mini-tutorial from Mr K above and the C5 docs all suddenly made sense now it works correctly!
Very odd - seems that once a theme is installed without a page_theme file it may be irreversible? I had previously tried complete uninstall/reinstall with and without the file but only changing the named forced it to refresh and take the file into account.
Phew! Thanks for all the help all!
I duplicated my theme folder, and renamed it to something different, and made sure my Page_Theme file was included from the start of the new theme.
When I installed the new (identical) theme, hey presto, the page theme file now worked and I was able to successfully resolve the conflicting assets using the mini-tutorial from Mr K above and the C5 docs all suddenly made sense now it works correctly!
Very odd - seems that once a theme is installed without a page_theme file it may be irreversible? I had previously tried complete uninstall/reinstall with and without the file but only changing the named forced it to refresh and take the file into account.
Phew! Thanks for all the help all!
What version of 5.7 are you using?
I was unable to reproduce your problem.