We Keep Coding

Understanding concept of plugin - $ / jQuery is not defined

I wrote one plugin with following syntax:
(function($){
$.fn.samplePlugin = function() {
return this.each(function() {
//My logic here
});
};
})(jQuery);
Then i called on load as
$(document).ready(function(){
$('#sample').samplePlugin();
});
Now i have these two errors in my console:
ReferenceError: jQuery is not defined
ReferenceError: $ is not defined
Can you please tell me what i'm missing and what should be the flow of usage of $ annotation when u create or include plugins?
Thanks,

Include jQuery before your plugin.

(1) Check if you have correctly included the jquery lib. in your code before calling your plugin.
(2) If you are on chrome to verify if jquery file is downloaded, open developer tools[shortcut F12 in windows] and switch to resources tab. See if jquery file is downloaded under scripts in your page resources.

write make sure jquery file is being loaded properly
If you are using jQuery UI library then please ensure that order is correct. You first need to include reference of jQuery library and after that jQuery UI library.

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jq.onload = procede;//make sure you don't type parenthesis
//i.e. 'procede()' runs function instantly
// 'procede' gives it a function to run when it's ready
...
function procede()
{
//jQuery commands are loaded (do your magic)
}

Have you included jQuery above your function?
If yes then use
$= jQuery.noConflict();
above calling your function.

Javascript modules, passing jQuery when it may not be loaded

I'm learning the module pattern for javascript in order to tidy up my code and reduce the need for a long 'global' javascript file.
As a consequence of this, I have a top level 'namespace' module, and a utility module in the same file. The utility module has some functions that require jquery, and others that do not.
On lightweight pages that use no jQuery, I don't want to load the library (I have a very good reason for not doing so).
The problem arises when jQuery is passed as a parameter to the module as in the following:
MODULE.vars = (function (variables,$) {
variables.cdn = undefined; //global for clientside cdn
variables.version = undefined; //global for clientside cdn version
variables.isTouchScreen = undefined; //global for touchscreen status
//Check if jquery exists, if so patch the jquery dependent functions
if ($) {
$(document).ready(function () {
variables.isTouchScreen = $('html').is('.touch');
});
}
return variables;
}(MODULE.vars || {}, jQuery));
The code stops on pages that I don't load jquery, stating that jQuery is undefined - fair enough. If I change the last line to:
}(MODULE.vars || {}, jQuery || false));
the code still complains that jQuery is undefined. I thought, perhaps erroneously, that if jQuery was undefined, it would be passed as undefined in this instance and instead take up the value false (which logic dictates wouldn't be necessary anyway).
How do I get around this problem when jQuery may or may not be present? I attempted to put the following at the top of the script:
var jQuery = jQuery || false;
thinking that this would then take up the value of jQuery if it was loaded. It works in modern browsers with this, but IE8 complains as it gets set to false even if jQuery is being loaded first on a page.
The scripts are all loaded in the correct order in the html, jQuery first, then my module afterwards.
When checking for the cause, IE8 returns $ as an object and jQuery as false. If i do not set the above line in the script, jQuery returns as the same object as $.
Sadly I have to cater for IE8 as well, so how do I get around this issue of the optional presence of jQuery?
Edit: This is only a snippet of the module and there are other functions that depend on jquery, but simply won't get implemented if jquery is not available

I seem to have found an answer that works after I worked out how to implement elanclrs suggestion - I put the following at the top of my modules:
var jQ = jQ || false;
if (typeof jQuery !== 'undefined') {
jQ = jQuery;
}
Then in my module, I pass jQ instead of jQuery.
The reasoning behind the answer was pointed at in this question: Error when passing undefined variable to function?

Using jQuery with Magento without replacing $ with jQuery?

I've not really found a definitive answer for this question. I've had to edit jQuery plugins to replace instances of $. This, for me at least, is a serious issue. Anyone coming after me, if going to have a nightmare to maintain of upgrade my work. I use a lot of plugins.
Is this really the only option?

If the plugin is poorly written then I guess you could try using the jQuery.noConflict method.
If it's properly written you don't need it because it will already wrap all $ usages in an anonymous method:
(function( $ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})( jQuery );

As Darin has mentioned, well authored plugins are wrapped in an anonymous method. You can use the same trick in your own code too, rather than use noConflict - for example if you had a JavaScript file with loads of jQuery in it that you didn't want to update:
(function ($) {
$(document).ready( function () {
$('#myid').hide();
});
// and so on...
}(jQuery));

Using JQuery in Drupal 7

I'm writing my own Drupal 7 module, and like to use JQuery in it.
$('#field').toggle();
But I'm getting this error:
TypeError: Property '$' of object [object DOMWindow] is not a function
It seems that JQuery is not loaded. Otherwise $ should be defined.
Though I actually include it in the header:
<script type="text/javascript" src="http://rockfinder.de/misc/jquery.js?v=1.4.4"></script>
Do I have to do anything else to activate JQuery in Drupal? Is $ being overwritten by Drupal?
That's the website: http://rockfinder.orgapage.de

From the Drupal 7 upgrade guide:
Javascript should be made compatible
with other libraries than jQuery by
adding a small wrapper around your
existing code:
(function ($) {
// Original JavaScript code.
})(jQuery);
The $ global will no longer refer to
the jquery object. However, with this
construction, the local variable $
will refer to jquery, allowing your
code to access jQuery through $
anyway, while the code will not
conflict with other libraries that use
the $ global.
You can also just use the 'jQuery' variable instead of the $ variable in your code.

According to Firebug, your jQuery file is being loaded:
But the $ is being overwritten by something else:
What you should do is encapsulate the use of the $ variable with a function that invokes itself using the jQuery object as it's first actual argument:
(function ($) {
// in this function, you can use the $ which refers to the jQuery object
}(jQuery));

Chances are your script is not initialized this way, you'll have to use Drupal.behaviors.YOURTHEMENAME
(function ($) {
Drupal.behaviors.YOURTHEMENAME = {
attach: function(context, settings) {
/*Add your js code here*/
alert('Code');
}
};
})(jQuery);

"$ is not a function" is a very common error that you may face while working with jQuery. You can try any answers of given below:
(function($){
//your can write your code here with $ prefix
})(jQuery);
OR
jQuery(document).ready(function($){
//Write your code here
});
Basically this will allow our code to run and use the $ shortcut for JQuery.

You can create the separate file for js and than add js file using the following:
drupal_add_js('path', 'module_name');

jquery element not defined, but it used to skip it

I recently transferred a site to a new host. Reloaded everything, and the javascript that worked fine before is breaking at an element it can't find. $('#emailForm') is not defined.
Now, the #emailform isn't on the page, but it wasn't before either, and JS used to skip this and it would just work. Not sure why this is happening. Any clues
Here is the site I am having the prblem:
http://rosecomm.com/26/gearwrench/

jQuery will return an empty jQuery object from $('#emailForm') if there isn't an element with the id='emailForm'.
One of the following is likely true:
You forgot to include jQuery - therefore $ is undefined.
There is another library included that uses $ - in which case you can wrap your code in a quick closure to rename jQuery to $
The Closure:
(function($){
// $ is jQuery
$('#emailForm').whatever();
})(jQuery);
You could console.log(window.$,window.jQuery); in firebug to check for both of these problems.

You have mootools-1.2.2-core-yc.js installed as well, and it is conflicting with jQuery.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
$(document).ready(function() {
(function($){
// bind 'myForm' and provide a simple callback function
$('#emailForm').ajaxForm(function() {
var txt=document.getElementById("formReturn")
txt.innerHTML="<p>Thank You</p>";
});
...
$(document).ready is being called against the moo tools library instead of jQuery.

I'm not sure why it would be skipped before, but to avoid the error, wrap the statement(s) that reference $('#emailForm') in an if statement that checks to see if it is present:
if ( $('#emailForm').length ) {
// code to handle $('#emailForm') goes here...
}