使用多个JQUERY库时发生冲突

Question

在我的Web应用程序中，我有一个日期选择器jquery，一切正常，直到添加了引用不同库的新jquery代码。 该Jquery的目的是修复gridview标头。

添加此代码后，日期选择器停止工作。 是什么引起冲突？

这是代码

1. DatePicker JQuery位于外部JS文件中

  $(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修复gridview标头。 添加此选项后，日期选择器功能停止工作。

<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

问题是由于init()函数的定义冲突。 在这两个文件中，您使用了相同的名称。 尝试重命名其中之一，您的问题应该已解决。

编辑：尝试将第二个片段更改为以下内容：

<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>

Answer 2

我已经找到答案了。 根据研究，可以通过使用jquery.noConflict（）代码来使用多个Jquery代码或库。

Datepicker的javascript

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/