Hey, I was just looking at the docs for the noConflict function and it says nothing about how it works (obviously). I just wondered if anyone knew.
Does it unset $? (delete window.$?)
Any suggestions will be much appreciated.
You can check the source code:
// Map over the $ in case of overwrite
_$ = window.$
//....
noConflict: function( deep ) {
window.$ = _$;
if ( deep ) {
window.jQuery = _jQuery;
}
return jQuery;
}
It reverts $ to what it was before jQuery was loaded.
Related
I'm having some difficulty including the datatables plugin from https://datatables.net/manual/installation#Local-installation in my widget.
In the jquery.datatables.js there is a function that is supposed to assign jquery to the variable $
if ( typeof define === 'function' && define.amd ) {
// AMD
alert('AMD');
define( ['assets/js/jquery/jquery-3.2.1'], function ( $ ) {
alert('Common1');
alert( $ );
return factory( $, window, document );
} );
However, my alert ( $ ) shows that $ is undefined where it's supposed to be the function constructor for JQuery
In any case, in the subsequent function of jquery.datatables.min there is a main function that takes in:
(function( $, window, document, undefined )
and in this function, on the first use of $ is where I get
Uncaught TypeError: $ is not a function
Why am I getting this error and is it due to my define of the jquery causing this issue?
Even if I do:
var $ = require define( ['assets/js/jquery/jquery-3.2.1'])
right before the main function, I still don't get the $.fn.datatables function in the global?
I know this question is kind of a mess but I was hoping someone could give me pointers of where to start looking on how to resolve this issue.
Try to load jquery directly from CDN in the header and to not try to load using AMD.
Make sure jquery is the first library to be loaded in the header, example:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- other scripts below -->
</head>
For my personal library which uses jQuery as a dependency, I took the version of jQuery I was using, and changed their code to attach jQuery to my own personal object, rather than directly to the window object.
so instead of
window.jQuery
my jQuery is accessed as
window.myObjectName.jQuery
This works fine, however, I am now incorporating jQuery mobile, and I am unable to find which parts of the code in jQuery mobile to change in order to attach it to the jQuery under myObjectName.
Is there anyone out there that can help me with this? It would be greatly appreciated, please let me know if you need any more information, thank you!
I managed to figure out a solution for this, and will post the solutions for others who are interested.
jQuery mobile v1.4.5
Looking at the prettified version of jQuery Mobile, we can see that there are multiple encapsulations, at the top of this code we can see an argument passed in by the name of "root"
(function ( root, doc, factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "jquery" ], function ( $ ) {
factory( $, root, doc );
return $.mobile;
});
} else {
// Browser globals
factory( root.jQuery, root, doc );
}
}( this, document, function ( jQuery, window, document, undefined ) {/*!
This top function is a factory function which calls the rest of the code. If you log the value of "root", The argument namespaced window object, followed by the document, and a callback function. The namespaced window object must be changed from "this" to the name of the object you have attached jQuery to, such as this:
}( window.myObject, document, function ( jQuery, window, document, undefined ) {/*!
This will almost work, there is one more step in this, as this will cause jQuery mobile to throw an error when referencing the namespaced window object at these three points in the code:
line 1472: window.navigator.userAgent.indexOf("Firefox")
line 1473: window.navigator.userAgent.search(/CriOS/)
line 1499: var ua = window.navigtor.userAgent;
The window object jQueryM is referencing for these are the root namespace that you changed above. A simple fix for these three lines of code are to set a variable to the window object outside of jQuery Mobile, such as something like this:
var pseudoWindow = window;
(function ( root, doc, factory ) {
if ( typeof define === "function" && define.amd ) {
and then setting the window reference for the three lines of code above to reference this variable
line 1472: pseudoWindow.navigator.userAgent.indexOf("Firefox")
line 1473: pseudoWindow.navigator.userAgent.search(/CriOS/)
line 1499: var ua = pseudoWindow.navigtor.userAgent;
This will successfully make jQuery mobile attach itself to a jQuery that is not directly attached to the window.
Just for documentation, and to answer #twernt, here is how I attach jQuery to my own custom object.
If you open up the jQuery library, you can find near the bottom where jQuery attaches itself directly to the window object:
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
return jQuery;
and I simply change jQueries code accordingly to attach itself to my object like this:
var
// Map over jQuery in case of overwrite
_jQuery = window.myObject.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
// Expose jQuery and $ identifiers, even in
// AMD (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( !noGlobal ) {
window.myObject.jQuery = window.myObject.$ = jQuery;
}
return jQuery;
So as you can see here, jQuery is never attached directly to the window object in the first place, so referencing jQuery directly from the window such as window.jQuery will not work.
When using Jquery a syntax error occured. What is the difference between the two
$.ajax({
//working
});
Jquery.ajax({
//not work
});
$ is just an alias/shortcut for the formal name jQuery. This was done by jQuery to reduce the weight of scripts that would depend on the library.
you have misspelled the library identifier in your example:
//Your Example
JQuery.ajax({
});
//What it should look like
jQuery.ajax({
});
The 2nd code above should work fine like
$.ajax({
});
if in case the dollar sign ($) is also used by other libraries. You can use the jQuery.noConflict(); to give way to other libaries.
The correct name is jQuery, not Jquery. jQuery and $ are the same thing. $ is just a shortcut. Please read the documentation to get more information about how to properly use jQuery - https://api.jquery.com/
As the others already point out the problem:-
jQuery, not Jquery .
The below code from jQuery Source Code will show you how jQuery sets $ as alias or shortcut. And what happens when jQuery.noConflict is called.
http://code.jquery.com/jquery-2.1.4.js
var
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function( deep ) {
if ( window.$ === jQuery ) {
window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
window.jQuery = _jQuery;
}
return jQuery;
};
// Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if ( typeof noGlobal === strundefined ) {
window.jQuery = window.$ = jQuery;
}
For learning jQuery refer to :-
https://api.jquery.com/
http://learn.jquery.com/
I use noConflict() for my source code like this because had lot of problem with including duplicate jquery.js from other source codes in my program:
var $m = jQuery.noConflict();
$m.getJSON(........
problem is that when I call noConflict(), $ will not works. I know I can change $ to JQuery to fix this. but we have lot of custom code from others and this is not possible to change all source codes.
is there a way to recover that? I tried this but not working:
var $ = jQuery.noConflict();
Use a function expression.
(function ($) {
// code using $ for jQuery
}(jQuerysVariable));
If you have access to the other code, wrap it in an IIFE closure that binds jQuery to a parameter called $:
(function($) {
...
})(jQuery);
If you do not have access to the other code, you could try to temporarily set $ to point to your "no-conflict" instance of jQuery:
var _tmp = window.$; // save old value
window.$ = $m; // or window.$ = window.jQuery
// invoke and/or load other code here
...
window.$ = _tmp; // restore previous value
In this video there is a snippet of code that goes something like this:
if (jQuery) {jQuery(function() {
// ...
})}
I've never seen the jQuery() function before (then again, I'm not a savvy jQuery user), what does it do? Does it ship by default with jQuery or is it specific to IxEdit? Since the usual $(window).load() snippet is missing and the code is somewhat similar I'm guessing it's a shortcut / alias to:
$(window).load(function() {
// ...
)}
Am I right? Also what is that jQuery variable? What does it hold? And why is he checking it?
$() is an alias for jQuery(), defined as:
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
http://code.jquery.com/jquery-1.4.js
there is a special case defined when $() or jQuery() is called with the first argument being a function:
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
sometimes $ can conflict with other libraries (like prototype) that define the same function, so if you call
jQuery.noConflict();
it will remove the $ alias, setting it back to the original value found, essentially:
window.$ = _$;
jQuery(function()
is same as
$(document).ready(function()
if(jQuery)
is a check whether the jQuery.js file has been loaded or not.
There is another way to check this
if (typeof jQuery == 'undefined')
{
//jQuery has not been loaded
}
The $ function is an alias for the jQuery function. So, they are the same.
If you use jQuery in noConflict mode, there is only jQuery() function
I think it is the same that using $() but you use jQuery() for compatibility with other libs which also use $()
jQuery can be a variable that store a function. Guess that if is to check if it is not undefined or something like that