rickyProgrammer rickyProgrammer - 6 months ago 27
jQuery Question

Conflict in using multiple JQUERY libraries

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?

enter image description here

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

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/

Comments