nestedSortable text id

Question

I'm using the jQuery plugin http://mjsarfatti.com/sandbox/nestedSortable/ for nested sortables but am having issues witht he ID.

I've realized that whenever I set the ID of an <li> element in nestedSortable, the output using toArray, toHierarchy or serialize return null.

            <ol class="sortable">
            <li id="list1"><div>A</div>
                <ol>
                    <li id="list2"><div>1</div></li>
                    <li id="list3"><div>2</div></li>
                    <li id="list4"><div>3</div></li>
                    <li id="list5"><div>4</div></li>
                </ol>
            </li>
            <li id="list6"><div>B</div>
                <ol>
                    <li id="list7"><div>1</div></li>
                    <li id="list8"><div>2</div></li>
                </ol>
            </li>
        </ol>
        <script type="text/javascript">
            $(document).ready(function(){

                $('.sortable').nestedSortable({
                    handle: 'div',
                    items: 'li',
                    toleranceElement: '> div',
                    update: function() {
                        list = $(this).nestedSortable('toHierarchy');
                        $("#abc").html(JSON.stringify(list));
                    }
                });

            });
        </script>
        <pre id="abc"></pre>

The output I get is [null,null]. Is this some kind of restriction or is there a way around this?

Answer 1

Your ID attributes should include an underscore.

Change id="list1" to id="list_1" and so on.