Conflict solution required in jQuery and $ in jquery - javascript

I have two pages with a script
jQuery(document).ready(function()
{
jQuery("#"+id).simpletip({
/*content: 'A simple tooltip2 A simple tooltip2 A simple tooltip2',*/
content: msg,
fixed: true,
position: ["0", positionVal]
});
});
but i have one problem, one page is working using above method but another page is working only when i replace jQuery with $. is there any alternative by which I can solve this conflict?
I tried jQuery.noConflict(); and var j = jQuery.noConflict(); method, but it didn't work.

You might have other library there. You can however use $ on both of your pages like this:
jQuery(function($){
// use $ now
});
Or
jQuery(document).ready(function($){
// use $ now
});
FYI, you can also check what $ resolves to using:
alert($); // or console.log($)

Related

Use both $ and jquery as variable

In my project every page loads a cdn jquery script. some use $ and some use jquery. and now I have to use my new script file 'myNewScript.js' in every page.
If I write my function like $(function (){}) it gives error on some pages like
$ is not function
and if I write function like this jquery(function (){}) then it also give error on other page like
jquery is not a function.
I want to know can we use both $ and jquery as variable . like in same script file say 'myNewScript.js' I want to write $(function (){}) and jquery(function (){}).
Every thing is dependent on each other so I can't reverse the loading of the script. I can't think of any solution...
jQuery should always be available using the name jQuery (note the uppercase Q). So use that:
jQuery(function (){})
You can also wrap your code in an IIFE if you would like to refer to jQuery as $ while dealing with the uncertainty whether the global $ actually refers to it:
(function ($) {
$(function () {
// on ready stuff
});
})(jQuery);
Define jQuery locally for yourself by looking for both variables.
var myJquery = jquery || $;

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.

Editing a jQuery plugin for matching different jQuery version

I have assigned jQuery.noConflict() to $jq:
var $jq = jQuery.noConflict();
Now I want to edit a jquery plugin to use $jq. There are a lot of codes in the following style:
(function($) { /* some code that uses $ */ })(jQuery)
Changing $ to $jq doesn't solve the problem. What should I do?
You don't need to do anything. The $ is a variable local to the function that wraps the plugin; it's immediately assigned to jQuery, as you can see after the function literal:
})(jQuery) // Immediately calls the wrapper function with jQuery being passed
// as the $ argument.

$ is not a function, although jQuery is loaded

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.
});

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');

Categories