looping through DOM / mootools sortables

Question

I can't seem to get a handle on my list of sortables. They are a list of list elements, each with a

form inside, which I need to get the values from.

Sortables.implement({
    serialize: function(){
        var serial = [];
        this.list.getChildren().each(function(el, i){
            serial[i] = el.getProperty('id');
        }, this);
        return serial;
    }
});



var sort = new Sortables('.teams', {
        handle: '.drag-handle',
        clone: true,
        onStart: function(el) {
            el.fade('hide');
        },
        onComplete: function(el) {
            //go go gadget go
            order = this.serialize();
            alert(order);
            for(var i=0; i<order.length;i++) {
                if (order[i]) {
                    //alert(order[i].substr(5, order[i].length));
                }
            }
        }
    });

the sortables list is then added to a list in a loop with sort.addItems(li); . But when I try to get the sortables outside of the sortables onComplete declaration, js says this.list is undefined.

---

Approaching the problem from another angle:

Trying to loop through the DOM gives me equally bizarre results. Here are the firebug console results for some code:

var a = document.getElementById('teams').childNodes;
var b = document.getElementById('teams').childNodes.length;

try {
    console.log('myVar: ', a);
    console.log('myVar.length: ', b);
} catch(e) {
    alert("error logging");
}

Hardcoding one li element into the HTML (rather than being injected via JS) changes length == 1, and allows me to access that single element, leading me to believe that accessing injected elements via the DOM is the problem (for this method)

Trying to get the objects with document.getElementById('teams').childNodes[i] returns undefined.

thank you for any help!

Answer 1

not sure why this would fail, i tried it in several ways and it all works

http://www.jsfiddle.net/M7zLG/ test case along with html markup

here is the source that works for local refernece, using the native built-in .serialize method as well as a custom one that walks the dom and gets a custom attribute rel, which can be your DB IDs in their new order (I tend to do that)

var order = []; // global

var sort = new Sortables('.teams', {
    handle: '.drag-handle',
    clone: true,
    onStart: function(el) {
        el.fade('hide');
    },
    onComplete: function(el) {
        //go go gadget go
        order = this.serialize();
    }
});

var mySerialize = function(parentEl) {
    var myIds = [];
    parentEl.getElements("li").each(function(el) {
        myIds.push(el.get("rel"));
    });

    return myIds;
};

$("saveorder").addEvents({
    click: function() {
        console.log(sort.serialize());
        console.log(order);
        console.log(mySerialize($("teams")));
    }
});