We Keep Coding

How to add JQuery to a Joomla 3 page

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?

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);

$('body').layout is not a function

I'm using the jQuery UI Layout plugin and I keep getting this error in Firebug: $('body').layout is not a function. I also get the same error in IE8 and below.
Obviously, it's being caused by the line where I initiate the layout UI in my scripts file:
$('body').layout({ *options here* });
Is there a way to prevent this error from showing? I'm pretty sure I need the BODY selector for this particular plugin to run.
** SOLUTION **
As the helpful answers say below, I had this line: $('body').layout({ *options here* }); BEFORE I included my jQuery and jQuery UI Layout Plugin files. Once I put the body.layout after those two inclusions, the error went away.

You seem to either
1) have not included the plugin properly (script tag missing/typo in the url, included it before loading jquery itself, whatever else could go wrong)
 or
2) calling $("body").layout too early - wrap it with $(document).ready(function() { });
it should be
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.layout.js"></script>
...
<script type="text/javascript">
$(document).ready(function() {
$("body").layout() // will work now
});
</script>

Make sure you're including the lines:
<SCRIPT type="text/javascript" src="/path/to/jquery-latest.js"></SCRIPT>
<SCRIPT type="text/javascript" src="/path/to/jquery.layout-latest.js"></SCRIPT>
Prior to the code you placed in your question. Otherwise, layout will have been undefined before use.

How do you implement the jQuery noConflict() method correctly?

I can't get the noConflict() method to work properly. I've been searching online for hours and can't seem to get a solid answer. Here's what I have in my header...
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery script -->
<script type="text/javascript" src="js/page_scroll.js"></script><!-- JavaScript -->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script><!-- jQuery easing plug-in -->
<script type="text/javascript">
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Mootools with $(...), etc.
$('someid').hide();
</script>
There's no other jQuery or JavaScript within my HTML (just what I have externally), so "placing anything that uses the $ variable in the noConlict method" is not an option.
Essentially what I'm trying to do is have slimbox and easing page scroll (for my navigation) to work together. The problem is of course one works when the other is removed and vice versa. Also, when I use the noConflict() method I get slimbox to work and not pagescroll, but when I remove the noConflict() method I get pagescroll to work and not slimbox. So apperently noConflict is doing something, I just don't know what that is or how to go about it.
If anyone can help me out, I'd appreciate it. Thanks.

when using other js libs that leverage the $ alias,
I have found reliable results by using
$.noConflict();
jQuery(document).ready(function($) {
// your jQuery code here i.e.
// jQuery('some-selector-expression').somefunction();
});
// prototype or mootools code that uses the $ alias works fine here

So are you saying it does not work when you declare $j? You can define your own alternate names (e.g. jq, $J, awesomeQuery - anything you want). Try calling it something w/o the $

Wrap it in an anonymous function:
(function($){
$(document).ready(function() {
// function here...
});
})(jQuery);
Seeing the exact code might help.

How do I implement JQuery.noConflict() ?

I am using both javascript and jquery code on the same html page. For some reason, the jQuery library is stopping my native javascript code from working properly.
I found this page: jQuery No Conflict that says you can use a jquery.noConflict to release $ back to javascript. However, I'm not sure how to do this?
Specifically, I'm not sure how to implement this correctly? Where does the the Jquery code go, where does the JS code go?
My code is below:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

jQuery.noConflict will reset the $ variable so it's no longer an alias of jQuery. Aside from just calling it once, there's not much else you really need to do. Though, you can create your own alias with the return value, if you'd like:
var jq = jQuery.noConflict();
And, generally, you want to do this right after including jQuery and any plugins:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery-plugin.js"></script>
<script type="text/javascript">
jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>
<script type="text/javascript" src="/path/to/prototype.js"></script>
You can also go one step further and free up jQuery with noConflict(true). Though, if you take this route, you'll definitely want an alias as neither $ nor jQuery will probably be what you want:
var jq = jQuery.noConflict(true);
I think this last option is mostly used for mixing versions of jQuery, particularly for out-dated plugins when you want to update jQuery itself:
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="jquery-older-plugin.js"></script>
<script type="text/javascript">
var jq144 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="jquery-newer-plugin.js"></script>

By default, jquery uses the variable jQuery and the $ is used for your convenience. If you want to avoid conflicts, a good way is to encapsulate jQuery like so:
(function($){
$(function(){
alert('$ is safe!');
});
})(jQuery)

If I'm not mistaken:
var jq = $.noConflict();
then you can call jquery function with jq.(whatever).
jq('#selector');

It's typically used if you are using another library that uses $.
In order to still use the $ symbol for jQuery, I typically use:
jQuery.noConflict()(function($){
// jQuery code here
});

It allows for you to give the jQuery variable a different name, and still use it:
<script type="text/javascript">
$jq = $.noConflict();
// Code that uses other library's $ can follow here.
//use $jq for all calls to jQuery:
$jq.ajax(...)
$jq('selector')
</script>

If you look at the examples on the api page there is this:
Example: Creates a different alias instead of jQuery to use in the rest of the script.
var j = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
Put the var j = jQuery.noConflict() after you bring in jquery and then bring in the conflicting scripts. You can then use the j in place of $ for all your jquery needs and use the $ for the other script.

In addition to that, passing true to $.noConflict(true); will also restore previous (if any) global variable jQuery, so that plugins can be initialized with correct jQuery version when multiple versions are being used.

You simply assign a custom variable for JQuery to use instead of its default $. JQuery then wraps itself in a new function scope so $ no longer has a namespace conflict.
<script type="text/javascript">
$jQuery = $.noConflict();
// Other library code here which uses '$'
$jQuery(function(){ /* dom ready */ }
</script>

The noConflict() method releases the $ shortcut identifier, so that other scripts can use it for next time.
Default jquery $ as:
// Actin with $
$(function(){
$(".add").hide();
$(".add2").show();
});
Or as custom:
var j = jQuery.noConflict();
// Action with j
j(function(){
j(".edit").hide();
j(".add2").show();
});

<script src="JavascriptLibrary/jquery-1.4.2.js"></script>
<script>
var $i = jQuery.noConflict();
// alert($i.fn.jquery);
</script>
<script src="JavascriptLibrary/jquery-1.8.3.js"></script>
<script>
var $j = jQuery.noConflict();
//alert($j.fn.jquery);
</script>
<script src="JavascriptLibrary/jquery.colorbox.js"></script>
<script src="Js/jquery-1.12.3.js"></script>
<script>
var $NJS = jQuery.noConflict();
</script>
You can do it like this:
<script>
$i.alert('hi i am jquery-1.4.2.js alert function');
$j.alert('hi i am jquery-1.8.3.js alert function');
</script>

Today i have this issue because i have implemented "bootstrap menu" that uses a jQuery version along with "fancybox image gallery". Of course one plugin works and the other not due to jQuery conflict but i have overcome it as follow:
First i have added the "bootstrap menu" Js in the script footer as the menu is presented allover the website pages:
<!-- Top Menu Javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var jq171 = jQuery.noConflict(true);
</script>
And in the "fancybox" image gallery page as follow:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="fancybox/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
And the good thing is both working like a charm :)
Give it a try :)

I fixed that error by adding this conflict code
<script type="text/javascript">
jQuery.noConflict();
</script>
after my jQuery and js files and get the file was the error (found by the console of browser) and replace all the '$' by jQuery following this on all error js files in my Magento website. It's working for me good.
Find more details on my blog here

/* The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it. */
var jq = $.noConflict();
(function($){
$('document').ready(function(){
$('button').click(function(){
alert($('.para').text());
})
})
})(jq);
Live view example on codepen that is easy to understand: http://codepen.io/kaushik/pen/QGjeJQ

Using JQuery and Prototype in the same page

Several of my pages use both JQuery and Protoype. Since I upgraded to version 1.3 of JQuery this appears to be causing problems, because both libraries define a function named '$'.
JQuery provides a function noConflict() which relinquishes control of $ to other libraries that may be using it. So it seems like I need to go through all my pages that look like this:
<head>
<script type="text/javascript" src="/obp/js/prototype.js"></script>
<script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>
and change them to look like this:
<head>
<script type="text/javascript" src="/obp/js/prototype.js"></script>
<script type="text/javascript" src="/obp/js/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var $j = jQuery;
</script>
</head>
I should then be able to use '$' for Prototype and '$j' (or 'jQuery') for JQuery. I'm not entirely happy about duplicating these 2 lines of code in every relevant page, and expect that at some point somebody is likely to forget to add them to a new page. I'd prefer to be able to do the following
Create a file jquery-noconflict.js which "includes" jquery.js and the 2 lines of code shown above
Import jquery-noconflict.js (instead of jquery.js) in all my JSP/HTML pages
However, I'm not sure if it's possible to include one JS file in another, in the manner I've described? Of course an alternate solution is simply to add the 2 lines of code above to jquery.js directly, but if I do that I'll need to remember to do it every time I upgrade JQuery.

Currently you can do something like this:
<head>
<script type="text/javascript" src="/obp/js/prototype.js"></script>
<script type="text/javascript" src="/obp/js/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
</script>
</head>
Then, use jQuery as $j() and Prototype's $().

It would seem that the most simple answer would be to bite the bullet, and include your noConflict lines. Of course if your pages aren't using a shared header, that solution might not be the best.

This solution worked fine:
jQuery.noConflict();
var $j = jQuery;
Now use $j in place of $ for your jQuery code, like:
$j(document).ready(function() {
$j('#div_id').innerfade({
// some stuff
});
});

I went through this for a while. It is very annoying and in the end I decided to weed out all of my old Prototype stuff and replace it with jQuery. I do like the way Prototype handles some Ajax tasks but it wasn't worth the trade off of maintaining all of the no conflict stuff.

Just as a note to others that stumble upon this. The solutions are described here (mentioning prototype specifically):
http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Could you not just include the jQuery = noConflict() code in the jquery.js source file? Why would it need to be defined that way?

Your jquery-noconflict.js should look like this (be sure that all is in one line):
document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");
... and than your include (as you already pointed out) should look like this:
<head>
<script type="text/javascript" src="/obp/js/prototype.js"></script>
<script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>
This solution solves all your requirements I think.

<script>
document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
jQuery.noConflict();
var $j = jQuery;
</script>
or
var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;
EDIT:
I tried out this suggestion but the last 2 lines produce the error
jQuery is not defined

You could call jquery first and then set
var $j = jQuery;
prototype will take control of $ in this case.
Or, you could just refer to jQuery by using the full jQuery function name (jQuery).

Use Prototype below jQuery like this:
<script type="text/javascript" src="news/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="news/jquery.easynews.js"></script>
<script type="text/javascript" src="lb/js/prototype.js"></script>
<script type="text/javascript" src="lb/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lb/js/lightbox.js"></script>
<link href="lb/css/lightbox.css" rel="stylesheet" type="text/css" />
in this case the jQuery function will create a problem, so you can use this to solve the problem:
<script type="text/javascript">
jQuery.noConflict();
var JQ = jQuery;//rename $ function
</script>

If I were you, I'd drop my no conflict code into a JavaScript include file like you opined about above, and then figure out some process where I'd be setting these things I need to include in all my pages in one central place. If you are working with straight HTML files and you don't have any kind of templating/scripting capability server-side for what gets included in a document, there's always the possibility of doing a Server-Side Include.
Either way, the pain you'll experience updating each of your pages this time will come back again when you need to update your analytics code or the site footer.

You need to load it in your public/javascript/application.js
jQuery.noConflict();
var $j = jQuery;
This is also a good article that may be helpful.
JQuery & Prototype working together