Question

在我的Web应用程序中，我有一个datepicker jquery，一切正常，直到我添加了一个引用不同库的新jquery代码。这个Jquery的目的是固定gridview标题。

添加此代码后，datepicker停止工作。什么可能导致冲突？

以下是代码

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标题。 添加后，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

问题是由于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代码或库可以使用jquery.noConflict（）代码完成。

适用于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
                    });

                });

            }
        });
    };

for gridview header

 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/

使用多个JQUERY库时发生冲突

2 个答案: