在asp.net页面中使用jQuery时如何解决冲突

Question

Below is the references and script I am using in the same page for date time picker and colour box. Only either one of them works when commenting the other script referenced. I thought it may be due to conflict to used jQuery noconflict. But this didn't help.

How can this be solved ?

        <%--DATE AND TIME PICKER--%> 
       <%-- <link rel="stylesheet" href="../Uploadedfiles/System/Scripts/jquery-ui.css" />
        <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui.min.js" type="text/javascript"></script> 
        <script src="Scripts/jquery-ui-timepicker-addon.js" type="text/javascript"></script>
        <script src="Scripts/jquery-ui-sliderAccess.js" type="text/javascript"></script>--%>

        <%--COLOR BOX--%> 
        <link rel="stylesheet" type="text/css" href="css/colorbox/colorbox.css" media="screen, projection" />
        <script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
        <script src="js/jquery.colorbox.js" type="text/javascript"></script>


<script type="text/javascript"> 
        jQuery(document).ready(function ($) {
            $("[id*=txtfromdate]").datepicker();
            $("[id*=txttodate]").datepicker();
            $("[id*=txtClosingDate]").datepicker();

            $("[id*=txtTimestart]").timepicker({
                timeFormat: "hh:mm tt"
            });

            $("[id*=txtTimeend]").timepicker({
                timeFormat: "hh:mm tt"
            }); 
        });

</script>


<script type="text/javascript">
        function colorbox() {
            var hv = $("[id*=txt_Messsage]").val();
            $.colorbox({ width: "50%", height: "30%", html: hv })
            alert(hv);
        }
</script> 

Answer 1

Yes, As you have suspected correctly, it might be the situation that some of the functions might be present in two of your JQuery files that might have been creating that conflict.

Solutions: 1) Try to identify which of the function is common between your jQuery files Or else Try to use a single jQuery file and copy the additional functions that you need to one of the jQuery files. 2) else use jQuery.noConflict(); inside

this jQuery(document).ready(function ($) {

Cheers!!!!

Answer 2

Use $.noConflict(); before the code that might create conflict

Refer this link

Answer 3

As an addition to others answers ,

Once you do : $.noConflict(); you are back to jQuery ( and not to the dollar sign)

But you can also do :

var _=$.noConflict(); 

And now you can use _("#myId")...

NB you might need the overload :

jQuery.noConflict( [removeAll ] )

A Boolean indicating whether to remove all jQuery variables from the global scope (including jQuery itself).