Geeks With Blogs
Developers Friendly

Web development involves lot of JQuery usage, where we will get in to situation where we use some specific version of JQuery plug-in to get something work(Example JQuery Date picker Or fancy-box etc). When we use specific version of JQuery plug-in that means there will be a chance that with some specific version of JQuery one thing will work and meanwhile it breaks other part of JQuery. Say where Date picker works and fancy-box will fail to trigger, or even wise versa.

This is something similar to dll HELL problem what we have seen and learnt in .NET. With this blog i am trying to present a sample example about how to handle such JQuery versioning issue.

Example:

 

<script src="../javascript/jquery-1.4.2.min.js" type="text/javascript"></script>    ----For Date-Picker

<script src="../javascript/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>   ---For Fancy-Box

$(document).ready(function () {
           $('#startDate').val(startdt);
            $("#startDate").datepicker({
                dateFormat: 'mm/dd/yy'
            });

});

$(document).ready(function () {
        $(".frame").fancybox({
            type: 'iframe',
            maxWidth: 800,
            maxHeight: 600
        });

});

 

Say script written like this will work fine only for Date-picker, but fails for fancy-box because of versioning issue. Such situation can be handled like,

 

<script src="../javascript/jquery-1.4.2.min.js" type="text/javascript"></script> --- For Date-Picker

<script type="text/javascript">
    $ = jQuery.noConflict(true);
</script>

This will assign JQuery version to $ and that can be used as below,

$(document).ready(function () {
           $('#startDate').val(startdt);
            $("#startDate").datepicker({
                dateFormat: 'mm/dd/yy'
            });

});

It has to be released when that version is no longer needed, like below.

<script type="text/javascript">
    $ = jQuery.noConflict(true);
</script>

 

<script src="../javascript/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>   --- For Fancy-Box

$(document).ready(function () {
        $(".frame").fancybox({
            type: 'iframe',
            maxWidth: 800,
            maxHeight: 600
        });

});

 

OR

This can also be achieved by using a separate variable instead of using “$” like below,

This will assign JQuery version to jqpd variable and that can be used as below,

<script type="text/javascript">
    var jqdp = jQuery.noConflict(true);
</script>

This will assign JQuery version to jqpd variable and that can be used as below,

jqdp(document).ready(function () {
           jqdp('#startDate').val(startdt);
            jqdp("#startDate").datepicker({
                dateFormat: 'mm/dd/yy'
            });

});

If this approach is chosen, then it is not mandatory to release version from jqdp , because unless jqdp is used it wont effect other part of JQuery.

 

Hope this helps anyone!

 

Thanks.

Posted on Thursday, June 6, 2013 12:34 PM jQuery | Back to top


Comments on this post: Handling jQuery versioning issue.

# re: Handling JQuery versioning issue.
Requesting Gravatar...
Nice work...keep writing!! :)
Left by Saurabh Singh on Jun 07, 2013 1:36 AM

Your comment:
 (will show your gravatar)


Copyright © Manjunath K | Powered by: GeeksWithBlogs.net