Using bootstrop glyphicon with C5
Permalink
The following three lines of code...
... result in the following errors:
The three lines referenced by the above three errors are:
What is causing this and how is it prevented?
<span class="glyphicon glyphicon-calendar"></span> <span class="glyphicon glyphicon-calendar"></span> <span class="glyphicon glyphicon-plus"></span>
... result in the following errors:
chart:1235 GET http://tapmeister.com/concrete/fonts/glyphicons-halflings-regular.woff2 net::ERR_ABORTED 404 (Not Found) chart:1265 GET http://tapmeister.com/concrete/fonts/glyphicons-halflings-regular.woff net::ERR_ABORTED 404 (Not Found) chart:1 GET http://tapmeister.com/concrete/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)
The three lines referenced by the above three errors are:
chart:1235 => <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> chart:1265 => <script type="text/javascript" src="/index.php/ccm/assets/localization/core/js"></script> chart:1 => <!DOCTYPE html>
What is causing this and how is it prevented?
Thanks John,
I've been having issues getting jQueryUI to work properly using the shipped versions of jQuery and jQueryUI and was getting "Cannot read property 'dialog' of undefined" errors. It comes with jQuery v1.12.4 and jQuery UI v1.11.4. Have you had any issues? Because of this and also concerns that these older versions might not work nicely with other 3rd party libraries, I used requireAsset() to modify my install to use jQuery v3.4.1 and jQuery UI v1.12.1. I could now use dialogs, but for some reason they are not chainable (i.e. $('#bla').dialog(); doesn't return $('#bla') ) and also the CSS is a little messed up and they don't have a border. Your comment that C5 needing a custom build of jQueryUI also concerns me. Recommend going back to the old version? If so, what needs to be changed to get dialogs working?
Good catch. You are right, /concrete/fonts does not exist. What's funny is I just cut and pasted from the page source and don't think I accidentally deleted "css", but it also seems unlikely that C5 would randomly change this. Also, now Chrome inspector lists these three lines as being the culprit.
I've been having issues getting jQueryUI to work properly using the shipped versions of jQuery and jQueryUI and was getting "Cannot read property 'dialog' of undefined" errors. It comes with jQuery v1.12.4 and jQuery UI v1.11.4. Have you had any issues? Because of this and also concerns that these older versions might not work nicely with other 3rd party libraries, I used requireAsset() to modify my install to use jQuery v3.4.1 and jQuery UI v1.12.1. I could now use dialogs, but for some reason they are not chainable (i.e. $('#bla').dialog(); doesn't return $('#bla') ) and also the CSS is a little messed up and they don't have a border. Your comment that C5 needing a custom build of jQueryUI also concerns me. Recommend going back to the old version? If so, what needs to be changed to get dialogs working?
Good catch. You are right, /concrete/fonts does not exist. What's funny is I just cut and pasted from the page source and don't think I accidentally deleted "css", but it also seems unlikely that C5 would randomly change this. Also, now Chrome inspector lists these three lines as being the culprit.
<script type="text/javascript">$(function() { ConcreteToolbar.start(); });</script> <script type="text/javascript" src="/concrete/js/jquery-ui-touch-punch.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba"></script> <script type="text/javascript" src="/concrete/js/backbone.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba"></script>
AFAIK, the UI adaptations are to do with keeping it compatible with dialog modals. The core started way back with an ajax dialog modal that did a lot more than the standard UI dialog. The UI dialog is now wrapped by the core, so sequence of assets is important or you get undefined errors.
Using later versions of jQuery or UI risks compatibility issues with the core or anything that uses the core assets.
Other UI themes can be loaded in addition as long as they are the right UI version and scoped within the page (so they don't get picked up by the core), which you can do with theme roller.
Or, if you have a bootstrap theme, use a popover.
Using later versions of jQuery or UI risks compatibility issues with the core or anything that uses the core assets.
Other UI themes can be loaded in addition as long as they are the right UI version and scoped within the page (so they don't get picked up by the core), which you can do with theme roller.
Or, if you have a bootstrap theme, use a popover.
Ah, just created a new c5 site using the default jquery/jqueryui and added module using $('#dialog').dialog('open');, and got an error (I think it was PNotify related but didn't pay attention), and then found that I need to use the ConcreteAlert wrapper. The notifications look nice, but the dialog and confirm definitely need help. Also, I often use dialogs for forms. I didn't see onhttps://documentation.concrete5.org/tutorials/how-to-create-alert-no... whether this is possible. I personally would rather ditch the ConcreteAlert wrapper and use newer versions of jquery/jqueryui (which do allow standard dialog creation), but need to be aware of what other issues might arise. Any thoughts? Thanks
I have used regular UI dialogs without c5 alert in v8. Have a look for core uses, and back through the 5.6 docs/howtos if there is not enough info in v8 docs. It hasn't changed much.
You may also be able to pick up some guidance by looking inside the c5 alert/confirm code.
You may also be able to pick up some guidance by looking inside the c5 alert/confirm code.
You are right (for the most part). If the dialog is opened on click unlike the following, it works. The style, however, seems to have been stripped away. If like the following, one gets the following error. Also, it is not chainable. Not deal breakers, but deviations from how the standard jQueryUI dialog works. Thanks
var dialog = $("#dialog").dialog("open"); //dialog is undefined jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2 Uncaught Error: cannot call methods on jqdialog prior to initialization; attempted to call method 'open' at Function.error (jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2) at HTMLDivElement.<anonymous> (jquery-ui.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:6) at Function.each (jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2) at n.fn.init.each (jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2) at n.fn.init.e.fn.<computed> [as jqdialog] (jquery-ui.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:6) at n.fn.init.$.fn.dialog (app.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:3) at HTMLDocument.<anonymous> (dialog:93) at i (jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2) at Object.fireWith [as resolveWith] (jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2) at Function.ready (jquery.js?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba:2)
Still had an error, but found that it was because the shipped jqueryui doesn't come with autocomplete. Added it separate and no problem.
But, I am still getting the original bootstrop glyphicon errors. Only happens if the page uses bootstraop datepicker and attempts to request content from /concrete/fonts/ which as you pointed out doesn't exist. Chrome inspector doesn't seem to really identify the correct files and is kind of random.
But, I am still getting the original bootstrop glyphicon errors. Only happens if the page uses bootstraop datepicker and attempts to request content from /concrete/fonts/ which as you pointed out doesn't exist. Chrome inspector doesn't seem to really identify the correct files and is kind of random.
per JohnTheFish
Again, you are right. But I don't think it is me, but a bug in C5. To demonstrate, I just created a brand new C5 site, and added a single page "test" and "dashboard/test" where both including the only following line: <span class="glyphicon glyphicon-trash"></span>
And again got the following errors:
Why am I getting these errors?
Well, both front and dashboard pages includes <link rel="stylesheet" type="text/css" href="/concrete/themes/elemental/css/bootstrap-modified.css"> and the front pages also includes <link href="/concrete/css/app.css?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba" rel="stylesheet" type="text/css" media="all">. And both these files include the following line:
So, when /concrete/css/app.css is accessed, the css file looks in /concrete/css/../fonts/* which resolves to /concrete/fonts/* which doesn't exist.
Am I the only one experiencing this?
EDIT - As an interim hack, I copied /concrete/css/fonts to /concrete/fonts, and then also copied all the files inhttps://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/boot... into that directory. Surely, this is not what I should be doing...
/concrete/fonts does not exist, its /concrete/css/fonts
Again, you are right. But I don't think it is me, but a bug in C5. To demonstrate, I just created a brand new C5 site, and added a single page "test" and "dashboard/test" where both including the only following line: <span class="glyphicon glyphicon-trash"></span>
And again got the following errors:
chart:1235 GET http://tapmeister.com/concrete/fonts/glyphicons-halflings-regular.woff2 net::ERR_ABORTED 404 (Not Found) chart:1265 GET http://tapmeister.com/concrete/fonts/glyphicons-halflings-regular.woff net::ERR_ABORTED 404 (Not Found) chart:1 GET http://tapmeister.com/concrete/fonts/glyphicons-halflings-regular.ttf 404 (Not Found)
Why am I getting these errors?
Well, both front and dashboard pages includes <link rel="stylesheet" type="text/css" href="/concrete/themes/elemental/css/bootstrap-modified.css"> and the front pages also includes <link href="/concrete/css/app.css?ccm_nocache=ca17add95b11d1baf3d74fcd3fa4637fb02c14ba" rel="stylesheet" type="text/css" media="all">. And both these files include the following line:
@font-face { font-family:"Glyphicons Halflings";src:url("../fonts/glyphicons-halflings-regular.eot");src:url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),url("../fonts/glyphicons-halflings-regular.woff") format("woff"),url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"),url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
So, when /concrete/css/app.css is accessed, the css file looks in /concrete/css/../fonts/* which resolves to /concrete/fonts/* which doesn't exist.
Am I the only one experiencing this?
EDIT - As an interim hack, I copied /concrete/css/fonts to /concrete/fonts, and then also copied all the files inhttps://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/boot... into that directory. Surely, this is not what I should be doing...
If you have found a bug with latest core, please boil it down to the basics of the bug and report it as an issue on github.
I wouldn't be surprised, the core and most developers use font-awesome, so any code relating to glyphicons won't have been well exercised.
I wouldn't be surprised, the core and most developers use font-awesome, so any code relating to glyphicons won't have been well exercised.
Done. https://github.com/concrete5/concrete5/issues/8079...
Off topic. Unless I have a reason to use glyphicons-halflings, I probably should use fontawesome just because it is more common, used, and tested, true?
Off topic. Unless I have a reason to use glyphicons-halflings, I probably should use fontawesome just because it is more common, used, and tested, true?
True. Also Font Awesome involves a lower page weight because its loaded anyway by many blocks and the dashboard.
Thanks John, After all that and now I change to font-awesome :)
- c5 uses a custom build of jQueryUI (its a historical thing to do with dialog modals), so pulling it in from elsewhere can often break things.
- /concrete/fonts does not exist, its /concrete/css/fonts