複数のJQUERYライブラリを使用する際の競合

Question

Webアプリケーションでは、datepicker jqueryを使用しています。すべてがうまく動作し、別のライブラリを参照する新しいjqueryコードを追加するまでです。このJqueryの目的は、グリッドビューヘッダーを固定することです。

このコードを追加した後、datepickerは機能しなくなりました。紛争の原因は何ですか？ここ

はGridViewのヘッダを修正する

$(function() { 
      $("#txtdatefrom").datepicker(); 
     }); 


     $(function() { 
      $("#txtdateto").datepicker(); 
     }); 


     window.onload = function() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 
     } 

     function endRequestHandler(sender, args) { 
      init(); 
     } 

     function init() { 
      $(function() { 
       $("#txtdatefrom").datepicker(); 
      }); 


      $(function() { 
       $("#txtdateto").datepicker(); 
      }); 
     } 


     $(function() { // DOM ready 
      init(); 
     }); 

3 jqueryのファイル日付ピッカーjQueryの外部JSでlocatredコード

1です。 これを追加すると、datepicker機能が機能しなくなりました。エラーを見つけるために、ブラウザのコンソールをチェックする時に

<script type = "text/javascript"> 
    //not needed kasi it produced double scrolls, pero pwede din e.. ewan 
    $(document).ready(function() { 
     $('#<%=grdWSR.ClientID %>').Scrollable({ 
     ScrollHeight: 300 
     }); 
     }) 


     window.onload = function() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 
     } 

     function endRequestHandler(sender, args) { 
      init(); 
     } 

     function init() { 
      $(document).ready(function() { 
       $('#<%=grdWSR.ClientID %>').Scrollable({ 
       ScrollHeight: 300 
      }); 
     }) 
    } 

    $(function() { // DOM ready 
     init(); 
    }); 

</script> 

、ここに理由です：

jquery-ui-1.8.19.custom.min.js:5 Uncaught TypeError: Cannot read property 'ui' of undefined 

Answer 1

私はすでに答えを見つけました。研究に基づいて、複数のJqueryコードまたはライブラリを使用するには、jquery.noConflict（）コードを使用します。日付ピッカー

var $152 = jQuery.noConflict(); 
$152(function() { 

    $152("#txtdatefrom").datepicker({ 
     changeMonth: true, 
     changeYear: true 
    }); 


//On UpdatePanel Refresh 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    if (prm != null) { 
     prm.add_endRequest(function (sender, e) { 
      if (sender._postBackSettings.panelsToUpdate != null) { 
       $152(function() { 

        $152("#txtdatefrom").datepicker({ 
         changeMonth: true, 
         changeYear: true 
        }); 

       }); 

      } 
     }); 
    }; 

GridViewのヘッダー

var $151 = jQuery.noConflict(); 

    //not needed kasi it produced double scrolls, pero pwede din e.. ewan 
    $151(document).ready(function() { 
     $151('#<%=grdWSR.ClientID %>').Scrollable({ 
      ScrollHeight: 300 
     }); 
    }) 

    window.onload = function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 
    } 

    function endRequestHandler(sender, args) { 
     init(); 
     //fixGridHeader(); 
    } 

    function init() { 
     //function fixGridHeader() 

     $151(document).ready(function() { 
      $151('#<%=grdWSR.ClientID %>').Scrollable({ 
       ScrollHeight: 300 
      }); 
     }) 

    } 


    $151(function() { // DOM ready 
     //fixGridHeader() 
     init() 
    }); 

ため

ジャバスクリプトだけjquery.noconflict（）関数で割り当てられる変数を作成します。すべての$をjavascriptごとに作成された変数に置き換えます。それはすでに動作します。

参照：https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

Answer 2

問題がinit()関数の定義における紛争によるものです。両方のファイルで、同じ名前を使用しています。それらの名前を変更してみて、問題を修正する必要があります。

編集：以下に2つ目のスニペットを変更してみてください：

<script type = "text/javascript"> 
    //not needed kasi it produced double scrolls, pero pwede din e.. ewan 
    $(document).ready(function() { 
     $('#<%=grdWSR.ClientID %>').Scrollable({ 
     ScrollHeight: 300 
     }); 
     }) 


     window.onload = function() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler); 
     } 

     function endRequestHandler(sender, args) { 
      fixGridHeader(); 
     } 

     function fixGridHeader() { 
      $(document).ready(function() { 
       $('#<%=grdWSR.ClientID %>').Scrollable({ 
       ScrollHeight: 300 
      }); 
     }) 
    } 

    $(function() { // DOM ready 
     fixGridHeader(); 
    }); 

</script>