Question

I wrote this function to make columns sortable. I want to rearrange divs based that are associated on a particular order number. It works fine in chrome and firefox, but for some reason in IE8 instead of, at the end of the function, appending all the rearranged content to a the #current_orders_content2 div, all of the content simply disappears. The function checks out in JSlint (via jsfiddle) and what’s curious is that looking at all the values at the end (via IE console), everything looks all right—values are what I would expect them to be. It just seem that the append() fails. So I tested with .html(), appendTo and still no joy. It works if I pass it an html string, but is failing with these jquery objects.

Any ideas on why or how i can make it work?

Thanks!

$('.sortable').click(function () {
    "use strict";
    if ($(this).hasClass('sortable_numeric')) {

        /*
        *function sets ascending/descending classes
        *for formatting, placement of arrow_up.png, arrow_down.png
        *returns the sort order to be used below "asc" or "desc"
        */
        var sort_order = sort_class_distribution($(this));
        var current_val = "";
        var order_number = "";

        /*
        *determine what column is being sorted
        *remove the "_header" text from the id to
        *get this information
        */
        var sort_column = this.id;

        sort_column = sort_column.replace("header_", "");

        /*
        *append "_div" to the end of the string to get
        *the class of the divs we are sorting by
        */
        sort_column += "_div";

        var valuesArr = [];

        $('.' + sort_column).each(function () {

            var current_val = $.trim($(this).text());

            current_val = parseInt(current_val, 10);

            valuesArr.push(current_val);

        });


        var sorted = [];

        if (sort_order == "asc") {

            sorted = valuesArr.slice(0).sort(sortA);


        } else if (sort_order == "desc") {

            sorted = valuesArr.slice(0).sort(sortD);

        }

        /*
        * for each item in this array, get the parent div 
        * with the class order_and_lines_container_div. 
        * 
        * push it into an array of its own to to put back 
        * onto the page in the order of the sorted array
        */

        var containerArr = [];
        var current_container = "";
        var c = 0;

        for ( c = 0; c <= sorted.length; c++ ) {

            current_container = $('#order_container_' + sorted[c]);

            containerArr.push(current_container);

        }

        $('#currentOrdersContent2').html('');

        for ( c = 0; c <= sorted.length; c++ ) {

            $('#currentOrdersContent2').append(containerArr[c]);

        }

    }

});

Answer 1

I don’t know if this is the issue or not, but your loops are going out of bounds.

This…

for ( c = 0; c <= sorted.length; c++ ) {

should be this…

 // -----------v---constrain to indices less than sorted.length
for ( c = 0; c < sorted.length; c++ ) {

Also, you seem to be using a lot more code than needed for this sort.

---

Here’s your code reworked a bit…

$('.sortable').click(function () {
    "use strict";
    if ($(this).hasClass('sortable_numeric')) {

        var sort_order = sort_class_distribution($(this)),
            sort_column = this.id.replace("header_", "") + "_div",
            content2 = $('#currentOrdersContent2');

        var sorted = $('.' + sort_column).map(function () {
                return parseInt($(this).text(), 10);
            })
            .toArray()
            .sort(sort_order == "asc" ? sortA : sortD);

        $.each(sorted, function(i, item) {
            content2.append($('#order_container_' + item));
        });
    }
});

Some of the changes are…

• removed a bunch of unnecessary variable declarations (either shadowed or unused)

• Used .map(). This simply iterates the elements, and puts whatever you provide as a return value in a new jQuery object, so you end up with a jQuery object full of numbers.

• Got rid of $.trim() since parseInt ignores leading/trailing whitespace

• Used .toArray() to convert the new jQuery object to an actual Array.

• Called .sort() immediately and assign the return value to the variable, since it returns the same Array, though modified.

• At that point, simply did the .append() of each item. When appending, the element is removed from its original location, and placed in the new location, so there’s no need to cache and clear the elements.

The .map().toArray().sort() is just method chaining. .map() returns the new jQuery object as noted above. .toArray() is called on that object, and returns an Array. .sort() is called on that Array, and returns the same Array, which is assigned to the variable.

This part sort_order == "asc" ? sortA : sortD is a conditional operator, which is like a shorthand for an if...else. Basically, if the condition is true, return sortA, else return sortD.