Jump to content

Recommended Posts

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


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

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.

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

...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');
    });

 


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (Phoenix).

here: https://github.com/gburton/Responsive-osCommerce/releases

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Share this post


Link to post
Share on other sites

@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


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites
Posted (edited)

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');

    }

 

Edited by raiwa

Share this post


Link to post
Share on other sites

@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


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×