Develop Reference

$ not working for jQuery in new website

I have been using jQuery for quite a few years now, and after I include the jQuery scripts in whatever site I am working on, I would always use the $ for jQuery objects. For example:
$('#my_selector').click(function(){...
I had built a website a few years ago in Joomla 1.6 with over 200 pages and jQuery used in almost all of them, all with the $. Now I am rebuilding the site in Joomla 3.3.0. The funny thing is, now sometimes the $ just doesn't work when identifying jQuery objects, but when I use jQuery it works. For example. the above code example would have to be changed to this:
jQuery('#my_selector').click(function(){...
And that works. And the final strangest thing is that on one page, it seems like the $ works for some of the jQuery but not all. The error that I see is this one:
TypeError: undefined is not a function
Seems like the problem occurs mostly on the functions that run after load complete circumstances. Anyway I am just wondering if people out there know why the $ would stop working with identifying the jQuery functions and objects.
Thanks!

You are most probably using a conflicting library, meaning: another script/library that declares (and thus overrides) the variable $. Wrap all your code in a closure, and you should be good:
(function($) {
$('#my_selector').doStuff();
})(jQuery)
Or, if it needs to be executed after document ready:
jQuery(document).ready(function($) {
$('#my_selector').doStuff();
});

Joomla 3.x is moving progressively to jQuery and replacing all MooTools dependencies along the way.
The default state is to load jQuery in noConflict() mode, but depending on features used on any given page by extensions (templates,plug-ins, components or modules) MooTools may also be loaded.
That means that on some pages, jQuery is defined and not $ and on other pages both are defined, obviously this will result in the issues you are seeing.
Add to that most third-party extensions from the 1.6 era (you have been upgrading to the 2.5.x line along the way right?) just ignored what-ever was going on and loaded whatever they needed (potentially blowing away other libraries) you generally will have to sort out all the conflicts first.
The only guaranteed way to use jQuery is by using the jQuery prefix.
You can read about using JavaScript frameworks with Joomla here, amongst other things it gives you future proof mechanism built-in to Joomla for loading jQuery.
To load jQuery, use: JHtml::_('jquery.framework');
To load the jQuery UI core call: JHtml::_('jquery.ui');
As has been mentioned you can wrap your JavaScript in a closure, in fact this is what the core com_banners does in /media/cbanner.js
var jQuery;
(function ($) {
$(document).ready(function () {
$('#jform_type').on('change', function (a, params) {
var v = typeof(params) !== 'object' ? $('#jform_type').val() : params.selected;
switch (v) {
case '0':
// Image
$('#image, #url').show();
$('#custom').hide();
break;
case '1':
// Custom
$('#image, #url').hide();
$('#custom').show();
break;
}
});
});
})(jQuery);

Are you or joomla using mootools or any other library with the $?
This would mean there is a conflict and the right way to solve it, is by using jQuery instead of $.

Rails/Javascript selectors won't find elements

I am in the process of installing the asset pipeline into an older rails app. I am getting some really strange results though. I can see that the page is rendering all of the css and the jquery that is in the app/assets directory but its having a hard time interacting with the html.
For instance if i inspect the page and in the console call $("html").html(); to try grab all the html it returns TypeError: Cannot call method 'html' of null same when trying to grab any element that is being rendered? but the page is there. if i call jQuery it will return fine. so its not like it jQuery isnt there.

$ is just a shorthand way of writing jQuery. If the latter works but the former doesn't, then another script in your pipeline is probably conflicting with jQuery and trying to use the $ symbol for something else.
Are you using any other plugins or libraries that might be trying to use $? Or have you accidentally overwritten it yourself by writing $ = (something) anywhere? Without more information it's hard to know where the problem is exactly.
If all else fails you can just stick to using jQuery() for all your calls. In your external script file you could also circumvent this by passing the jQuery object to a wrapper function, e.g.:
(function ($) {
$('div').append('You can use $ here without having to worry about conflict.');
}(jQuery))

Mixing javascript and jquery within namespace

Was having trouble a few weeks ago getting jquery to run in firebug (esp on drupal sites). Apparently the issue was that Drupal was grabbing the $ variable, so I got a little namespace snippet (function($)...(Jquery)); that reclaimed the $. I have been using the namespace in firebug but geting inconsistent results, especially when mixing pure javascript and Jquery within the namespace. I understand that all Jquery is javascript and they work together, but looking at samples I see some weird variations in the way people deploy this namespace. As a general question but also specifically within Firebug context, is there any need to place javascript in any particular relation to namespaced Jquery (inside the namespace, function calls inside, function out, or any other convention)?
Thanks

If you meant preventing the $ from being reclaimed, there is no convention but there is a way. other frameworks also use the $ name. anything declared later to use $ will take over $. however, you can prevent it or get around it.
jQuery offers a lot of ways to prevent it via its noConflict() method. but my preferred method is just wrap them in a function. jQuery also uses the jQuery namespace. $ is a shorthand alias, a very common one too. so functions like $.each() is also jQuery.each(). what crazy framework uses jQuery as its namespace anyway?
an example of wrapping in a function is like this:
(function($){
//inside here, "$" is jQuery
}(jQuery)); //pass "jQuery"

Defining a scope for JQuery variables, different js - single page

I have 2 js on a single page. In one of the js I am doing var jQuery = $.noConflict(true); and after that using all the jQuery methods using jQuery object, like jQuery("#div").hide();
In another js, I am using the traditional $ variable & accessing the jQuery methods as $("#div").hide();
When on a page I use either of the 2 js', things work fine. However, when I include both, the $ in the second js seems to be overwritten by jQuery. for example, in js 2 I can no longer do $("#div").hide() but if I use jQuery instead of $, it works fine - jQuery("#div").hide();!
Why am I experimenting this is because the first div will be distributed to different websites as a plugin, and the second js could be the Jquery written by that website developer.
Please help me figure out where am I going wrong..
Thanks.

You're using noConflict, which releases jQuery's hold on $. Doesn't matter if it's in separate scripts, since it's the same global environment.
In the script where you want to use $, define that variable inside your .ready() handler.
jQuery(function($) {
$('foo').bar();
});

The easiest way to solve this is to use a pattern that plugin authors employ.
(function($) {
// Use $ safely within the function
})(jQuery); // Passes in jQuery object
This is function is created and invoked immediately, and at the same time allows you to pass a variable into the scope of the function. Using this, you can carry on referring to $ in your code and not worry about overwriting it or conflicting.
The jQuery documentation advises this pattern

Files do not have scope, you dereferenced $ with noConflict for your entire page. Anything

Reading a javascript script, why so many $ (dollar signs)?

I am trying to decipher a .js script and I am finding it filled with $ throughout? Is there any reason to use this? I'm pretty new to JavaScript.

I think you are reading a JavaScript library famously known as jQuery (or possibly another library). The $ is just a short form for a namespace or use as an identifier.
You can think of it like this jQuery('p') to select all the paragraphs on a page,
or for short form you can just write $('p').
Here is a link for jQuery tutorials/docs jQuery
Here is a list of standards section 7.6 describes it in detail ECMA Standard

A number of libraries have used $ as their primary symbol. It's nothing to do with JavaScript per se, but it's a short distinctive symbol and so libraries have tended to glom onto it. (You can start an identifier with $ in JavaScript, and identifiers can be one character long, so $ is a valid identifier, just like a or x.)
I know of at least three libraries that use $ for something:
jQuery - It's the all purpose function for jQuery, an alias of the jQuery function; more here.
Prototype - It's Prototype's replacement for document.getElementById, more here. Prototype also has $$, which is for looking things up via CSS selectors.
MooTools - Same use as Prototype (because MooTools is either "inspired by" or "forked from" Prototype, some years back, depending on who you ask), more here. And like Prototype, it has $$.

$ is a variable. A number of frameworks use it as a short hand for using it. Prototype and Jquery are the two big ones. This does not mean that the $ automatically is either one of those. It could be anything as anything in JavaScript can assign something to the $. This is something to be aware of, because when you start combining scripts from different sources, it's really easy for one to accidentally reassign a variable to something else.
Most likely it is a framework reference, but you'll have to read the code to be sure. At one point in time the $ was meant to be used to indicate that the code referenced by it was auto generated, but this is just a guideline.

if you're new to javascript, $() can look strange.
Try to think of it like
var $ = function(){
//do something
}
So the dollar sign is just the name of a variable like any other.
var myFunction = function(){
//do something
}
// this is exactly the same just a different name.
So the dollar sign has no special meaning in javascript.
Frameworks like to use it because you are using their functions so often, having to write e.g. jQuery() every time would be tedious. Having one character is nice and short.
I think they also have a preference for the $ symbol, purely because it is unusual so it is quickly distinguishable from other code.
A quick way to find out if it is jQuery is to do console.log(jQuery) if the console returns a string of code $() is jQuery. If you get undefined, it is something else.

Maybe you're reading jQuery code.
Because JavaScript lets you define variables which start with $ sign, or literally which are only $. For example, you can do:
var $ = "something";
alert($);
jQuery is a library built on JavaScript (the most popular at the time) and it has a global object to keep everything encapsulated. You access that global object using $.

The script is probably using a third party library such as Prototypejs or jQuery or he defined his own function $() which explain why the dollar sign appears so often in that script.

It's a jQuery function. That's what it is most probably. Might also be the Prototype library, or just a function that does something that's needed many times in the code, like getElementById etc

Without seeing the code, it sounds like the script you are looking at makes use of jQuery, as the $ is the default jQuery object.

Typically the $ will represent jQuery or another specific library (Moo Tools, etc.) . $ is the shortened form of referencing the jQuery object (or whatever library it was assigned). It makes the code much more readable and easy to use.
If you are just learning javascript, you will soon become very familiar with jQuery. :)

Either its jQuery or an old PHP habit by some javascript programmer :)

$ is only a function. It means you work with some javascript superstructure (framework).