ArtcoInc Posted August 27, 2019 Share Posted August 27, 2019 Phoenix 1.0.1.x While trying to troubleshoot a problem, I noticed that several of my menu modules were throwing these errors: Quote ReferenceError: $ is not defined The code in question is the first line here: Quote $(document).ready(function(){ $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); }); A quick Google search said that these scripts were trying to load before the jQuery library was loaded. I looked, and jQuery was being loaded at the end of the page. When I moved the call to load the jQuery library into the <head> area, these errors went away. So, my question is: Should loading the jQuery library be in the <head>, or at the end of the <body>? M Link to comment Share on other sites More sharing options...
burt Posted August 27, 2019 Share Posted August 27, 2019 jQuery is a blocking script (means it blocks the rest of the page loading until it itself is fully loaded), hence it is better placed as late in the HTML as possible (in other words as close to the end of the body as possible). Make the jQuery code of your menu a siteWide Hook and inject the Hook in `SiteEnd`. See the (deprecated) filterList hook for an example. Link to comment Share on other sites More sharing options...
BrockleyJohn Posted August 27, 2019 Share Posted August 27, 2019 ...and this hook comes before footer_scripts so you can safely put scripts in there that depend on jquery. Incidentally they won't need to be document ready scripts in that position as the main document html has already loaded. Just the inner code should work fine and each one will save a (tiny) bit of parsing and processing, ie $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released. Looking for a payment or shipping module? Maybe I've already done it. Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 27, 2019 Author Share Posted August 27, 2019 @burt While I did read that the script was supposed to wait until the library was loaded, I still saw these errors. Hence, the question. @BrockleyJohn These scripts are part of the Horizontal Menu modules by @Tsimi and @GLWalker . One is in the Header, and I have adapted one to work in the NavBar for the XS view. So yes, it is putting the same script in two places on the page. I'm sure that these could be rewritten to put just one script at the end of the <body>, but that may be beyond my abilities. Thank you both. M Link to comment Share on other sites More sharing options...
♥raiwa Posted August 28, 2019 Share Posted August 28, 2019 Malcolm @ArtcoInc, You can inject the scripts into the footer scripts block with the header content module like follows. cm_header_catmenu_xs.php: function execute() { global $oscTemplate; ob_start(); include('includes/modules/content/' . $this->group . '/templates/tpl_' . basename(__FILE__)); $data = ob_get_clean(); $oscTemplate->addContent($data, $this->group); $catmenu_script_sources =' <script src="ext/menu_xs/js/modernizr.custom.js"></script> <script src="ext/menu_xs/js/jquery.dlmenu.js"></script>'; $oscTemplate->addBlock($catmenu_script_sources, 'footer_scripts'); if(MODULE_CONTENT_HEADER_CATMENU_XS_TRANSITION == 'Default') { $catmenu_script = ' <script> $(function() { $( \'#dl-menu\' ).dlmenu(); }); </script>'; } elseif(MODULE_CONTENT_HEADER_CATMENU_XS_TRANSITION == 'Trans1') { $catmenu_script = ' <script> $(function() { $( \'#dl-menu\' ).dlmenu({ animationClasses : { classin : \'dl-animate-in-2\', classout : \'dl-animate-out-2\' } }); }); </script>'; } elseif(MODULE_CONTENT_HEADER_CATMENU_XS_TRANSITION == 'Trans2') { $catmenu_script = ' <script> $(function() { $( \'#dl-menu\' ).dlmenu({ animationClasses : { classin : \'dl-animate-in-5\', classout : \'dl-animate-out-5\' } }); }); </script>'; } elseif(MODULE_CONTENT_HEADER_CATMENU_XS_TRANSITION == 'Trans3') { $catmenu_script = ' <script> $(function() { $( \'#dl-menu\' ).dlmenu({ animationClasses : { classin : \'dl-animate-in-3\', classout : \'dl-animate-out-3\' } }); }); </script>'; } elseif(MODULE_CONTENT_HEADER_CATMENU_XS_TRANSITION == 'Trans4') { $catmenu_script = ' <script> $(function() { $( \'#dl-menu\' ).dlmenu({ animationClasses : { classin : \'dl-animate-in-4\', classout : \'dl-animate-out-4\' } }); }); </script>'; } $oscTemplate->addBlock($catmenu_script, 'footer_scripts'); } About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
ArtcoInc Posted August 28, 2019 Author Share Posted August 28, 2019 @raiwa Thank you very much! After I had posted yesterday, I took a deep breath and attacked the issue. I pulled the scripts out of the menu modules, and wrote (copy, cut and paste) new Header Tag modules, similar to what you posted above.. This pushed all of the scripts down to the end of the page. This seems to have resolved the errors (well, there is one left, but I'll address that one separately). Thank you, though, for your time and consideration. I'm sure the information you posted above will be of value to others too. Sincerely, Malcolm Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.