Search code examples
jqueryjquery-ui-sortablenested-sortable

Using revert inside beforeStop() causes error - how to fix?

I have a nestedSortable list in which I'm disallowing the nesting of items with the same name (could be id, whatever). I'm using the beforeStop() method to get the name of the current element and the name of its parents parent (because when it's nested, it gets the form:)

<ol class="sortable">
    <li><div id="1">Item</div>
        <ol>
            <li>
                <div id="2">Item</div>
            </li>
        </ol>
    </li>
</ol>

Notice that I'm using the div element as the handle. My code to initialize the nestedSortable is

 $('ol.sortable').nestedSortable({
        disableNesting: 'no-nest',
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        maxLevels: 5,
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        beforeStop: function(event, ui){ // disallows two elements with the same part number from nesting
            var thisName = ui.item[0].firstChild.innerHTML;
            var parentName = ui.item[0].parentElement.parentElement.firstChild.innerHTML;
            if (thisName == parentName){
                $(this).sortable('cancel');
            }
        }
    });

This code does work to disallow nesting of items with the same name, and if I console log the moved element and its grandparent, I can see that I'm referencing the correct elements. However, I also get the following console error after calling sortable('cancel'), which naturally blows up IE:

Uncaught TypeError: Cannot call method 'removeChild' of null 

jquery-ui-1.8.12.custom.min.js

d.widget._clear 

jquery-ui-1.8.12.custom.min.js:269

$.widget.$.extend._clear

 jquery.ui.nestedSortable.js:305

d.widget._mouseStop 

jquery-ui-1.8.12.custom.min.js:237

f.extend.speed.d.complete 

jquery.js:4

f.fx.step

jquery.js:4

h

jquery.js:4

f.extend.tick 

jquery.js:4

Can someone give me some tips on how to debug this? Or is there an alternate way you would recommend? I'm using the latest version, 1.3.4, and jQuery 1.7.1.

Solution

  • Use stop() instead of beforeStop().