Doesn't work for dynamic elements

[pushpinderbagga]

Hey Johnny,

Thanks for the rocking plugin. I was trying to order dynamically added elements and it doesn't work. Gives an error - $item is undefined.

Any clue on how can I accomplish this?

Below is my code

        $("ul.order_list").sortable({
            handle: '.grab',
            onDragStart: function ($item, container, _super) {
                var offset = $item.offset(),
                pointer = container.rootGroup.pointer
                adjustment = {
                    left: pointer.left - offset.left,
                    top: pointer.top - offset.top
                }
                _super($item, container)
            },
            onDrag: function ($item, position) {
                $item.css({
                    left: position.left - adjustment.left,
                    top: position.top - adjustment.top
                })
            }, 
            onDrop: function ($item, container, _super) {
                $item.removeClass("dragged").removeAttr("style");
                $("body").removeClass("dragging");
                newOrder = $("ul.order_list").sortable("serialize").get();
                postPhotoListOrder(newOrder);                    
            }
        });

Thanks a lot mate!

[johnny]

Could you provide a jsfiddle? Or at least the line number the error is raised and a backtrace.

Then I will look into it.

[pushpinderbagga]

Lemme give you a jsfiddle in 10 mins. Thanks!

[pushpinderbagga]

Okay - its a "TypeError: $item is undefined"

[pushpinderbagga]

Okay - here is the jsFiddle - http://jsfiddle.net/av6YU/1/

As you can see - this is working just fine. In my case, I am not really adding new elements but reloading the whole list elements again and this below line causes the error I posed above.

newOrder = $("ul.order_list").sortable("serialize").get();

If I comment the above line - it works without error - but then I do not get the updated list.

[jbogdani]

I'm having the same issue. I'm note able to use the onDrop function on nested lists, while it's working fine for plain lists. Any help will be much appreciated.

[BuhtigithuB]

I think I have the same issue... I receive option with "undefined" value from a select field on which there is an heavilly customize bootstrap typehead activated...

Hard to say if it the same issue, since the jsfiddle doesn't seems to produce error, at least not mine.

Thanks

[jbogdani]

Here it is a jsfiddle with the issue: http://jsfiddle.net/MyyeY/1/
jQuery 1.9.1 and 1.10.1 return the following error: TypeError: $item is undefined
jQuery 2.0.2 returns error: too much recursion

• Removing $.get (or $.post) call in onDrop action works with no errors.
• Making the list plain (nested: false) works also (with $.get / $.post action defined).

[BuhtigithuB]

For my part there is remaining undefined option in select once an option is dragged and dropped off... I don't use nested list only a simple ol with option added to a select that I map in to the ol. If there is option sorted I reconstruct the select form the ol li...

function redo_select() {
$('select[id="%(selSearch)s"]').empty();
$('#%(olSearch)s li').each(function(){
$('#%(selSearch)s').append('' + $('li[id="' + $(this).attr('id') + '"] span.typeahead_multiselect_option_label').text() + '');
});

This is called here and there...

Like in the function below (though it actually commented because it wasn't work properly) :

function make_ol_sortable(){
var adjustment;
$('#%(olSearch)s').sortable({
group: 'simple_with_animation',
pullPlaceholder: false,
// animation on drop
onDrop: function (item, targetContainer, _super) {
var clonedItem = $('

').css({height: 0})
item.before(clonedItem)
clonedItem.animate({'height': item.height()})

                item.animate(clonedItem.position(), function  () {
                  clonedItem.detach()
                  _super(item)
                })
                //redo_select(); // This not working for now there is option with undefined value that remain once the dragged option is released that seems a bug
              },

              // set item relative to cursor position
              onDragStart: function ($item, container, _super) {
                var offset = $item.offset(),
                pointer = container.rootGroup.pointer

                adjustment = {
                  left: pointer.left - offset.left,
                  top: pointer.top - offset.top
                }

                _super($item, container)
              },
              onDrag: function ($item, position) {
                $item.css({
                  left: position.left - adjustment.left,
                  top: position.top - adjustment.top
                })
              }
        });

I really don't know where it comes exactly, but I guess it comes from one of these functions :

clearOffsetParent: function () {
this.offsetParent = undefined
},
// Recursively clear container and item dimensions
clearDimensions: function () {
this.containerDimensions = undefined
var i = this.containers.length
while(i--){
this.containers[i].clearDimensions()
}

:)

[johnny]

either use sortable("refresh") or sortable("destroy") and reinit.