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.
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!
The bug is in your sorting functions
asc_sort()
anddec_sort()
. They are returningtrue
/false
-values, but they should return a number. The sign of the number tells thesort()
whether the order should be changed or not. Boolean valuestrue
andfalse
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:
Note, the returned value is now in form
(condition ? 1 : -1)
so that these functions always return either 1 or -1.