DhavalR DhavalR - 7 months ago 23
Javascript Question

Multiple jQuery versions in one page

I have used

jQuery 1.10
for
datePicker
and
jQuery 1.9
for
TimePicker
(from fgelinas.com).

I used
noConflict();
but not useful. Here is my code.

<link rel="stylesheet" href="~/Content/Admin/time-picker/include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<link rel="stylesheet" href="~/Content/Admin/time-picker/jquery.ui.timepicker.css?v=0.3.3" type="text/css" />

<script src="~/Content/js/jquery.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/include/ui-1.10.0/jquery.ui.position.min.js"></script>
<script type="text/javascript" src="~/Content/Admin/time-picker/jquery.ui.timepicker.js?v=0.3.3"></script>

<script>
$(function () {
$("#datepicker").datepicker();
});
$.noConflict();
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd-mm-yy",
constrainInput: true,
yearRange: "1999:2025",
onSelect: function () {
alert($('#datepicker').val());
}
});
</script>

<div>
<label for="timepicker.[1]">Default time picker :</label>
<input type="text" style="width: 70px;" id="timepicker.[1]" value="" />
<script type="text/javascript">
$(document).ready(function () {
$('#timepicker\\.\\[1\\]').timepicker({
showAnim: 'blind'
});
});
</script>
</div>
<div>
<input type="text" class="form-control" id="datepicker" />
</div>


When I tried to
$.noConflict()
in
timePicker
, it does not let use any of the control. But above code just lets use
datePicker
. When I remove
datePicker
script,
timePicker
runs perfectly. I have to use both of them in one page. Help me with this. Thanks.

Answer

If you read the noConflict documentation there is an option to save the previous jQuery into a variable like this: var j = $.noConflict(); So where you want to use the firstly loaded jQuery version you can use the dollar sign, but if you need the lastly loaded then you need to use j.

In your current code you load the jquery libraries 1.10 first then 1.9 and call the noConflict so the dollar sign is hold the 1.10 jquery version.

<script>
    $(function () {
        $("#datepicker").datepicker();
    });
    var lastJQuery = $.noConflict();
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd-mm-yy",
        constrainInput: true,
        yearRange: "1999:2025",
        onSelect: function () {
            alert($('#datepicker').val());
        }
    });
</script>

<div>
    <label for="timepicker.[1]">Default time picker :</label>
    <input type="text" style="width: 70px;" id="timepicker.[1]" value="" />
    <script type="text/javascript">
        lastJQuery(document).ready(function ($) {
            $('#timepicker\\.\\[1\\]').timepicker({
                showAnim: 'blind'
            });
        });
    </script>
</div>