views:

18

answers:

0

I have connected two lists with Sortable. I have one list that contains available items to move to the real list that contains a list of ordered items. My goal is to take an item from one list and move it to the second. When dropped into position in the new list the update event will fire off a json update to the database.

The issue arises when you drop the item then the: $("#sortable2").sortable({items: 'li'}).sortable('toArray') fires off. I then get the Error: 'this.placeholder.0' is null or not an object message.

Now in the receiving list I can still move items to resort them and when the update event fires all is well as long as I did not drop a new item into the list.

I have found and tried to apply the bug fix from http://dev.jqueryui.com/ticket/6054 where it indicates to replace:

this.placeholder[0].parentNode.removeChild(this.placeholder[0]);

with

if(this.placeholder[0].parentNode)
this.placeholder[0].parentNode.removeChild(this.placeholder[0]);

Additonal details: I discovered a bit closer that the error is being caused when I get a json error back and I try to $("#sortable2").sortable('cancel'); I guess now I will need to find out how to do a cancel when I have moved data into the list from another list.

That fix did not work. Does anyone know how to fix this?

Does anyone know how to revert 2 lists back to the original with 'cancel' if there is an error of some sort? The cancel is what is throwing the error.

My code:

$(function() {
            $("#sortable2").sortable({
                connectWith: '.connectedSortable'
                ,
                placeholder: 'ui-state-highlight'
                ,
                items: 'li:not(.ui-state-disabled)'
                ,
                receive: function(event, ui) {

                },
                remove: function(event, ui) {

                },
                update: function() {
                    $("#sortable2").sortable("refreshPositions");
                    //updateCycleSort();
                }
            })

            $("#sortable1").sortable({
                connectWith: '.connectedSortable'
                ,
                placeholder: 'ui-state-highlight'
            })

            $("#sortable1 li, #sortable2 li").disableSelection();
        });

        function updateCycleSort() {

            alert($("#sortable2").sortable({items: 'li'}).sortable('toArray'));
            $.ajax({
                type: "POST",
                url: updateCycleSortUrl,
                data: "cycles=" + $("#sortable2").sortable({items: 'li'}).sortable('toArray'),
                dataType: "json",
                success: function(response, textStatus, XMLHttpRequest) {
                    if (response.error == "false") {
                        //$('div#resultRecordDetail').html(response.message);
                        //$('div#resultRecordDetail').addClass('success');
                        //autoHide(2500);
                    }
                    else {
                        $("#sortable2").sortable('cancel');
                        alert("error");
                    }
                },
                error: function(response, textStatus, AjaxException) {
                    alert("BIG error " + response.statusText);
                    //$('div.dialog-result').html(response.statusText);
                    //$('div.dialog-result').addClass('error').show();
                    //autoHide(10000);
                }
            });
            return false;
        }