How to get external .JS files to work in joomla

Question

I am creating a new Joomla template and have run into a problem with linking to external .js files.

    <head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/main.css">
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/FLpresentation.css">
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery-2.1.4.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/FLpresentation.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/FLajax.js"></script>

The Above code is included in the head tag and the CSS is working fine when I install my template into joomla. Everything looks how it should but all of my Jquery and Javascript code doesn't function. The only code that does is within tags on the index.php file.

Can anyone tell me what I am doing wrong? I have defined the files and folders in the templateDetails.xml and everything other than js is working fine despite me using the exact same method to link the CSS. Help me, I'm confused.

If you're using Joomla 3.x, please don't import jQuery like this. See an answer I wrote a while back: http://stackoverflow.com/a/12473933/1362108 — Lodder, Jul 08 '15 at 20:34
I have made my own Jquery template and installed it into joomla. Could there still be Jquery conflicts? — Ricky Payne, Jul 10 '15 at 09:42

score 1 · Accepted Answer · answered Jul 10 '15 at 19:38

100% JS conflicts. Just check the console! You include the Jquery libary, but Joomla already comes with Jquery. Check the console for errors, check if you have Jquery in output HTML more than 1 time and migrate your code.

Also wrap your code like this:

(function($) {

    $(document).ready(function(){
        // START HERE FOR ON_DOCUMENT_READY

        alert(1);
    });


})(jQuery);

This reserve the $ for your Jquery code.

I have since solved the problem. It was a Jquery conflict solved by linking to Cdn instead. — Ricky Payne, Jul 11 '15 at 07:39

vasconssa · Answer 2 · 2015-07-11T03:59:07.350

0

Use the JHtml::script method like in the example below:

$url = Juri::base();// pick the url for my joomla website
JHtml::script($url . 'components/com_revista/prefixfree.min.js');//here i'm using one file in my server, but you could put the url for your script like 
"JHtml::script('http://urlforscriptsource/script.js');"

The code below add JQuery framework on your joomla extension:

JHtml::_('jquery.framework');
JHtml::_('jquery.ui');
JHtml::_('jquery.ui', array('sortable'))

;

Ps: Is better use JQuery() instead of $() in yours JQuery codes, this will avoid conflicts!

edited Jul 11 '15 at 03:59

answered Jul 11 '15 at 03:53

vasconssa

61
2
3

Wrap the code like above will also avoid conflicts AND you are able to use the $-sign in your code. – Jul 11 '15 at 11:15

How to get external .JS files to work in joomla

2 Answers2