jQuery problems in IE and Firefox
Permalink
Hi.
I am a developer, but I am new to C5, and so I have been fidling around for a couple of months with it, read a bunch of tutorials and read a good chunk of forum posts.
After that I have tried to merge an HTML5 website I made earlier into a theme on a pilot C5 installation I have. However I struggle with jQuery.
In my original code I included jQuery myself like this: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I understand that should not be done in C5, you should use the Loader::element('header_required') at the start of your page header.
But the moment I do that some of the JS pop-ups I have no longer work on Firefox and IE, but still in Chrome.
I have added some images showing what I mean. The first one is of the working pop-ups. The left one pops up when you hover over the center symbol, the right menu comes up when you click on the center symbol.
The second image shows the JS error I get in IE, it does not seem to like the JS syntax for some reason.
The third image shows the JS error I get in Firefox.
The fourth image shows the place in my JS code that Firefox indicates it does not like. Very similar to the IE error, again it seems it does not like JS syntax used.
Both on IE and Firefox some of the left pop-ups come up on hovering the center symbol, but not all for some reason. However, none of the right menus appear when I click on the center symbol.
As I said, this used to work fine outside C5. It works in C5 (5.7.5.6) on my laptop on Chrome 48.0.2564.109 m, IE 11 11.0.9600.18205, Firefox 44.0.2 (all running on Windows 8.1 Enterprise) if I include my own jQuery libraries. If I follow the recipe and include the header_required and remove my includes it breaks all but in Chrome.
I host C5 (5.7.5.6) locally on the same laptop with Apache 2.4 and MySQL 5.6
To me this sounds like a jQuery version problem.
I have looked for possible solutions but have found no similar problems out there.
Any suggestions will be appreciated.
Regards,
Frode
I am a developer, but I am new to C5, and so I have been fidling around for a couple of months with it, read a bunch of tutorials and read a good chunk of forum posts.
After that I have tried to merge an HTML5 website I made earlier into a theme on a pilot C5 installation I have. However I struggle with jQuery.
In my original code I included jQuery myself like this: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I understand that should not be done in C5, you should use the Loader::element('header_required') at the start of your page header.
But the moment I do that some of the JS pop-ups I have no longer work on Firefox and IE, but still in Chrome.
I have added some images showing what I mean. The first one is of the working pop-ups. The left one pops up when you hover over the center symbol, the right menu comes up when you click on the center symbol.
The second image shows the JS error I get in IE, it does not seem to like the JS syntax for some reason.
The third image shows the JS error I get in Firefox.
The fourth image shows the place in my JS code that Firefox indicates it does not like. Very similar to the IE error, again it seems it does not like JS syntax used.
Both on IE and Firefox some of the left pop-ups come up on hovering the center symbol, but not all for some reason. However, none of the right menus appear when I click on the center symbol.
As I said, this used to work fine outside C5. It works in C5 (5.7.5.6) on my laptop on Chrome 48.0.2564.109 m, IE 11 11.0.9600.18205, Firefox 44.0.2 (all running on Windows 8.1 Enterprise) if I include my own jQuery libraries. If I follow the recipe and include the header_required and remove my includes it breaks all but in Chrome.
I host C5 (5.7.5.6) locally on the same laptop with Apache 2.4 and MySQL 5.6
To me this sounds like a jQuery version problem.
I have looked for possible solutions but have found no similar problems out there.
Any suggestions will be appreciated.
Regards,
Frode
Thank you so much for your swift answer.
I remember reading something about registerAsset(), it was very early in my exploration of C5.
I will try to use that function.
I was previously adding jQuery early on in the head section of my page template. But as I said I removed it when I started using header_required.
After some research I have now found out why it is now only working in Chrome and not in IE and Firefox. It is very simple, and I found out by analyzing the HTML output in all three browsers. There simply is no mention of jQuery in the head seaction i IE and Firefox, but there are in Chrome and the reason I think is I am logged-in in C5 in Chrome and so jQuery is included because of the editor requirements. In the 2 other browsers I was merely a guest and so since I did not have my own include of jQuery no jQuery was included...
I guess this will all change when I start to include it again, but this time through the registerAsset/requireAsset/providesAsset methods.
Thanks for your input, I will let you know how it goes.
Regards,
Frode
I remember reading something about registerAsset(), it was very early in my exploration of C5.
I will try to use that function.
I was previously adding jQuery early on in the head section of my page template. But as I said I removed it when I started using header_required.
After some research I have now found out why it is now only working in Chrome and not in IE and Firefox. It is very simple, and I found out by analyzing the HTML output in all three browsers. There simply is no mention of jQuery in the head seaction i IE and Firefox, but there are in Chrome and the reason I think is I am logged-in in C5 in Chrome and so jQuery is included because of the editor requirements. In the 2 other browsers I was merely a guest and so since I did not have my own include of jQuery no jQuery was included...
I guess this will all change when I start to include it again, but this time through the registerAsset/requireAsset/providesAsset methods.
Thanks for your input, I will let you know how it goes.
Regards,
Frode
Thanks for your suggestion MrKDilkington!
I used the requireAsset function to use C5's jQuery and it works great!
Regards,
Frode
I used the requireAsset function to use C5's jQuery and it works great!
Regards,
Frode
Where are you including jQuery in your theme?
Many blocks require jQuery, so as a general rule, it should be included in your page head. When supplying a copy of jQuery with your theme, you need to tell concrete5. This is done by registering the asset in your page_theme.php registerAssets() method.
Example:
- tell concrete5 that you are including your own copy of jQuery with your theme
$this->providesAsset('javascript', 'jquery');
- tell concrete5 that you want it to load its own copy of jQuery
$this->requireAsset('javascript', 'jquery');