UI-Sortable directive not works for the drag sorting between the elements on the first drag or first click when using jquery 2.0.0 in Angular js - Resolved

In this article we are going to see a bug, which is present in the jquery,because of that it affects the Angular ui-sortable directive.now let we see about the sorting between the elements by dragging using angular js, To do this we need following references.

<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>

<script type="application/javascript" src="js/jquery-ui.min.js"></script>

<script type="application/javascript" src="js/bootstrap.min.js"></script>

<script type="application/javascript" src="js/angular.min.js"></script>

<script type="application/javascript" src="js/angular-ui.min.js"></script>

  

In this sample we take two different kind of sorting elements, one with static element, another with dynamic elements i.e adding elements at runtime using angular js

Code:

       <div style="float: left; margin: 20px">

            <h3>

                static element</h3>

            <ul ui-sortable="sortoptions" class="well" style="width: 400px">

                <li style="" class="well li">LG</li>

                <li style="" class="well li">Samsung</li>

                <li style="" class="well li">Videocon</li>

                <li style="" class="well li">Onida</li>

            </ul>

        </div>

        <div style="float: left; width: 400px; margin: 20px">

            <h3>

                dynamic element</h3>

            <ul id="sortid" ui-sortable="sortoptions" class="well">

                <li class="well alterli" ng-repeat="item in Items">{{item.name}}</li>

            </ul>

        </div>

Output:

Above dynamic element tag not able to drag and sort on first attempt, because of jquery 2.0.0



From the elements, both can be sort using dragging but there is a one issue with the second element, the second rendered elements can't able to drag on the first attempt, but it can drag and sort in second attempt, this issue only occurs in Jquery 2.0.0 when elements are rendered dynamically using ng-repeat. But it works correctly when using Jquery less than or above 2.0.0, This is working correctly for static declared elements Now we are going to see how to fix this issue, to drag the dynamically rendered elements in the first attempt for jquery 2.0.0 version


Why this issue occurs in dynamically rendered elements ?
           When adding the directive ui-sortable to the root tag, that particular element is rendered first,before the rendering of the child elements, because of this behavior drag is fails on the first attempt, it cant able to recognize the event. on the second attempt it success for the dynamic added elements.

How to fix this issue ?

For dynamic rendered elements,  adding a new directive along with ui-sortable directive, add the directive init-sort which i mention before , it will take care remaining things,now your elements are drag and sortable on the first attempt itself.

Directive: 

        samApp.directive('initSort', function ($compile) {

            return {

                restrict: 'A',

                scope: {

                    initSort: '='

                },

                transclude: false,

                link: function (scope, element, attrs) {

                    var firsttime = 0;

                    element.on('mouseover', function () {

                        if (firsttime == 0) {

                            element.sortable("refresh");

                            firsttime = 1;

                            console.log('Triggered');

                        }

                    });

                }

            };

        });

HTML

        <div style="float: left; width: 400px; margin: 20px">

            <h3>

                dynamic element</h3>

            <ul id="sortid" ui-sortable="sortoptions" init-sort class="well">

                <li class="well alterli" ng-repeat="item in Items">{{item.name}}</li>

            </ul>

        </div>

Output:

Full Code:
HTML 

<body ng-app="samApp">

    <div ng-controller="sampleController">

        <div style="float: left; margin: 20px">

            <h3>

                static element</h3>

            <ul ui-sortable="sortoptions" class="well" style="width: 400px">

                <li style="" class="well li">LG</li>

                <li style="" class="well li">Samsung</li>

                <li style="" class="well li">Videocon</li>

                <li style="" class="well li">Onida</li>

            </ul>

        </div>

        <div style="float: left; width: 400px; margin: 20px">

            <h3>

                dynamic element</h3>

            <ul id="sortid" ui-sortable="sortoptions" init-sort class="well">

                <li class="well alterli" ng-repeat="item in Items">{{item.name}}</li>

            </ul>

        </div>

    </div>

    <script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>

    <script type="application/javascript" src="js/jquery-ui.min.js"></script>

    <script type="application/javascript" src="js/bootstrap.min.js"></script>

    <script type="application/javascript" src="js/angular.min.js"></script>

    <script type="application/javascript" src="js/angular-ui.min.js"></script>

    <script type="application/javascript" src="ang/samApp.js"></script>

</body>

Angular JS

        /**

        * Created by Rajesh on 20-08-2014.

        */

        var samApp = angular.module('samApp', ['ui']);

        samApp.controller('sampleController', function ($scope) {

        $scope.Items = [

                   { name: 'Rajesh' },

                   { name: 'Suresh' },

                   { name: 'Aneesh' },

                   { name: 'Gokul' }

             ];

            

        $scope.sortoptions = {

                update: function (event) {

                },

                stop: function (e, ui) {

                    console.log('stop item', ui.item.scope());

                    console.log('stop item', ui.item.sortable);

                    var item = ui.item.sortable.moved;

                    var fromIndex = ui.item.sortable.index;

                    var toIndex = ui.item.sortable.dropindex;

                    console.log(item, fromIndex, toIndex, $scope.dropTarget);

                },

                start: function (e, ui) {

                    console.log('start item', ui.item.scope());

                }

            };

        });

        samApp.directive('initSort', function ($compile) {

            return {

                restrict: 'A',

                scope: {

                    initSort: '='

                },

                transclude: false,

                link: function (scope, element, attrs) {

                    var firsttime = 0;

                    element.on('mouseover', function () {

                        if (firsttime == 0) {

                            element.sortable("refresh");

                            firsttime = 1;

                            console.log('Triggered');

                        }

                    });

                }

            };

        });

From this post you can see how to drag the elements in the first attempt when JQuery is 2.0.0.

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.