Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Where to load jQuery


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

Link to comment
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.

 

Link to comment
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');
    });

 

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

@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

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

    }

 

Link to comment
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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...