As far as I can understand jQuery are conflicting. how can I solve the jQuery conlicts as for "bootstrap.min.js" "jquery.min.js" is needed. Here is my code:

<link href = ".10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = ".10.2.js"></script>
<script src = ".10.4/jquery-ui.js"></script>

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

<link rel="stylesheet"  href=".3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">
<script src=".2.0/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>

As far as I can understand jQuery are conflicting. how can I solve the jQuery conlicts as for "bootstrap.min.js" "jquery.min.js" is needed. Here is my code:

<link href = "https://code.jquery./ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery./jquery-1.10.2.js"></script>
<script src = "https://code.jquery./ui/1.10.4/jquery-ui.js"></script>

<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });
</script>

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

• javascript
• jquery

Share Improve this question Follow edited May 6, 2017 at 17:21 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked May 6, 2017 at 17:17 proggaprogga 1111 gold badge11 silver badge44 bronze badges 1

• how can I solve the jQuery conlicts declare only once each requiered libray on top of your page, ie: in header – OldPadawan Commented May 6, 2017 at 17:23

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Use the noConflict Option. Check the attached snippet

<link href = "https://code.jquery./ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery./jquery-1.10.2.js"></script>
<script src = "https://code.jquery./ui/1.10.4/jquery-ui.js"></script>


<script>
    var jqOld = jQuery.noConflict();
    jqOld(function() {
        jqOld("#datepicker" ).datepicker();
    })
</script>

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

<input id = "datepicker"/>

The problem is because you're loading two different versions of jQuery, 1.10.2 and 3.2.0. Due to the order they are added to the page the second instance doesn't have the jQueryUI methods.

While it's possible to include multiple versions of jQuery in a page it should be avoided where possible as it's not a maintable solution. To fix the problem you should change your code to use a single instance of jQuery, like this:

<link href="https://code.jquery./ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="doctor.css">

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery./ui/1.10.4/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  $(function() {
    $("#datepicker").datepicker();
  });
</script>

You can call var jquery_version = jQuery.noConflict() after the jQuery script tag is loaded and use it later using jquery_version. jQuery documentation

you attached two jquery files & 2 jquery ui files, remove one