jQueryUI and jQuery Plugin Conflict - javascript

I am using a jQuery plugin that goes in conflict with something in the jQueryUI Effects Core, much probably something to do with ease animation.
I can't post the code because the plugin is not open source, so my question is: is there any way I can catch this error and fix it?
In the jQueryUI Effects Core, both plugin work properly with no conflicts if I remove the following code
$.effects = {
effect: {}
};
I don't even know what's that for, so I would like to understand.
Thanks in advance to anyone who will try to help me.

I would use the development version of jQuery, if you are looking for a conflict within the library itself. I'm certain you are already using some sort of debug tool, such as firebug, or chromes javascript console. From there you just need to find the error and get a stack trace. Firefox's "Break on all errors" feature is useful in this case.
Also don't be afraid to add your own code to the development version of jquery. Mess it up and treat it as your own code, you can always download it again.
good luck!

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
This technique is especially effective in conjunction with the .ready() method's ability to alias the jQuery object, as within callback passed to .ready() we can use $ if we wish without fear of conflicts later:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
$("div").hide();
});
// Code that uses other library's $ can follow here.
$("content").style.display = 'none';
</script>
Source: jQuery.noConflict

Related

what happens if you include three versions of jquery and have a script included in the middle that uses the jquery $ object

I've come across a problem where I have multiple plugins conflicting over their version of jquery. Now I have searched google, and I know that you should ultimately just use one version of jquery and update your code to that version of jquery. However, out of curiousity, I'm interested in knowing what happens when you do the following:
<include latest jquery>
<include script that uses jquery> <---and this jquery code is called back or triggered in some event handler function.. what happens then? what jquery $ version is used? the last jquery object that was added (the 'yet another version of jquery' )
<include some other version of jquery>
<include yet another version of jquery>
what version of jquery is used? and why? what exactly happens, how does the loading and execution of each script occur? does it just call the latest jquery's $ alias? thank you for your help.
you can use jQuery.noConflict() to have multiple versions of jQuery. Only one will use $.
for example
<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>
you can then use jq142 and jq132. more details http://api.jquery.com/jQuery.noConflict/
When you include jQuery, it overrides the jQuery variable. Thus, you actually can do what you are positing and it should work fine, even with $.
The reason not to do this is because it's not fun having to maintain multiple versions of software simultaneously, your client has to download multiple versions of jQuery, and you have a weird dependency on where to put some of your JS code that shouldn't be there. Fix this problem at its source (i.e. use one version) as soon as you can.
In action: http://jsfiddle.net/AbAgu/
It will depend. The scripts will be loaded and executed in order. Any code that is executed immediately in your intermediate script will use the jQuery found in the top script. Any code that is deferred till later (for instance function definitions that will be called by another script, or that are nested within event handlers) will use the final version loaded.
If that is not desired behavior you can use jQuery.noConflict(), although that may potentially involve modifying the plugins you're using to use the correct version.

js alternative to jquery load method

I'm trying to throw together a single js file that includes the functionality of jquery's .load(), as well as the methods, in an effort to link only to a single js file, rather than both jquery and the load methods.
Instead of
<script src="jquery.min.js" type="text/javascript"></script>
<script src="load.js" type="text/javascript"></script>
this
<script src="load_including-necessary-js-for-load-methods.js" type="text/javascript"></script>
So basically I'm trying to extract only the necessary code from within jquery that makes .load() work and include it in the file with the load methods.
Suggest, instead, that you use something along the lines of html5boilerplate's jQuery call:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
Accessing it via the CDN ensures high-speed delivery of the jQuery code that is used by thousands of other pages/users on a constant basis,
... which also means that that code is most likely cached in your users' browsers ...
... which equates to highly-tested code that you're really not "paying for" in terms of overall load time. The second line, of course, allows you to offer a copy of it from your own site, in case the CDN has a hiccup, or you need to be testing offline (in which case, AJAX is borked for you any way you look at it, anyhow...).
OTHERWISE, check out the instructions on jQuery's Github: https://github.com/jquery/jquery#how-to-build-your-own-jquery and read up on building your own... they have instructions, there for excluding modules that you don't want from the library.
After that, you'll probably want to use some kind of bundling script to bundle all your JS (your custom jQuery build + your scripts) together, if you want to reduce everything to one call.
i don't know your reason why you cannot use all jquery library, but you still can write own js script and use onload or document.load, window.load its you reduce your code. If you need jQuery load() ... read and try to first comment of your question or use all small(own) jQuery library than waste of your time with this.

Using jQuery and Mootools

So I need to provide a library for my client that displays a map, but I want to write this library using Mootools but the client has jQuery on his website. So my question is how will this affect the client website and what is the best way to avoid any conflicts.
Use this function
jQuery.noConflict();
but keep in mind that you will no longer be able to use the dollar sign for jQuery. Instead you'll always have to write jQuery("selector")... etc.
see also: http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
You can declare this code:
jQuery.noConflict();

How can I fix this javascript conflict mess (jquery + prototype + google visualization + PRADO php)?

I have a webapp relatively old running on Prado 2.1RC1 and I am trying to enhance it by adding some nice google visualizations charts.
The problem arose at the moment of integrating google jsapi (that depends on jquery) and the old libraries used by prado2.1.
Prado use some built-in libraries (some of them are base.js, dom.js, ajax.js, etc) + prototype 1.4.
In a first moment when I tried to integrate the tutorial example I got two errors logged in the chrome javascript console.
Uncaught RangeError: Invalid array length on base.js:524
Uncaught TypeError: undefined is not a function
Looking at base.js I found out that those errores where caused by a prototype bug in shift function (I think) because shift is implemented like this:
shift function() {
var result = this[0];
for (var i = 0; i < this.length - 1; i++)
this[i] = this[i + 1];
this.length--;
return result;
}
But when this.length==0, this.length-- explodes.
So after fixing this bug I had the hope that google nice charts will show up... But no. No error was thrown in javascript console but I got this text rendered with red background in the div where google chart should be appended:
number is not a function
I have no clue on this error. I suspect that there is some mess with the great quantity of javascript libraries required by the webapp.
I know that the situation is not really good considering I am using a old, deprecated, non-supported version of Prado and Prototype. But I am very n00b with php and with this framework. I don't really know how much time would take to me to migrate to a new Prado version of to update the javascript libraries and I even know if I am able to do this. Maybe some of you with more experience could tell me what are the best things to do in this situation or how should I proceed...
Thanks!! And let me know if you need more details in the problem.
I'm not sure if this is exactly your problem, but from what I understand, it seems that you noticed issues when you tried to integrate jquery/google jsapi into your project.
You shouldn't need jquery to this, and can load the jsapi (and necessary visualization packages) directly. These should be namespaced (like google.x.y) and not interfering with your other code - though I may be mistaken about how this may mess things up.
Here's how you can load the jsapi without jquery:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
Is that the issue?
Since Prado is using Prototype and the "$" is used by both Prototype and jQuery make sure you explicitly write (jQuery)(#selector) instead of $(#selector). It might be the root cause of your problem.
I beleive that it maybe better to not use the jquery wrapper of the google api. This is because there is a conflict between jQuery and prototype both using $. If you still must use jQuery you need to call jQuery.noConflict() to tell jQuery to not assign $ as the global pointer to jquery
After the prototype.js is included u need to include jquery and call noConflict().
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
</script>
It should be put after com:TForm. because TForm adds the prototype.js link to the page. Then include the google jquery wrapper.
now "$" points to prototype and "jQuery" points to jQuery
Explained on the JQuery site here
I had a template powered by jQuery and I used it as Layout ( Master page ) for my project.
I avoided conflicts between prototype and jQuery when I replaced all $("selector") with jQuery("selector").

Make jQuery no conflict

I am creating a web widget to be posted on other websites. In the widget it will call jQuery and I dont want the jQuery to conflict with other JavaScript libraries that the website may have installed. When I load the jQuery I would like to call jQuery like this:
JQuery_MYSite('id').find('selector');
I found out if I do this then $ will not be able to be used even if the other website uses $.
When the widget loads it find out if jQuery is loaded. If so, then it will use the $ to call jQuery. But I know $ is not unique to just jQuery - other javascript libraries use it. So how can I use my own jQuery prefix with without interfering with the website owners prefix.
In the widget it will call jQuery and I dont want the jQuery to
conflict with other JavaScript libraries that the website may have
installed.
I don't think you can achieve this, because jQuery.noConflict() must be called after the other scripts have been loaded. So, if there is no way for you to know about the other scripts, then you won't have a way to avoid the conflicting.
When the widget loads it find out if jQuery is loaded. If so, then it
will use the $ to call jQuery. But I know $ is not unique to just
jQuery - other javascript libraries use it. So how can I use my own
jQuery prefix with without interfering with the website owners prefix.
Wrap your widget code with an auto-executing anonymous function:
(function($){
// your widget code here
// $ will always be jQuery
})(jQuery);
var myJquery = jQuery.noConflict();
then if you want to get fancy:
(function($){
$(".whatever").doSomeStuff();
})(myJquery);
use noConflict
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Check out jQuery.noConflict().
look at noConflict
$.noConflict();
(function($){
// $ is jQuery here
})(jQuery);

Categories

Resources