is there a way to use $ after calling noConflict()? - javascript

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

Related

Include a javascript class in a parent class, rather than in window when it is loaded

For example, we are request jQuery with <script src=". From now on window.jQuery or jQuery will be available.
But I want to prevent it from being used in this way and collect it in a pool.
For example:
container = {
jQuery: (function(){}(), // jQuery' script,
..,
..,
..
};
container.jQuery('.hi').addClass('hello');
container.jQuery(document).on('click', function(){});
Is it possible to do this?
jQuery is just a global variable and as such can be reassigned.
var container = {};
container.jQuery = jQuery;
jQuery = $ = null;
console.log(container.jQuery("div").length);
// gives error $ is not a function:
$("div").css("color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>a div</div>
.noConflict() allows you to reassign $ back to what it was before jquery was loaded, so you may want to call that first before obliterating $.
You could do it with a module system or call jQuery.noConflict(true). That will give you the jQuery to use as well as reset the globals: https://api.jquery.com/jQuery.noConflict/

How can I determine whether jQuery is fully initialized?

I'm writing a bookmarklet using jQuery. It looks like javascript:document.write('<script src="path/to/loader.js"></script>'), and loader.js does the initializing stuffs:
check_the_environment();
document.head.innerHTML='<meta charset=utf-8>';
document.body.innerHTML='(the webpage)';
var jq=document.createElement('script');
jq.src='path/to/jquery.min.js';
document.head.appendChild(jq);
function load_core() {
if(window.$)
eval('(core js code)');
else
setTimeout(load_core,50);
}
load_core();
The loader loads the core javascript code after the jQuery is available.
But sometimes I get this error in my core code:
$(...).on is not a function
It seems that jQuery was still initializing itself although $ variable is setted.
So, I need to wait for jQuery to be completely initialized before the loader loads the core code. How can I do that?
The traditional way of using $(document).ready(...) is infeasible, as jQuery is being loaded after the webpage is ready.
Here is a minimal Python code to check whether the solution is working:
import cherrypy
mod='''
var htmlroot=document.getElementsByTagName('html')[0];
function load_core() {
if(window.jQuery)
jQuery(function(){
alert($(document).on);
});
else
setTimeout(load_core,10);
}
if(!document.head)
htmlroot.appendChild(document.createElement('head'));
var jquery=document.createElement('script');
jquery.src='http://libs.useso.com/js/jquery/2.1.1/jquery.min.js';
document.head.appendChild(jquery);
load_core();
'''
class Website:
#cherrypy.expose()
def mod(self,_time):
return mod
#cherrypy.expose()
def index(self):
return '''Mod'''
cherrypy.quickstart(Website(),'/');
The right and foolproof way would be:
jQuery(function(){
// code
});
Since jQuery may be loaded in noConflict mode the $ var may not have been initialized.
For the sake of productivity the following can also be used to have access to $ var inside the jQuery scope.
jQuery(function($){
// you can use $ without worrying about conflicts now
});
You can check type of $ as below
if(typeof $ == "function"){
//Jquery loaded
}

What is the difference between using jQuery and it's alias ($)?

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/

How to use $ for jQuery inside domready when prototype is using $ outside?

I'm unable to remove prototype from a JSF framework (RichFaces 3.3.3). And if I try noConflict and try to take over $ it breaks my application framework because its tightly coupled with prototype.
So is there a way that I can do this:
jQuery(function() {
/*
some code that within this domready function
allows me to use $() within this function
and not interfere with $ being used for prototype
outside?
*/
});
Yes, it's already passed in as the first parameter to your ready handler, just use:
jQuery(function($) {
$("selector").doSomething();
});
//$ is still prototype here
In general, you can write var $ = jQuery; to replace the $ symbol within a single function.
In your specific case, you can also use the first parameter of the callback.
taking this link as a reference, you could do something like this:
jQuery(function($) { // like Nick Craver
});
and call the functions you need to have jQuery with:
var yourFunction = function(){
var $ = this;
};
yourFunction.call(jQuery);
...
var yourFunction = (function($){
return function() {
// $ -> jQuery
};
})(jQuery);
...
var yourFunction = (function(){
var $ = this;
return function() {
// $ -> jQuery
};
}).call(jQuery);
The standard within my working group:
jQuery.noConflict();
(function ($) {
//Do jQuery stuff using $ here.
})(jQuery);
//Do prototype stuff using $ here

What does the jQuery() function in jQuery do?

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

Categories