Reputation: 33
I suddenly started recieving the follwoing error: Uncaught ReferenceError: jQuery is not defined.
I'm not that fluent in php so please be kind. LOL
My head code from the index.php template is:
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" />
<!-- Created by Artisteer v4.2.0.60623 -->
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" /><![endif]-->
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.responsive.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" />
<link rel="shortcut icon" href="<?php echo $templateUrl; ?>/favicon.ico" type="image/x-icon" />
<script>if ('undefined' != typeof jQuery) document._artxJQueryBackup = jQuery;</script>
<script src="<?php echo $templateUrl; ?>/jquery.js"></script>
<script>jQuery.noConflict();</script>
<script src="<?php echo $templateUrl; ?>/script.js"></script>
<script src="<?php echo $templateUrl; ?>/script.responsive.js"></script>
<script src="<?php echo $templateUrl; ?>/modules.js"></script>
<?php $view->includeInlineScripts() ?>
<script>if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>
Upvotes: 3
Views: 8266
Reputation: 19733
This is because you are loading jQuery after <jdoc:include type="head" />
. You should load jQuery above this line or even better, use the following:
JHtml::_('jquery.framework');
So you final code would be:
<head>
<?php JHtml::_('jquery.framework'); ?>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width" />
<link rel="shortcut icon" href="<?php echo $templateUrl; ?>/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/system.css" />
<link rel="stylesheet" href="<?php echo $document->baseurl; ?>/templates/system/css/general.css" />
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.css" media="screen" />
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.responsive.css" media="all" />
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" />
<![endif]-->
<jdoc:include type="head" />
<script src="<?php echo $templateUrl; ?>/script.js"></script>
<script src="<?php echo $templateUrl; ?>/script.responsive.js"></script>
<script src="<?php echo $templateUrl; ?>/modules.js"></script>
<?php $view->includeInlineScripts() ?>
<script>if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;</script>
As you might have noticed, I've swapped a few things around so the order is a little cleaner.
On a side note, I would also recommend you simply remove this:
<!--[if lte IE 7]>
<link rel="stylesheet" href="<?php echo $templateUrl; ?>/css/template.ie7.css" media="screen" />
<![endif]-->
as Internet Explorer is extremely old and there shouldn't be any reason why you would have to support it.
Hope this helps
Upvotes: 6