I have loaded two jQuery versions on my page;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var jq = jQuery.noConflict();</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I am trying to use the Autocomplete plugin from https://github.com/devbridge/jQuery-Autocomplete/ (it doesn't work with 1.4.2) so I have to add 1.9.1 jQuery version.
I cannot remove 1.4.2 at all, as removing so breaks my existing code.
I have tried changing the order of the libraries but no luck.
FYI jq("#elem").hide(); etc. works and other jQuery native stuff. but when I use it to bind autocomplete plugin, it fails driving me crazy;
binding as jq('#searchbox').autocomplete(); the error I see in console is
TypeError: jq(...).autocomplete is not a function
PS: I have also tried <script>var jq = jQuery.noConflict(true);</script> without success.
Thank you for any help!
Does this work you. I got no error on this.
jq('#autocomplete').autocomplete({});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = $.noConflict(true);
</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="text" name="country" id="autocomplete"/> no error
In my HTML I have the following scripts in the header:
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="js/caman.full.js"></script>
and in my Javascript file (scripts.js) I tried to do the following code snippet:
Caman("#myImage", function () {
this.brightness(5);
}
As the title says, I get the error Caman was used before it was defined. I'm not sure if there's something obvious that I'm missing or doing incorrectly, but any advice would be appreciated.
The Caman script needs to be included first like this:
<script type="text/javascript" src="js/caman.full.js"></script>
<script type="text/javascript" src="scripts.js"></script>
Then in your script you are missing the last );:
Caman("#myImage", function () {
this.brightness(5);
});
If that doesn't work there may be something else in your code that is causing problems.
I am trying to use date picker of jquery in mvc4.
It was giving me error:
Uncaught TypeError: undefined is not a function
My jQuery function is like:
$(document).ready(function () {
$('#dpFrom').datepicker();
});
html part is like:
<input type="text" id="dpFrom" />
I refered :
Uncaught TypeError: undefined is not a function while using jQuery UI
And included :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
So total javascript became:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#dpFrom').datepicker();
});
</script>
Still its giving me error.
Please help...
I think that you have a duplicate jQuery reference. Could you open a "View Source" on your web browser and enumerate your jQuery references? It is a common error and easily missed. Maybe a bundle definition or your layout and content pages have the same reference.
The path should be https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js not //ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js in both referencing script and css tags
<script type="text/javascript">
$( "#datepicker" ).datepicker();
</script>
I tried this one, when i erase the function().
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 ???
I Have usercontrol and i registered the following javascript method in code behind :
changeSelectedMenu(controlID);
the previous method is declared in JScript.js file so i registered it also .
but the following exception has been thrown :
Microsoft JScript runtime error: Object expected
The result page is :
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
changeSelectedMenu('ctl00_ctl00_cntMain_procedureContentHolder_procedureMenu_appointmentsLink');//]]>
</script>
Is There anyone can help me to workaround this issue???
These aren't valid paths to your JavaScript:
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/JScript.js" type="text/javascript"></script>
They need to be relative to the page or to the site root, for example:
<script src="/Scripts/JQuery.js" type="text/javascript"></script>
<script src="/Scripts/JScript.js" type="text/javascript"></script>
While ~/ works for resolving a path on the server-side, the browser doesn't know how to handle this. There are some other work-arounds in this question for making it work and still being app-relative.