0

JQueryを使用してチェックボックス配列を動的に作成し、DOM要素に追加する場合、IE8はチェックボックス配列をフォームの一部として送信しません。FirefoxとChromeで完全に正常に動作します。サーバー側でMVC3フレームワークを使用しています。これをIE8で機能させるための回避策のアイデアはありますか？アドバイスをいただければ幸いです。

モデル：

public int[] SelectedTemplateRequirements { get; set; }

見る：

HTML：

<label for="requirementsTemplateDetail">Requirements:</label><br />
<div id="requirementsTemplateDetail"></div>

JQUERY：

<script type="text/javascript">
    /* Fills up the textarea */
    function fillTextArea(ctrlName, list) {
        // clear div
        $('#requirementsTemplateDetail').empty();

        $.each( list, function (index, itemData) {
            // alert(itemData.Id );
            $(ctrlName).append(
                $(document.createElement('input')).attr({
                    name: 'SelectedTemplateRequirements',
                    value: itemData.Id,
                    type:  'checkbox',
                    checked: 'checked'
                })
            ).append(itemData.Name + '<br/><br/>');
        })
    }

  function fillRequirementsDropdown(response) {
    fillTextArea("#requirementsTemplateDetail", response.Reqs);
  }

function postFormRequirementsByTemplateID(ctrlName) {
    var theForm = $(ctrlName).parents('form');

    $.ajax({
        type: "POST",
        url: '@Url.Action("GetRequirementsByTemplateID")',
        data: theForm.serialize(), 
        error: function (xhr, status, err) {
            alert("An error occurred while saving\n\n" + err);
        },
        success: function (response) {
            fillRequirementsDropdown(response);
        }
    });
    return false;
}

function auditType_SelectionChanged() {
    postFormRequirementsByTemplateID("#AuditTemplateId");
}

$(document).ready(function () {
    $("#ClassTypeId").change(function () {
        ClassType_SelectionChanged();
    });
    $("#AuditTemplateId").change(function () {
        auditType_SelectionChanged();
    });
    $('#templateSearchID').click(function () {
        auditTemplateButtonPressed();
    });
    $('#templateAllID').click(function () {
        auditTemplateAllPressed();
    });
});

</script>

コントローラ：

public class AuditController : ComplianceController
{
    [HttpPost]
    public ActionResult Create(string submit, AuditDocument document )
    {
            // Inserts into AuditRequirementDetail table
            m_activeContract.insertAuditTemplateRequirements(document, myuser);
    }
}

何が起こるかというと、IE 8は、コントローラーのアクション後のメソッドに戻されるまでにSelectedTemplateRequirementsアレイが表示されるため、アレイのバンドルに失敗します。NULLIE 8にはまだ大規模なユーザーベースがあるため、これに関するアドバイスをいただければ幸いです。

4

1 に答える 1

1

問題は、チェックボックスを作成してDOM要素に追加する方法にあると思います。

たとえば、次のコードがあるとします。

// Append an input element built from a single string
for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" name="test" value="' + i + '" checked="checked" />').appendTo('#form1');
}

// Append an input element build using DOM and jQuery attribute manipulation
for (var i = 0; i < 10; i++) {
    $(document.createElement('input')).attr({
        name: 'test',
        value: i,
        type: 'checkbox',
        checked: 'checked'
    }).appendTo('#form2');
}

alert($('#form1').serialize());
alert($('#form2').serialize());

alert()ChromeまたはFirefoxで結果を調べると、次のようになり#form1ます。

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

そしてこれから#form2：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

それらは同一であり、ChromeとFirefoxで期待される動作をした結果をサポートします。ただし、IEは同じように動作しません。IE8とIE9の同じコードは、これを次の場所から生成し#form1ます。

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

そしてこれから#form2：

test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on

このコードの簡単な調査から、チェックボックスを動的に作成してDOM要素に追加するために使用している方法に疑問を投げかけます。すべてのPOST変数が同一である場合にMVCがどのように処理するかはわかりませんが、問題の一部である可能性があります。

チェックボックスを追加する別のクロスブラウザの方法：

for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" />').attr({
        name: 'test',
        value: i
    }).prop('checked', true).appendTo('#form3');
}

属性を追加する前に、タイプが指定されていることを確認する必要があります。また、「checked」プロパティを適切に設定することは、IEのチェックボックスの状態ではなく値をjQueryがシリアル化するために重要です。

上記のJSFiddle。

于 2012-05-30T06:08:14.900 に答える