JQuery Mobile: select menu refresh true does not work on iOS

Question

I am using this wonderful piece of code:

function rebuildFilterDialogConditions(filterPopup, jsonArray) {
    for (var i = 0; i < jsonArray.filters.length; i++) {
        var filterSelect = $('select#' + jsonArray.filters[i].filterCode);
        var filterOptionsSelect = $('select#' + jsonArray.filters[i].filterCode + ' option');
        filterOptionsSelect.remove();
        filterSelect.append('<option value="default" selected="selected" disabled="disabled">' + jsonArray.filters[i].filterName + '</option>');

        for (var j = 0; j < jsonArray.filters[i].filterValues.length; j++) {
            filterSelect.append('<option value="' + jsonArray.filters[i].filterValues[j] + '">' + jsonArray.filters[i].filterValues[j] + '</option>');
        }
        filterSelect.selectmenu('refresh', true);
    }
}

Technically it removes every option of the select, replaces it with new data, then calls selectmenu('refresh', true) to force it to rebuild.

This works on Android.

This does NOT WORK on iOS. Does not work meaning that it doesn't refresh the "native-looking" menu in the bottom, it stays the exact same as before.

Same code, of course.

What should I do about this?

Answer 1

The error was completely elsewhere, this didn't even run as indicated by actual debugging on iOS.

The method:

    filterSelect.change(function() {
        ...
        bridge.callHandler("updateResultSearchFilters", result);
    });

did not have a reference to bridge, so the method was never actually called...