Question

Trying an example piece of code for Scriptaculous for doing some drag and drop. It works fine in IE8 but Firefox and Chrome generate an error of ‘sections.each is not a function.

Here is the code:

function getGroupOrder() {
    var sections = document.getElementsByClassName('section');
    var alerttext = '';
    sections.each(function(section) {
        var sectionID = section.id;
        var order = Sortable.serialize(sectionID);
        var mySectionID = Right(section.id);
        var myLen = String(Sortable.sequence(section)).length;
        var StuCode = "";
        if (myLen ==8)
        {var StuCode = String(Sortable.sequence(section)).substring(myLen, 2);}
        else if (myLen ==9)
        {var StuCode = String(Sortable.sequence(section)).substring(myLen, 3);}
        
        alerttext += mySectionID + ': ' + StuCode + '\n';
            alerttextb = sectionID + ': ' + StuCode + '\n';
    }
}

One solution suggested on a forum "I was able to resolve this issue by wrapping the call to document.getElementsByClassName(‘section’); with $A()" but I don’t have a clue what that means! I asked what it meant but the post was made in 2008 and no reply as yet.

Answer 1

The getElementsByClassName method on native implementations returns a NodeList, not an Array object.

The $A method from PrototypeJS to converts any iterable object into an Array object, for example:

$A(sections).each(function(section) {
  //...
});