I need to use both below files but just one of the can work if both of the use in pae
<script src="jquery.min.js"></script>
<script src="jquery-1.min.js"></script>//just this work
Or if change order
<script src="jquery-1.min.js"></script>
<script src="jquery.min.js"></script>//just this work
I use a drag and drop plugin , this need jquery.min.js and my theme need to jquery-1.min.js for be responsive
You should be able to do this when you use noConflict.
<!-- load jQuery-1 -->
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">
var jQuery_1_min = $.noConflict(true);
</script>
<!-- load jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var jQuery_min = $.noConflict(true);
</script>
Now whenever you need one of these files you can do this.
//example
$jQuery_min('.selector').live('click', function(){
//do something
});
If it still wont work I dont know anymore... This is the way everybody does it. Quick google search.
I am using multiple jquery libraries in my website.
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_11_3 = $.noConflict(true);
</script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/legalzoom-marketplace/js/touch.js"></script>
I use Jquery 1.7.2 to make Jquery sortable work for mobile as per this. Because of this my bootstrap JS is not working, I have added the below code to remove make bootstrap work.
var jQuery_1_11_3 = $.noConflict(true);
and I am trying to show modal using
jQuery_1_11_3('.modal').modal('show')
but it doesn't seem to work. It throws the error below Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher. Any help will be much appreciated.
You must agree that You're doing wrong. Better to find and fix issue, than play with 2 big libraries.
I'm not sure but hope it helps:
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var jQuery_1_7_2 = $.noConflict();
</script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var jQuery_1_11_3 = $.noConflict();
</script>
<script type="text/javascript">
(function($) {
$(function(){
// some other operations
});
}(jQuery_1_7_2));
</script>
<script type="text/javascript">
(function($) {
$(function(){
$('.modal').modal('show');
});
}(jQuery_1_11_3));
</script>
Reference: https://api.jquery.com/jquery.noconflict/
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.
When I add Jquery FancyBox script the reviews on Yotpo would disappear.
Here's the script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
but when i removed the above script, the yotpo reviews will appear.
I'm using Bigcommerce.
I manage to solved my issue using jQuery.noConflict. I just put the noConflict code after the conflict script.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script>jQuery.noConflict();</script>
Then always call jQuery with the whole word instead of the $ sign.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".iframe").fancybox({
//codes
});
});
</script>
Let me first say I am very unfamiliar with javascript, but I am trying use twitter's twipsy (http://twitter.github.com/bootstrap/javascript.html), their take on jQuery's tipsy.
Here are all the scripts that are getting loaded:
<script src="/javascripts/effects.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/controls.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/rails.js?1314051118" type="text/javascript"></script>
<script src="/javascripts/bootstrap-twipsy.js?1326303918" type="text/javascript"></script>
<script src="/javascripts/application.js?1314051118" type="text/javascript"></script>
As you can see, bootstrap-twipsy.js is getting loaded.
Then on an index.html.erb page I am trying the following code:
<a href="#" id="example" rel='twipsy' title='Some title text'>text</a>
<script>
$(function() {
$('#example').twipsy();
$("a[rel=twipsy]").twipsy({
live: true
});
})
</script>
I get nothing. The reason I have the ('#example').twipsy in there is that I was just trying to call it two different ways, but neither worked. Does anyone see what I'm doing wrong?
In a similar question (http://stackoverflow.com/questions/4916501/where-to-put-my-js-for-tipsy-jquery-tooltip) someone found that their prototype.js was causing conflicts, but I've removed that and I still got nothing.
Installing jquery-rails did the trick