How do you assign jQuery scripts to an article?

Question

I'm working on adding a simple feature to a single Joomla article. Editing the article itself is necessary in this case, I can't modify the template files (or add the JS to the entire site).

In the article editor (as per the doc), my article is as follows ...

    {source}
    <?php
        $doc = JFactory::getDocument();
        $doc->addStyleSheet('mycode/css/article_1.css');
        $doc->addScript('mycode/js/article_1.js');
    ?>
    {/source}

    <div id="article_1"></div>

When viewing the page, both CSS and JS are loaded, but addScript() is first-come-first-served, so my script (which contains jQuery) loads before jQuery. The console spits out:

Uncaught TypeError: $ is not a function

I tried changing the addScript line to ...

    $doc->addCustomTag('<script src="mycode/js/article_1.js" defer></script>');

... (note the defer tag) but that doesn't seem to do anything (the script isn't added). I saw somewhere that I could use ...

    $doc->addScript('mycode/js/article_1.js', 'text/javascript" defer="false');

... but the editor (both TinyMCE and CodeMirror) encodes the " above (to & quot;) which breaks that possibility.

I've also tried wrapping the article_1.js code in an event listener ...

    document.addEventListener('DOMContentLoaded', function(){ ... }

... but that doesn't seem to help :\ I still get:

Uncaught TypeError: $ is not a function

How do you add a jQuery script from within an article?

Answer 1

Try this workaround below, by calling jquery.framework from the article. It should override jquery.framework call that comes from your template so then jquery will be called before your script.

{source}
<?php
    JHtml::_('jquery.framework');
    $doc = JFactory::getDocument();
    $doc->addStyleSheet('mycode/css/article_1.css');
    $doc->addScript('mycode/js/article_1.js');
?>
{/source}

<div id="article_1"></div>

Answer 2

It’s a jQuery conflict (more like noConflict issue). You should start and wrap your script for example like:

jQuery.noConflict();
(function( $ ) { // if you want to use $
  $(function() {
    // More code using $ as alias to jQuery
  });
})(jQuery);

Or redefine jQuery like:

var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function;       creating the new alias is optional.

$j(document).ready(function() {
    $j( "div" ).hide();
});

And with few other methods. These will release the conflict on the page. https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Update:

It is my fault or laziness that I have not given a short additional explanation about my answer.

First, the original question is two questions actually: 1. How to add scripts to articles? 2. What does the given error mean? And these are a bit misleading because it could get confusing answers.

On the question how to load scripts into articles the answer is relatively easy since there is addScript and some other obvious methods. And addScript() was already in the question so there was no problem with that. If you do not mistype your code then these will work.

The second question which is a bit more important in this question and it is what does this error mean?

Uncaught TypeError: $ is not a function

Now, this error is most of the time appears when jQuery framework is loaded in noConflict mode as usually is the case in Joomla. And if jQuery is loaded in noConflict mode then the $ shortcut will not be available, thus the error appears, when you try to run your scripts with that shortcut. That is why I gave my answer as it is, as a good practice you should wrap your jQuery scripts as it is above. And that is also explaining why you should not load the whole jQuery framework again within an article (since most probably it is already loaded so that is not the problem and loading it into an article could cause other complications later).