Jquery Conflict which gives error - javascript

Working on an project which has variety of functionality in it such as,
Google translator
Image Slider [galleriffic used]
Popup window [Shadow box used]
JavaScript horizontal menu bar*
Now we are getting jquery conflict in it and error message such as
I know such message are occurred when the code doesn't find the jquery file but the files is present .
Here are the list of files used in the project
This is needed by the google translator
1.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
6. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
7. <script type="text/javascript" src="/scripts/common.js"></script>
This one is for the slider
1. <script type="text/javascript" src="/SliderBox/js/jquery-1.3.2.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
This is for the popup window
1. <script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
2. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
3. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
4. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
This is needed by the horizontal menu
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2. <script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
3. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js
but still not able to clear the conflict
Here is the sequence used by me
1. <script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
2.<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
3. <script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
4. <script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
5. <script type="text/javascript" src="/scripts/jquery.bt.js"></script>
6. <script type="text/javascript" src="/scripts/jquery-ui-1.8.21.custom.min.js"></script>
7. <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
8. <script type="text/javascript" src="/scripts/common.js"></script>
9. <script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
10. <script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
11.<script type="text/javascript" src="/SliderBox/js/prototype.js"></script>
12. <script type="text/javascript" src="/SliderBox/js/effects.js"></script>
13. <script type="text/javascript" src="/SliderBox/js/lightwindow.js"></script>
14. <script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
15.<script src="../scripts/jquery.als-1.1.min.js" type="text/javascript"></script>
16. <script src="../scripts/settingsEN.js" type="text/javascript"></script>
I have tried all these
http://api.jquery.com/jQuery.noConflict/
http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUsing_jQuery_with_Other_Libraries%26redirect%3Dno
http://www.w3schools.com/jquery/jquery_noconflict.asp
I have tried all these
<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>
or
<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.
});
// Code that uses other library's $ can follow here.
</script>
or
jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
but still not able to get the Solution
When I remove this code of slider, every thing works fine , no errors but the slider will not work
<!--script for slider--->
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '', 'float' : 'right'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
random: true,
prevLinkText: '',
nextLinkText: '',
nextPageLinkText: '',
playLinkText: '',
pauseLinkText: '',
prevPageLinkText: '',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<!--script end--->
Can anyone help?

I read your question and search on site of every plugins that you use.
Any List Scroller
Shadowbox.js
Prototype
Galleriffic
If something is missing plugin, publish it please.
I had the similar problem and I not used the $.noConflict(true);
If you project is the server that when this is open for take the file html.
I suggest for you that you insert the calling for external div in one file html.
And in every file html you can write the script with
$(document).ready(function () {
.............
});
You can't calling the file external in every file html because this create a normal conflict.
AND..
I suggest this site for look the last libraries... Google-libraries-last
AND..
I have optimized all these and have included only one jquery file of jquery-1.9.1.min.js but still not able to clear the conflict Here is the sequence used by me
This is better.
AND:::
For the error TypeError: $ is not a function depends how this function is implemented or write.
Possible error is ; or {, } , ( , )
This happens because another javascript library has been loaded and has overwritten the object $() shortcut for jQuery.
So when we include other javascript libraries besides jquery, we are exposing the jquery library to conflicts.
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 $.
One solution 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() like:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ follow here.
});
// Code that uses other library's $ follow here.
</script>
Another solution is to reassign jquery object $() back to jquery library, wrapping up our call inside a function that reassigns $() object. Thus we make sure our code isn’t messed with Prototype, Scriptaculous, etc.
( function($) {
// Your jquery code
} ) ( jQuery );
Suppose:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
( function($) {
// Assigning $ again to jquery
$(document).ready( function() { alert("Now you can use to use '$' in your jquery code"); } );
} ) ( jQuery );
//this will fail
$(document).ready( function() { alert('This fails because $ has been modified outside jquery'); } );
</script>
This approach is a self-calling anonymous function style to avoid conflicts with jQuery. If you don't use it then you would have to type jQuery() instead of its object $().
Example:
$(document) //won't work
jquery(document) //will work
Example on JSFIDDLE.NET
Finally
Typeerror for null
Look on jquery-documentready-controlid-is-null

try to use .noConflict() in jQuery
<script src="....../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<script type="text/javascript" src="...../jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>

I went with this flow and the error was solved. Didn't need any .noConflict() and on!!!
1)<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
2)<script type="text/javascript" src="//jquery-translate.googlecode.com/files/jquery.translate-1.3.7.min.js"></script>
3)<script type="text/javascript" src="/scripts/jQuery/jquery.cookie.js"></script>
4)<script type="text/javascript" src="/scripts/jquery.bt.js"></script>
5)<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
6)<script type="text/javascript" src="/scripts/common.js"></script>
7)<script src="/scripts/jQuery/insert_active_flash.js" type="text/javascript"></script>
8)<script type="text/javascript" src="/SliderBox/js/jquery.galleriffic.js"></script>
9)<script type="text/javascript" src="/SliderBox/js/jquery.opacityrollover.js"></script>
10)<script type="text/javascript" src="/SliderBox/shadowbox/shadowbox.js"></script>
11)<script type="text/javascript" src="/scripts/jquery.als-1.1.min.js"></script>
12)<script type="text/javascript" src="/scripts/settingsEN.js"></script>
The minified version javascript where having conflict with prototype.js. I just removed the prototype.js file and arranged all reference file in sequence [Sequence matters a lot]
Now the error is removed I was still wondering what was the actual issue with prototype.js ???

Related

formDiv.dialog is not a function [duplicate]

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?
Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>
If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>
Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.
I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.
Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />
I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

Use of jquery noconflict function when including external js libraries and js code files

Does one need to use jquery noconflict() method in the following
situation.
`<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jq180customcode.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript" src="jq171customcode.js"></script>`
The above situation is when we use different jquery libraries in a
single page and load external files with custom code specific to the
the library mentioned above it.
If one does need to use the jquery noconflict method please show how to
use it.
Here jq180customcode and jq171customcode external javascript files contains script functions which are written keeping in mind the external libraries jq-1.8.0 and jq-1.7.1 libraries respectively that is "jq180customcode.js" contains functions specific for the html page which are created in accordance with "jq-1.8.0.js" and "jq171customcode.js" contains functions specific for the html page which are created in accordance with "jq-1.7.1.js". I specifically want to know whether one needs to use jquery.noconflict in these "customcode" files and if one has to use it how?
A much better solution is not to use multiple copies of jQuery on the same page. Just use one. Ideally something more recent than either of those.
But if you really want to:
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jq180customcode.js"></script>
<script>
var jq180 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jq171customcode.js"></script>
<script>
var jq171 = jQuery.noConflict(true);
</script>
Note that it's important that jq180customcode.js grab a copy of the jQuery and/or $ symbol right away and store it. One good way is like this:
(function($) {
// The code here
})(jQuery);
Within The code here, the code can use $ to refer to the jQuery that was present when the code was loaded.
In scripts after all of the above, you'd use jq180 or jq171 depending on which copy of jQuery you want to use.
You could leave one or the other noConflict off, of course, and use jQuery (and $) for the other one. For instance (reordering things slightly):
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jq171customcode.js"></script>
<script>
var jq171 = jQuery.noConflict(true);
</script>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jq180customcode.js"></script>
Now, you'd use jq171 for jQuery v1.7.1 and either jQuery or $ for jQuery v1.8.0.
Here's a live example of using v1.7.1 and v1.8.0:
<input id="btn1" type="button" value="Click to see jQuery v1.8.0 in use">
<br><input id="btn2" type="button" value="Click to see jQuery v1.7.1 in use">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
// Custom v1.8.0 stuff
(function($) {
$("#btn1").click(function() {
$("<p>jQuery version: " + $.fn.jquery + "</p>").appendTo(document.body);
});
})(jQuery);
</script>
<script>
var jq180 = jQuery.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// Custom v1.7.1 stuff
(function($) {
$("#btn2").click(function() {
$("<p>jQuery version: " + $.fn.jquery + "</p>").appendTo(document.body);
});
})(jQuery);
</script>
<script>
var jq171 = jQuery.noConflict(true);
</script>

How do I make this JavaScript work on my local machine?

The code I have below works if it's on my server but when viewed on my local machine it gives me the following errors:
ReferenceError: jQuery is not defined
$(document).ready(function() {
default.html (line 24)
ReferenceError: $ is not defined
$(document).ready(function() {
default.html (line 12)
ReferenceError: $ is not defined
$(document).ready(function() {
CODE:
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="slider/site/style.css">
<script type="text/javascript" src="slider/src/unslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var unslider = $('.container').unslider();
$('.arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.line1').fadeIn(7000);
$('#slide2').delay(1000).fadeIn(3200);
$('#slide3').delay(1800).fadeIn(3200);
$('.line4').delay(4000).fadeIn(3500);
});
</script>
Your script tag is probably giving your browser trouble. Replace "//code.jquery.com/jquery-latest.min.js" with "http://code.jquery.com/jquery-latest.min.js" and it should then work.
Replace
<script src="//code.jquery.com/jquery-latest.min.js"></script>
with
<script src="code.jquery.com/jquery-latest.min.js"></script>
Your code couldn't find jquery.
Add http to
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
this will do the trick
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
//code.jquery.com/jquery-latest.min.js this is pointing to find jQuery in the local server but the script is not available in the local server so chnage this to http://code.jquery.com/jquery-latest.min.js"
You could have also downloaded the latest version and placed it in a js folder under your docroot. Then you could have accessed it with:
<script src="js/jquery-latest.min.js"></script>

jQuery, IE 7 Object doesn't support this property or method

I'm including some lines of Javascript code in a Drupal page with input format as full html.
The script works perfectly in Firefox and Chrome, but IE (7) fails with
'Object doesn't support this property
or method'
this is the exact code I'm inserting in the Drupal page:
<link rel="stylesheet" href="/scripts/gallery/jquery-1.6.1/css/slimbox2.css" type="text/css" media="screen" />
<script type="application/javascript" src="/scripts/gallery/jquery-1.6.1/jquery-1.6.1.js">
<script type="application/javascript" src="/scripts/gallery/jquery-1.6.1/slimbox2.js">
<script type="application/javascript" src="/scripts/gallery/jquery-1.6.1/jquery.EmbedPicasaGallery.js">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery.noConflict();
jQuery("#pics").EmbedPicasaGallery('mygallery',{
matcher: /./,
loading_animation: 'css/loading.gif',
msg_back : 'Back',
size: '85'
});
});
</script>
<div id="pics" />
The javascript error occurrs on this line, at char 2:
jQuery("#pics").EmbedPicasaGallery('mygallery',{
This probably is not a very orthodox way of including a custom javascript in a Drupal page.
How should I do it, and how can I make it work with IE?
I'd suggest transferring the .noConflict() call right after the <script> tag for jQuery, and switching application/javascript to text/javascript (though I'm not really sure about application/javascript --- just never used it before).
<script type="text/javascript" src="/scripts/gallery/jquery-1.6.1/jquery-1.6.1.js">
<script type='text/javascript'>jQuery.noConflict();</script>
<script type="text/javascript" src="/scripts/gallery/jquery-1.6.1/slimbox2.js">
<script type="text/javascript" src="/scripts/gallery/jquery-1.6.1/jquery.EmbedPicasaGallery.js">
<script type='text/javascript'>
jQuery(function($) {
$('#pics').EmbedPicasaGallery({
// blah
});
});
</script>
Also, you may want to double check your matcher variable in the JSON object you pass in. I'm assuming that might be a string you're passing in, so you might have to pass that in as matcher : '/./'.

JQuery Slideshow and MooTools Conflict

I am having a problem with the motools library conflicting with my jQuery library:
Here's the code:
<script language="Javascript" type="text/javascript" src="revamp/js/jquery-1.4.2.js"></script>
<script language="Javascript" type="text/javascript" src="revamp/js/jquery.blinds-0.9.js"></script>
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/_class.viewer.js"></script>
<script type="text/javascript">//<![CDATA[
window.addEvent('domready',function(){
var V5 = new viewer($('boxCont').getChildren(),{
mode: 'alpha',
fxOptions: {duration:500},
interval: 6000
});
V5.play(true);
});
</script>
<script type="text/javascript">
$(window).load(function () {
// start the slideshow
$('.slideshow').blinds();
})
</script>
If I disable mootools, the slideshow work (vice versa with the jQuery). I tried wrapping the jQuery around jQuery.noConflict(); like so:
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
$(window).load(function () {
// start the slideshow
$('.slideshow').blinds();
})
});
</script>
But still the mootools dependent script doesn't work. Please help as I'm not really familiar with jQuery/javascript.
Thanks!
Once you call jQuery.noConflict(), you refer to jQuery via jQuery rather than $. $ is then usable by MooTools or another JavaScript library.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).load(function () {
// start the slideshow
jQuery('.slideshow').blinds();
})
});
</script>
If you want to give jQuery another name, you can do the following:
<script type="text/javascript">
var jq = jQuery.noConflict();
jq(document).ready(function() {
jq(window).load(function () {
// start the slideshow
jq('.slideshow').blinds();
})
});
</script>
You want jQuery.noConflict().
But you don't really need to, because you are using jQuery for your jQuery alias, and you are passing $ as the argument which maps to the jQuery object.
So long as all your jQuery (and jQuery only) happens inside that jQuery(document).ready(), then you can use $ for jQuery and not worry about about clashes.

Categories