How to add JQuery to a Joomla 3 page

Question

I am new to Joomla 3.

I am trying to add a JQuery script to a joomla page that runs with the $ sign. In the documentation , I found that I need to add JHtml::_('jquery.framework', false); to do that, but it isn't working.

I tried:

<?php 

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

?>

<div class="text">JQuery is not working</div> 

<script type=text/javascript">

$(document).ready(function(){

$('.text').text("JQUERY ROCKS!");

});
</script>

And the usual:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    

<div class="text">JQuery is not working</div> 

<script type=text/javascript">

$(document).ready(function(){

$('.text').text("JQUERY ROCKS!");

});
</script>

But none works. Why?

Answer 1

The problem is your loading jQuery without no conflict mode. Joomla uses another JavaScript library Mootools which also used the $ symbol, which is why it isn't working. I would change your call to:

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

And you could either use jQuery instead of $ for all your jQuery methods or wrap your existing code around an Immediately Invoked Function like so:

(function ($) {

     // put your jQuery code here that used $

})(jQuery);