Jquery Conflict issue for Calendar and Quicksearch

Question

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.

Answer 1

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.