Question

I’m developing an MVC4 mobile app using Visual Studio 2012 with jQuery Mobile. I need to remember the state of checkboxes and radio buttons so I store their value in a cookie. When I come back to the page in the pageinit event I set the values but the controls never update visually. Using Firebug with the page rendering as mobile I can see that the values changed correctly. I’ve tried calling checkboxradio(‘refresh’) on the element like this:

$('#btnCompany').prop('checked', true)checkboxradio('refresh');

but I always get an error saying checkboxradio is undefined and not supported. I know the control is a radio button. To try and work around the problem I extracted the code in jQuery Mobile to refresh a radio button and checkbox which I call and again I can clearly see in Firebug that not only is the input checked correctly but the label classes have changed appropriately. However, visually nothing changes, they look like they did originally. Am I missing something? Why am I getting an error saying checkboxradio is not supported even when I call this in the pageinit event:

$("input[type='radio']").checkboxradio("refresh");

I’ve tried refreshing by hiding then showing the containing div but that failed. Nothing I’ve tried refreshes the controls visually. Any and all help would be greatly appreciated!!!

Here are the functions I’m calling to refresh the page bypassing checkboxradio. Here is the function I call to try and work around the problem:

function SetSearchFormState() {
if ($.cookie('cmdSearchForm') != null) {

    //$('#searchParamsDiv').hide();

    var formData = JSON.parse($.cookie('cmdSearchForm'));

    $('#SearchText').val(formData.SearchText);        

    // Set all search buttons to not selected.       
    $('.searchBtn').each(function () {
        $(this).prop('checked', false);
        RefreshCheckboxRadio(this, false);
    });

    // Set the appropriate search button selected.
    $('#hidSearch').val(formData.hidSearch);
    switch (formData.hidSearch) {
        case 'Opportunity':
            $('#btnOpportunity').prop('checked', true);
            RefreshCheckboxRadio($('#btnOpportunity'), true);
            break;
        case 'Company':
            $('#btnCompany').prop('checked', true);
            RefreshCheckboxRadio($('#btnCompany'), true);
            break;            
        case 'Contact':
            $('#btnContact').prop('checked', true);
            RefreshCheckboxRadio($('#btnContact'), true);
            break;
    }

    // Set all status buttons to not selected.
    $('.statusBtn').each(function () {
        $(this).prop('checked', false);
        RefreshCheckboxRadio(this, false);
    });        

    // Set the appropriate status button selected.
    $('#hidStatus').val(formData.hidStatus);
    switch (formData.hidStatus) {
        case 'Lead':
            $('#btnLead').prop('checked', true);
            RefreshCheckboxRadio($('#btnLead'), true);
            break;
        case 'Prospect':
            $('#btnProspect').prop('checked', true);
            RefreshCheckboxRadio($('#btnProspect'), true);
            break;
        case 'Customer':
            $('#btnCustomer').prop('checked', true);
            RefreshCheckboxRadio($('#btnCustomer'), true);
            break;
    }        

    // Set the appropriate include button selected.
    $('#hidAllUsers').val(formData.hidAllUsers);
    $('#btnAllUsers').prop('checked', false);
    RefreshCheckboxRadio($('#btnAllUsers'), false);
    if (formData.hidAllUsers == 'True') {
        $('#btnAllUsers').prop('checked', true);
        RefreshCheckboxRadio($('#btnAllUsers'), true);
    }

    $('#hidDead').val(formData.hidDead);
    $('#btnDead').prop('checked', false);
    RefreshCheckboxRadio($('#btnDead'), false);
    if (formData.hidDead == 'True') {
        $('#btnDead').prop('checked', true);
        RefreshCheckboxRadio($('#btnDead'), true);
    }

    //$('#searchParamsDiv').show();
    $("input[type='radio']").checkboxradio("refresh");
    $("input[type='checkbox']").checkboxradio("refresh");
}
};

And here is the function that I extracted out of jQuery mobile’s checkboxradio refresh method:

function RefreshCheckboxRadio(control, value) {
if ($(control).is(':radio')) {
    var parent = $(control).parent('div');        
    var controlId = $(control).attr('id');
    var label = $(parent).find("label[for='" + controlId + "']");
    var icon = $(label).find(".ui-icon");
    //$(parent).hide();
    if (value == false) {            
        $(control).removeAttr('checked');
        $(label).removeClass('ui-radio-on ui-button-active').addClass('ui-radio-off');
        $(icon).removeClass('ui-icon-radio-on').addClass('ui-icon-radio-off');
    } else if (value == true) {            
        $(control).attr('checked', 'checked');
        $(label).addClass('ui-radio-on ui-button-active').removeClass('ui-radio-off');
        $(icon).addClass('ui-icon-radio-on').removeClass('ui-icon-radio-off');
    }
    //$(parent).show();
} else if ($(control).is(':checkbox')) {
    var parent = $(control).parent('div');       
    var controlId = $(control).attr('id');
    var label = $(parent).find("label[for='" + controlId + "']");
    var icon = $(label).find(".ui-icon");
    //$(parent).hide();
    if (value == false) {
        $(control).removeAttr('checked');
        $(label).removeClass('ui-checkbox-on ui-button-active').addClass('ui-checkbox-off');
        $(icon).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
    } else if (value == true) {
        $(control).attr('checked', 'checked');
        $(label).addClass('ui-checkbox-on ui-button-active').removeClass('ui-checkbox-off');
        $(icon).addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');
    }
   // $(parent).show();
}
};

After this code is run I can see the values are correct and exactly as they would be if checkboxradio(‘refresh’) had been called. So even though I can’t get checkboxradio to work, performing the work manually should work and in fact does when I view the changes in Firebug yet the controls still don’t change their appearance.

Answer 1

After much experimentation I finally threw out this code, disabled Ajax in jQuery Mobile, then handled all of the Ajax manually. I could write a book about what I learned about developing jQuery Mobile apps with MVC4 and probably help many folks out there but alas I don’t have the time nor do I get paid for doing so, sorry. I can only hope that someday somebody documents how to do things the right way so there’s a single source people can turn to instead of having to spend hours searching for bits and pieces here and there.