JQuery not working on Joomla 3

Question

I am trying to make a simple jQuery script work under Joomla 3. Here is what my module looks now:

<?php 
// no direct access
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
JHtml::_('jquery.framework');
$doc->addScriptDeclaration('
    $(document).ready(function () {
       $(".text").text("By this");
    });
');
?>

<div class="text">Text should be changed...</div>

I tried this snippet on a normal page and works perfectly, just I don't know why it does not want to work in Joomla. I installed the jQuery Easy plugin as well, but with no success.

There is no need to install jQuery Easy plugin for Joomla 3.x — Lodder
have you removed the core jQuery file that comes with Joomla 3.x? — Lodder
no, it's a fresh install of j3 with a t3 framework. Haven't touched anything, except I tried the jQuery Easy plugin if it works or not. — Tirpox
The error you're receiving, does it specify a line? If so I assume it's coming from JHtml::_('jquery.framework'); which is odd. Try disabling the TS framework to see what difference it makes — Lodder

Tirpox Tirpox · Accepted Answer · 2013-09-02T07:19:11

Ok, finally after a lot of research I have the answer. Because the Joomla is handling jQuery through namespacing by default, you have to put it in your jQuery code. It mentions here as well: http://docs.joomla.org/J3.1:Javascript_Frameworks#jQuery_JavaScript_Framework

So instead of using $ you have to use jQuery. So here is the working code:

<?php 
// no direct access
defined('_JEXEC') or die;

$doc = JFactory::getDocument();
JHtml::_('jquery.framework');

$doc->addScriptDeclaration('
    jQuery(document).ready(function () {
        jQuery(".text").text("By this :)");
    });     
');
?>

<div class="text">Text should be changed...</div>

I hope it helps :)

P.S: You can turn the namespacing off by changing the jQuery declaration like so

JHtml::_('jquery.framework', false);

Please note that this wasn't working for me...

JQuery not working on Joomla 3

1 Answers