0

VisualStudio2012とjQueryMobileを使用してMVC4モバイルアプリを開発しています。チェックボックスとラジオボタンの状態を覚えておく必要があるので、それらの値をCookieに保存します。pageinitイベントでページに戻ったときに値を設定しましたが、コントロールが視覚的に更新されません。モバイルとしてのページレンダリングでFirebugを使用すると、値が正しく変更されたことがわかります。次のような要素でcheckboxradio（'refresh'）を呼び出してみました。

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

しかし、checkboxradioが未定義であり、サポートされていないというエラーが常に発生します。コントロールがラジオボタンであることは知っています。この問題を回避するために、jQuery Mobileでコードを抽出して、呼び出したラジオボタンとチェックボックスを更新しました。Firebugでは、入力が正しくチェックされているだけでなく、ラベルクラスが適切に変更されていることがはっきりとわかります。ただし、視覚的には何も変化せず、元のように見えます。私は何かが足りないのですか？pageinitイベントでこれを呼び出しても、checkboxradioがサポートされていないというエラーが表示されるのはなぜですか。

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

含まれているdivを非表示にしてから表示することで更新を試みましたが、失敗しました。私が試したことは、コントロールを視覚的に更新するものではありません。ありとあらゆる助けをいただければ幸いです!!!

チェックボックスラジオをバイパスしてページを更新するために呼び出している関数は次のとおりです。問題を回避するために呼び出す関数は次のとおりです。

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

そして、これがjQuerymobileのcheckboxradiorefreshメソッドから抽出した関数です。

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で変更を表示しても、コントロールの外観は変更されません。

4

1 に答える 1

0

多くの実験の後、私はついにこのコードを破棄し、jQuery MobileでAjaxを無効にしてから、すべてのAjaxを手動で処理しました。MVC4を使用したjQueryMobileアプリの開発について学んだことについての本を書くことができ、おそらく多くの人々を助けることができましたが、残念ながら、時間もお金もありません。いつか誰かが正しい方法で物事を行う方法を文書化して、あちこちで断片を探すのに何時間も費やす代わりに、人々が頼ることができる単一のソースがあることを願っています。

于 2012-12-20T22:58:28.037 に答える