Custom jQuery sorting function not working on iPad (iOS)

I’ve been doing a research for a couple hours now about this detail and I can’t find the solution to it.

I’m working on a real estate website, and it has a feature based on JQuery that allows you to sort the properties listing by parameters (price, type, bedrooms, etc..).
I created a custom sorting function that enables such feature.

Read More

On computers it works just fine, but when I tested it on iOS, it doesn’t.

At first, I thought that it was jQuery that was not working, but after running some simple tests, I noticed that everything in jQuery works, and it parses the information I need to to parse. The part that is not working is only the sorting function.

So I’m a bit puzzled about the reason for this, and I would like to know if anyone has some input that might be helpful.

These are the HTML forms on the frontend.

  <div id="filterControls">
  <select onclick=”” id="sortOrd">
    <option onclick=”” value="asc">ASC ↑</option>
    <option onclick=”” value="desc">DESC ↓</option>
  </select>
  <form id="filter">
    <label>Sort items by: </label>
      <input type="button" onclick=”” name="sort" value="type" class="first">   
      <input type="button" onclick=”” name="sort" value="price" class="active">
      <input type="button" onclick=”” name="sort" value="bedrooms"> 
      <input type="button" onclick=”” name="sort" value="location" class="last">        
  </form>

    <div class="clear"></div>
  </div>

And this is the jQuery part:

var j$ = jQuery.noConflict();
j$(document).ready(function() {

//alert("I'm alive!");


// CUT THE LENGHT OF THE ADDRESS TEXT
j$('.property_title a').each(function() {
var jthis = j$(this);
jthis.text( jthis.text().slice(0,25) );
jthis.append(" ...");
});





// Custom sorting plugin


// SORT BY PRICE WHEN FIRST LOADING

// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text());    
}

var currentSort = j$('#filter input[class="active"]').val();

//alert(currentSort);

j$("ul#properties li").sort(asc_sort).appendTo('ul#properties');




// USER CAN CHANGE THE SORTING BASE PARAMETER

var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";

j$('#filter input[type="button"]').on("click", function(e){

// == Sorting Types 

// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ order +']').text()) < (j$(a).find('div[data-type='+ order +']').text());    
}

// decending sort
function dec_sort(a, b){
return (j$(b).find('div[data-type='+ order +']').text()) > (j$(a).find('div[data-type='+ order +']').text());      
}

// deactivate other buttons
j$('#filter input[type="button"]').removeClass("active");

//activate selected button
j$(this).addClass("active");
//e.preventDefault();

// get info from forms
var sorting = j$('#sortOrd').val();  
var order = j$(this).val();
//alert (order);

// define type of sorting to do
if (sorting == 'asc'){   
j$("ul#properties li").sort(asc_sort).appendTo('ul#properties');
}

if (sorting == 'desc'){
j$("ul#properties li").sort(dec_sort).appendTo('ul#properties');
}




});


// ASCEND OR DESCEND?

j$('#sortOrd').change(function(event){


//alert("Click event on Select has occurred!");
j$("option:selected", j$(this)).each(function(){


var newSorting = (this).value;
//alert (newSorting);   
var currentSort = j$('#filter input[class="active"]').val();
//var newSorting = j$(this).val(); 
// define type of sorting to do

if (newSorting == 'asc'){   
j$("ul#properties li").sort(asc_sort).appendTo('ul#properties');
}

if (newSorting == 'desc'){
j$("ul#properties li").sort(dec_sort).appendTo('ul#properties');
}

// == Sorting Types 

// accending sort
function asc_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text());    
}

// decending sort
function dec_sort(a, b){
return (j$(b).find('div[data-type='+ currentSort +']').text()) > (j$(a).find('div[data-type='+ currentSort +']').text());      
}

});


});
});

After doing several tests, my best hypothesis is that this is the part that is not working properly, because it won’t sort them automatically when loading on iOS and because I think everything else seems to be working fine:

   // == Sorting Types 

    // accending sort
    function asc_sort(a, b){
    return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text());    
    }

    // decending sort
    function dec_sort(a, b){
    return (j$(b).find('div[data-type='+ currentSort +']').text()) > (j$(a).find('div[data-type='+ currentSort +']').text());      
    }

Hope you guys can help me. I appreciate your help!

Related posts

Leave a Reply

1 comment

  1. The bug is in your sorting functions asc_sort() and dec_sort(). They are returning true/false-values, but they should return a number. The sign of the number tells the sort() whether the order should be changed or not. Boolean values true and false instead are interpreted as 1 and 0 and that 0 means equal values. The sorting algorithm may or may not swap equal values.

    The correct sort functions would be something like:

    // accending sort
    function asc_sort(a, b){
        return (j$(b).find('div[data-type='+ currentSort +']').text()) < (j$(a).find('div[data-type='+ currentSort +']').text() ? 1 : -1);    
    }
    
    // decending sort
    function dec_sort(a, b){
        return (j$(b).find('div[data-type='+ currentSort +']').text()) > (j$(a).find('div[data-type='+ currentSort +']').text() ? 1 : -1);
    }
    

    Note, the returned value is now in form (condition ? 1 : -1) so that these functions always return either 1 or -1.