Question

I have the following Javascript code that sorts divs on my page:

$(function() {

    var productContainer = $('.productBoxWrapper');

    function sortByPriceAsc (a,b){
        return Number( jQuery(a).find('.productPriceForSorting').text() - $(b).find('.productPriceForSorting').text() );
    }

    function sortByPriceDesc (a,b){
       return Number( $(b).find('.productPriceForSorting').text() - $(a).find('.productPriceForSorting').text() );
    }

    function sortByTitleAsc (a,b){    
        return $(a).find('.productTitleForSorting').text() > $(b).find('.productTitleForSorting').text() ? 1 : -1;    
    }

    function sortByTitleDesc (a,b){
       return $(b).find('.productTitleForSorting').text() > $(a).find('.productTitleForSorting').text() ? 1 : -1;
    }

    function reorderEl(el){
        var allProductsContainer = $('#product-collection');
        allProductsContainer.html('');   
        el.each(function(){        
            $(this).appendTo(allProductsContainer);        
        });
    }
    function fadeContainer() {
        productContainer.fadeOut('fast');
        productContainer.fadeIn('fast');
    }    

    $('.dk').dropkick({

          change: function () {

            var selectedOptionValue = $('#sortThisCollectionBaby option:selected').val();

            if (selectedOptionValue == 'price-low-to-high')
            {
                reorderEl(productContainer.sort(sortByPriceAsc));
                fadeContainer(); 
            }
            else if (selectedOptionValue == 'price-high-to-low')
            {
                reorderEl(productContainer.sort(sortByPriceDesc));
                fadeContainer();
            }
            else if (selectedOptionValue == 'alphabetically-a-to-z')
            {
                reorderEl(productContainer.sort(sortByTitleAsc));
                fadeContainer();
            }
            else if (selectedOptionValue == 'alphabetically-z-to-a')
            {
                reorderEl(productContainer.sort(sortByTitleDesc));
                fadeContainer();
            }
            else if (selectedOptionValue == 'best-selling')
            {
                window.location.reload( true );  
                fadeContainer();
            }
          } // function    

    }); // dropkick

    });

HTML:

   <ul id="product-collection">

     <div class="productBoxWrapper">        
        <li>
    <div class="product-info">
         <h4>
            <a class="productTitleForSorting" href="my-product">MY PRODUCT</a><br>
         </h4>
         <div class="product-price">
        <span id="listPrice">Retail: $26.99</span>                                                     
            <span style="display:none;" class="productPriceForSorting">895</span>
             <span>Our Price: $8.95</span>
         </div>                   
    </div>              
    </li>
    div class="productBoxBottom">           

    <!-- view product button -->
    <a href="my-product">View</a>                       
    </div>
    </div>

    <!-- I HAVE MORE DIVS FOR OTHER PRODUCTS HERE, SAME HTML AS ABOVE -->

    </ul>

This sorting function works well in all browsers but not at all in IE (all versions of IE). When I run the script by changing the select list option (calls the sort function), everything disappears in IE. Looks like it may be an issue with the jQuery .appentTo(element) not working in IE or something in the reorderEL function:

function reorderEl(el){
var allProductsContainer = $('#product-collection');
allProductsContainer.html('');   
el.each(function(){        
    $(this).appendTo(allProductsContainer);        
});

}

Does anyone have suggestions for a workaround on this one?

Answer 1

The thing that jumps out at me:

function reorderEl(el){
    var allProductsContainer = $('#product-collection');
    allProductsContainer.html('');   
    el.each(function(){        
        $(this).appendTo(allProductsContainer);        
    });
}

could be rewritten as:

function reorderEl(el){
    $("#product-collection").empty().append(el);
}

Also, you should probably redo the fade animation:

productContainer.fadeOut("fast", function() {
                                     reorderEl(productContainer.sort(sortByPriceAsc));
                                     productContainer.fadeIn();
                                 });

This way, it fades out, then reorders the contents, then fades back in. fadeOut() will return immediately, it won’t wait for the animation to finish, so a callback function has to be provided.