Javascripts Load Order Causing Errors

[Tim Rinkel]

Hi,

I am creating a custom template based on Gantry 4.1.20 and Joomla 3.2.1. I have created a copy of the default template called rfsc-blue-2. I have made a number of customizations in less custom files and I have added a couple of features.

The issue

I am getting javascript errors:

 

From browser-engines.js (line 9:154)

TypeError: 'undefined' is not a function (evaluating 'Function.attempt(function(){q();

return q;},function(){p();return p;},function(){e();return e;})')

 

From rokmediaqueries.js (line 80)

ReferenceError: Can't find variable: Class

If I select the original Gantry template as default, I do not get the errors. I think the problem is that in my template, mootools and core.js are loading after the two scripts with errors.

They Gantry template loads javascripts like this:

  <script src="/int3/media/jui/js/jquery.min.js" type="text/javascript"></script>

  <script src="/int3/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>

  <script src="/int3/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/tabs-state.js" type="text/javascript"></script>

  <script src="/int3/media/modals/js/jquery.colorbox-min.js" type="text/javascript"></script>

  <script src="/int3/media/modals/js/script.min.js" type="text/javascript"></script>

  <script src="/int3/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/mootools-core.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/core.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/mootools-more.js" type="text/javascript"></script>

  <script src="/int3/libraries/gantry/js/browser-engines.js" type="text/javascript"></script>

  <script src="/int3/templates/gantry/js/rokmediaqueries.js" type="text/javascript"></script>

  <script src="/int3/modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js" type="text/javascript"></script>

  <script src="/int3/modules/mod_roknavmenu/themes/default/js/sidemenu.js" type="text/javascript"></script>

My template loads javascripts like this:

  <script src="/int3/media/jui/js/jquery.min.js" type="text/javascript"></script>

  <script src="/int3/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>

  <script src="/int3/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/tabs-state.js" type="text/javascript"></script>

  <script src="/int3/media/modals/js/jquery.colorbox-min.js" type="text/javascript"></script>

  <script src="/int3/media/modals/js/script.min.js" type="text/javascript"></script>

  <script src="/int3/media/jui/js/bootstrap.min.js" type="text/javascript"></script>

  <script src="/int3/libraries/gantry/js/browser-engines.js" type="text/javascript"></script>

  <script src="/int3/templates/rfsc-blue-2/js/rokmediaqueries.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/mootools-core.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/core.js" type="text/javascript"></script>

  <script src="/int3/media/system/js/mootools-more.js" type="text/javascript"></script>

  <script src="/int3/modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js" type="text/javascript"></script>

  <script src="/int3/modules/mod_roknavmenu/themes/default/js/sidemenu.js" type="text/javascript"></script>

Notice that in my template browser-engines.js and rokmediaqueries.js come before mootools-core.js, core.js and mootools-more.js. I assume the issue is in some of my customization but I can't figure out what might cause this difference. Can anyone tell me how the load order of javascripts is determined and what things I might check to resolve this?

Thanks!

Tim Rinkel