Jquery Conflict issue for Calendar and Quicksearch - javascript

I am using the Jquery plugins for some functionaltiy like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
The above jquery i am using is for the Calendar datepicker, and the below jquery is i am using for is Quick search.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/quicksearch.js"></script>
When I use both the Jquery library, the quciksearch functionality stops working, and Calendar Datepicker works fine. But when I remove the below plugins:-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
I tried removing the older version of jquery for working both, but it is not working. Please help.

I had some problems with jQuery before (I had a plugin that worked only with older versions of jQuery).
The UI version your're using is probably incompatible with jQuery 1.11, check the UI site, now it's on version 1.11.12 I think. For now ignore QuickSearch plugin, update the UI and jQuery and just try to make the DatePicker work again.
In case QuickSearch doesn't work with jQuery 1.11 you can try these options:
First, you can try to add the jQuery Migrate plugin and test this again
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Case the above doesn't work, you can use the jQuery.noConflict option.
First you put the older version of jQuery and the call for its plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/quicksearch.js"></script>
<script type="text/javascript">
var jqQuick = jQuery.noConflict(true);
jqQuick(document).ready(function () {
jqQuick('input#search').quicksearch('table tbody tr');
});
</script>
And then you call the jQuery supposed to be used in the entire project.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
So after doing this, when you need to use the older version of jQuery you're going to use jqQuick instead of $ and in the rest of the project you can use $ which is going to use jQuery 1.11 instead of 1.6.
Edit: After talking at the chat with Rahul we could check that even while using jQuery 1.11 he was still using jQuery UI for jQuery 1.6. We updated the UI to 1.11.12 and it worked fine.

Related

Bootstrap datetimepicker with multiple versions of jQuery

The project I'm working on has several version of jQuery being used. I am including the bootstrap-datetimepicker module, and it seems to be automatically associating itself with one of the older versions of jQuery, and I'm not sure why. This is what I have
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/moment.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script src="https://code.jquery.com/jquery-1.8.2.min.js" integrity="sha256-9VTS8JJyxvcUR+v+RTLTsd0ZWbzmafmlzMmeZO9RFyk=" crossorigin="anonymous"></script>
<script type='text/javascript'>window.jq182=$.noConflict();</script>
If I try to use $("#something").highcharts() I get
$(...).highcharts is not a function(…)
But if I use jq182("#something").highcharts() it works. Why is that? I would assume that it'd associate itself with the current version.
If I try to use $("#something").highcharts() I get $(...).highcharts is not a function(…), but if I use jq182("#something").highcharts() it works. Why is that?
It's up to the order of jQuery libraries you have:
including first the jQuery V2.2.3 and after the version V1.8.2 the $ sign is assigned to the V2.2.3 instead of the other version. So, if your highcharts library is included after the two jquery libraries you have:
$(function () {
$("#something").highcharts();
});
where, the document ready is a jQuery V2.2.3 function but your highcharts has been created with the version V1.8.2.
You may test by yourself this simply adding a console log message of the simbol $ when you are in the document ready and when you are inside the highcharts function.
To avoid this you may:
use noConflict
include highcharts before including the jQuery V1.8.2
instead of using the symbol $ you may use directly the word jQuery
As you said this is a confused way to use the libraries.
From Highcharts source code:
if (win.jQuery) {
win.jQuery.fn.highcharts = function() {
in order to see the version of the jQuery library used according to the order you used.

Jquery slider doesn't work with own jQuery variable

I am creating a widget that will eventually sit on a clients site, and I need to create my own jQuery variable, so that the jquery versions don't conflict. Currently I have the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script> // My jQuery.
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
Everything else works just fine, but jQuery slider stopped working when I changed to my own jquery:
TypeError: $sf_jquery(...).slider is not a function
Is the problem with the jQuery slider, or am I missing something else here?
Good plain javascript slider -tips are welcome as well!
Edit: Everything the widget needs, is inside function call like this:
$sf_jquery(function(){ // all of the code here });
Edit: The jQuery Ui is imported aswell. Just forgot to add it here. The importing looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> // Clients own jquery.
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
Edit, Solution!
Dummy me didn't think that the slider isn't part of the native jQuery. The noConflict must be after the jQueryUI, like this:
<script type="text/javascript" src="sf_content/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="sf_content/js/jquery-ui.min.js"></script>
<script type="text/javascript">
var $sf_jquery = $.noConflict(true);
</script>
You aren't including jQueryUI code (at least in your example).
Slider is part of jQueryUI and is not native to jQuery alone. (https://jqueryui.com/slider/)
Your "noconflict" function must be called before the second jQuery call.

Plugins with different jQuery versions

In current implementation there is old version of jquery (1.7.x) and old plugin depends on this version of jquery.
And now I want to add new jQuery plugin which require latest jquery verson, but can not remove the old version of jquery as there will be lots of changes.
Can we use different jquery versoin for new plugin without conflict?
I am trying following solution, but does not work.
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
$(document).ready(function () {
$("#element").flexModal();
});
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8 = $.noConflict(true);
jQuery_1_8(document).ready(function () {
jQuery_1_8("#element2").flexModalLatest();
});
</script>
Plugins names are just for this code demo.
Alternatively you can use new jQuery (1.11 and up) with an official jQuery migrate plugin to support deprecated/removed functions.
http://jquery.com/download/#jquery-migrate-plugin
try this :
<!-- load jQuery 1.7.2 -->
<script type="text/javascript" src="http://example.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var jQuery_1_7_2 = $.noConflict(true);
</script>
<!-- load jQuery 1.8.3 -->
<script type="text/javascript" src="http://example.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1.8.3 = $.noConflict(true);
</script>
instead of
$('#selector')....;
you'd do
jQuery_1_7_2('#selector')....;
or
jQuery_1_8_3('#selector')....;
https://api.jquery.com/jQuery.noConflict/
After reading the docs, I think you're using it back-to-front - after loading the second jquery version, use var jQuery_1.7.2 = $.noConflict() to get reference to the original older version.

JotForm conflict with JQuery

I am trying to use JQuery datepicker along with Jotform in my html page.
but it seems that jquery and jotform dont get along after all .
<script type="text/javascript" src="js/jquery.min.1.8.3.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
If i eliminate first line of above code the jotform works fine and if i eliminate the second line and keep first line the datepicker will work fine. (Jotform is an online form builder)
There is a conflict record since 2011 but i cant find if that is solved or not.
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
The following is part of the section of my code
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax_load.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
<link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" />
Any tip and help will be highly appreciated
Ok, this is too large to explain in a comment:
Using jQuery noConflict mode
http://api.jquery.com/jQuery.noConflict/
First, add the noConflict script after loading jQuery:
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This way the $ function is "free" again so other lib can use it (the same name can't be used by two libraries, it's a global var so shit is going to happen).
Well, now on we won't be using $ for jQuery. If you want to use jquery, the new magic word is jQuery (yeah, very original), for example:
jQuery("#menu").show();
So, if you have to use datepicker, just replace $ with jQuery. For example:
jQuery('#startDate').datepicker({
showButtonPanel: true
});
Remember, the keyword $ is no longer attached to jQuery. So you have to use jQuery everywhere. Or you can also use a new alias, for example if you think jQuery is too large:
var j = jQuery.noConflict();
//and now we are going to use it:
j("#menu").show();
There are more examples here: http://api.jquery.com/jQuery.noConflict/
Just use self calling anonymous function and pass jQuery and catch it as $ in your code such as :
(function($){
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
})(jQuery);
and modify jquery script inclusion as such(same as TheBronx suggested):
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This is the only way that uses minimal code change. Thanks.

Jquery library conflict with another jQuery library

I am using a lot of jQuery libraries in my application.
My application is based on a map, and the map is generated by my own server mapmyindia.com.
The problem is that there is a jQuery conflict that occurs when I use fancybox jQuery library, pagination jQuery library and drop-down checklist jQuery library, all work together.
My direction search API's don't work because of a jQuery library conflict.
However, if I remove all the jQuery libraries, I can use my direction search API
just fine.
With the jQuery libraries enabled, it gives me an error:
$.jsonp is not a function
My application is on app.mapmyindia.com/michelin please help me.......
<script>MIREO_RESOURCES_ROOT = "http://46.137.254.191/MapServer/";</script>
<script type="text/javascript" src="http://46.137.254.191/MapServer/MireoWebMap.js"></script>
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
<script type="text/javascript" src="jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui.dropdownchecklist-1.4-min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css?v=2.0.6" media="screen"/>
Try to use jquery noConflict() and download the latest version of jquery that resolve some problems conflict
try this :
use jquery noconflict and wrap your code in jQuery functions :
http://api.jquery.com/jQuery.noConflict/
jQuery.noConflict();
jQuery(function($){
// my code here each
});
good luck.
The order in which you have declared your javascript, that is importing your MapmyIndia Js first, using it
<script type="text/javascript">
var map = $("#map");
var valid = new Validation();
map.MireoMap();
</script>
& then calling jQuery, I don't think so jQuery would be creating problem.
Also you should be using
var map=document.getElementById("id");
since you are calling jQuery after that so $() won't work.
EDIT : Or if the MayMyIndia Js also requires jQuery then you should call jQuery.Js on top.

Categories

Resources