Question

我正在使用带有jQuery Mobile的Visual Studio 2012开发MVC4移动应用程序。我需要记住复选框和单选按钮的状态，以便将它们的值存储在cookie中。当我回到pageinit事件中的页面时，我设置了值，但控件永远不会在视觉上更新。使用Firebug将页面呈现为移动设备我可以看到值已正确更改。我试过在这个元素上调用checkboxradio（'refresh'）：

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

但我总是得到一个错误，说复选框是未定义的并且不受支持。我知道控件是一个单选按钮。为了尝试解决这个问题，我在jQuery Mobile中提取了代码以刷新我调用的单选按钮和复选框，我再次在Firebug中清楚地看到，不仅输入检查正确，而且标签类已经适当更改。然而，在视觉上没有任何变化，它们看起来像他们原来的。我错过了什么吗？为什么我收到错误，说即使我在pageinit事件中调用了这个函数，也不支持checkboxradio：

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

我通过隐藏然后显示包含div然后失败来尝试刷新。我没有尝试过直观地刷新控件。任何和所有的帮助将不胜感激!!!

以下是我正在调用以绕过checkboxradio刷新页面的函数。这是我打电话来尝试解决问题的函数：

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");
}
};

这是我从jQuery mobile的checkboxradio刷新方法中提取的函数：

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();
}
};

运行此代码后，我可以看到值是正确的，并且与调用checkboxradio（'refresh'）时的值完全相同。因此，即使我无法使checkboxradio工作，手动执行工作也应该有效，事实上当我查看Firebug中的更改时，控件仍然不会改变它们的外观。

Answer 1

经过多次实验，我终于抛弃了这段代码，在jQuery Mobile中禁用了Ajax，然后手动处理了所有的Ajax。我可以写一本关于我用MVC4开发jQuery Mobile应用程序的知识，可能会帮助很多人，但是我没有时间，也没有得到这样的报酬，对不起。我只能希望有一天有人记录如何以正确的方式做事，所以人们可以转向一个单一的来源，而不是花费数小时在这里和那里搜索零碎的东西。

checkboxradio undefined

1 个答案: