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));
Related
I have lots of functions like: $.fn.functionName = (function() {
I call them using: $(this).functionName();
This is deprecated in jQuery 3, how can I rewrite the function definition in order to make it work well (just like before).
Do you know a Library that is able to (automatically) replace the deprecated jQuery sintax? There's the jquery migration tool: https://blog.jquery.com/2016/05/19/jquery-migrate-1-4-1-released-and-the-path-to-jquery-3-0/ but it doesn't help me too much.
Thank you.
EDIT
Example log from jQuery 3 migration tool:
JQMIGRATE: jQuery.fn.focus() event shorthand is deprecated
console.trace()
migrateWarn
jQuery.fn[name]
$.fn.functionName/this.initData
$.fn.functionName
<anonymous>
_onReady
$.obj
You need to replace jQuery.fn.blur() to jQuery.fn.trigger('blur') and jQuery.fn.focus() to jQuery.fn.trigger('focus') as per this https://github.com/mervick/emojionearea/issues/217,
I was using the "livequery" (https://plugins.jquery.com/livequery/) and inside it I was calling the $.fn.functionName.
I know, it's an old code, but that was the problem. As freedomn-m said in a comment, the $.fn.xxx is not deprecated. I hope this will help others too.
The following is an implementation code from a free jquery gallery I am trying to implement.
<script>
jQuery(function(){
jQuery('#camera_wrap_2').camera({
height: '400px',
loader: 'bar',
pagination: false,
thumbnails: true
});
});
</script>
What does this code do? I looked up methods to declare a function with jQuery, and none starts with
jQuery(function(){
jQuery('#camera_wrap_2').camera({
If anyone can explain what this does and point me to a resource on declaring such functions, i would be eternally grateful. Googling jQuery(function(){ did not really work.
Moreover,
This code only worked with the jquery file included - which is jquery.min.js v.1.7.1 and jquery.mobile.customized.min.js
When I used the jquery.min.js v.2.1.1 included with foundations 5, it produced an error in the jquery.mobile.customized.min.js
My guess is that the author had customized his mobile.js to work only with the specific jquery? I don't understand how that would happen though, even deprecated functions usually work.
$(function() {}) is shorthand for $(document).ready(function())
NOTE: that is the same as:
jQuery(function() {}) is shorthand for jQuery(document).ready(function())
The $ is an alias for the jQuery object
it waits for all elements to be added to the DOM, so you can be sure they exist before calling methods upon them
I just want to add ...
Please to refer :
jQuery-Library Source Code
In that library look at bottom-most comment section
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
// Expose jQuery as an AMD module, but only for AMD loaders that...
...
...
...
So you will get to know that window.jQuery is equivalent to jQuery which is equivalent to window.$ which is also equivalent to $.So use any one!!!
therefore, window.jQuery=jQuery=window.$=$
Take a look at this site:
http://www.magiskecirkel.no/
It says $ is not a function, although jQuery is loaded.
I know I have asked this question before, and it was fixed, but now apparently the problem is back... So sorry for re-posting, and thanks for all help.
For some reason, the last line of your jQuery file is the following:
jQuery.noConflict();
See jQuery.noConflict for what this does.
To get around it, you can use the following way of doing document ready:
jQuery(document).ready(function($) {
// use jQuery with the $ symbol
});
Alternatively, remove that line from jQuery.js if you can.
In global.js, can you change this line:
$(document).ready( function($) {
to:
$(document).ready( function() {
The error I get is on the line $(document).ready( function($) { You don't need the $ in the function call.
use jQuery noConflict() when using with other libraries
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
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');
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...
}