Conflict in using multiple JQUERY libraries

Question

In my web application, I have a datepicker jquery, Everything works well, until I added a new jquery codes referencing a diffrent library. This Jquery's purpose is to fixate a gridview header.

After I added this code, the datepicker stopped working. What could be causing the conflict?

Here are the codes

1. DatePicker JQuery locatred in external JS File

  $(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 to fix gridview header. After adding this the the datepicker feature stopped working.

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

upon checking the browser console to locate the error, here is the reason:

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

Answer 1

The issue is due to conflict in definition of init() function. In both the files, you have used the same name. Try renaming one of them and your issue should be fixed.

Edit: Try changing the second snippet to the following:

<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

I already found the answer. Based on research, using multiple Jquery codes or libraries can be done by using jquery.noConflict() code.

javascript for Datepicker

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()
    });

just create a variable that will be assigned with a jquery.noconflict() function. then replace all $ with the created variable per javascript. then it will work already.

reference: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/