user3753135
user3753135

Reputation: 33

Joomla 331 Uncaught ReferenceError: jQuery is not defined

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&amp;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

Answers (1)

Lodder
Lodder

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&amp;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

Related Questions