Friday, 13 December 2013

JQuery Bug in Attr() function replace with Prop() function

This article reveals about the some Jquery function usage and the bug present in it, and how to resolve the bug and get the solution what we need ?


I have decide to do a some Test in Jquery by a sample having a TextArea and a checkbox. when i scroll the textbox from the top  to the bottom , checkbox should be enabled and checked, It the user scrolls upwards then automatically checkbox should be disabled and unchecked. To do this we are code it in Scroll function of text area like below


HTML:


<html>
<head>

    <title></title>
    <link  rel="Stylesheet" href="StyleSheet1.css" />
    <script type="text/javascript" src="jquery-1.9.1.intellisense.js">
    </script>
    <script type="text/javascript" src="jquery-1.9.1.js">
   </script>   
   <script type="text/javascript" src="jquery-1.9.1.min.js">
    </script>


<script type="text/javascript" >

    $(document).ready(function () {

        $('#agree').attr('disabled', true);
        $('#agree').attr('checked', false);


        var scrollheight = $('#area')[0].scrollHeight;
        var innerheight = $('#area').innerHeight();

        $('#area').scroll(function () {


            var scrollposi = $(this).scrollTop();

            var remaim = scrollheight - innerheight;
            $('#feed').text(Math.ceil(remaim));
            // alert(scrollposi);
            if (remaim <= scrollposi) {

                $('#agree').attr('disabled', false);
            }
            else {

                $('#agree').attr('disabled', true);
            }

        });


    });
</script>


</head>
<body align="center">
<div id="feed">dd</div>
<textarea id="area" cols="50" rows="30">
<!-- <textarea id="terms" rows="20" cols="50"> -->
<p>YouTube was founded by Chad Hurley, Steve Chen, and Jawed Karim, who were all early employees of PayPal.[7] Hurley had studied design at Indiana University of Pennsylvania, and Chen and Karim studied computer science together at the University of Illinois at Urbana-Champaign.[8]
According to a story that has often been repeated in the media, Hurley and Chen developed the idea for YouTube during the early months of 2005, after they had experienced difficulty sharing videos that had been shot at a dinner party at Chen's apartment in San Francisco. Karim did not attend the party and denied that it had occurred, but Chen commented that the idea that YouTube was founded after a dinner party "was probably very strengthened by marketing ideas around creating a story that was very digestible".[9]
Karim said that the inspiration for YouTube came from Janet Jackson's role in the 2004 Super Bowl incident, when her breast was exposed during her performance, and from the 2004 Indian Ocean tsunami. Karim could not easily find video clips of either event online, which led to the idea of a video sharing site.[10] Hurley and Chen said that the original idea for YouTube was a video version of an online dating service, and had been influenced by the website Hot or Not.[11][12]
</p>
</textarea>
<p><input type="checkbox" id="agree"  /> : Agree</p>
</body>
</html>




Now the Bug is when you scroll down and reaches the last position of scroll checkbox is checked and when you move up the checkbox is disabled and unchecked . But when you scroll again second time to the last position of scroll the checkbox is not enabled. Because attr function is not working in JQuery version above 1.9 but working in below version it can be resolve by replace with prop functiopn


       $('#area').scroll(function () {


            var scrollposi = $(this).scrollTop();

            var remaim = scrollheight - innerheight;
            $('#feed').text(Math.ceil(remaim));
            // alert(scrollposi);
            if (remaim <= scrollposi) {

                   $('#agree').prop('checked'true);
            }
            else {

                  $('#agree').prop('checked'false);
            }

        });


              

Change in the function attr to prop makes the functionality to work correctly.This bug may be fixed in the future versions


I hope this article will make you to aware of using correct functions in JQuery.


No comments:

Post a Comment