1

私はこのスクリプトを持っています。それが意図していることは次のとおりです。連絡先のリストを含むビューで、これらのリンクのいずれかをクリックすると編集リンクが表示され、編集フォームが部分ビューに表示されます (div は 1 つだけです)。それを保持するための親ビュー) クリックされた連絡先のすぐ下に、サーバーへの get ajax 呼び出しを実行し、その連絡先の情報を取得します。送信後、同様に ajax を介してリストを更新します。

すべて正常に動作しているように見えますが、連絡先を編集すると、リストが更新された後に同じ連絡先のフォームを再度開こうとすると、情報は編集前と同じになります。デバッグ中ですが、サーバーのリストは正しいことがわかります（リストの表示もそうですが、フォームが間違っているだけです）

問題は、クロム開発者ツールで、いくつかの「デフォルト値」が以前のものに設定されたフォームを見ることができるということです。私は今までそれらについて知りませんでしたし、それらを取り除く方法もわかりません。私の理解では、サーバーに get 呼び出しを行っているためです。

document.getElementById("editForm").reset();

運がない。

ありがとう

スクリプト

(function ($) {
    var editContainer = $(document.getElementById('editContainer'));

    $('#editContainer').on('submit', '#editForm', ajaxEditCall);

    $('a.edit').on("click", displayEditForm);

    function displayEditForm(e) {
        var clickedElement = $(this).parent(),

        url = editContainer.data('amp-edit-url');

        $.get(url, {
            id: parseInt(this.id, 10)
        }, function (result) {
            editContainer.html(result);
            $.validator.unobtrusive.parse(editContainer);
            // Display edit form just below the "item" clicked
            if (editContainer.is(":visible")) {
                editContainer.slideToggle(300, function () {
                    editContainer.appendTo(clickedElement);
                    editContainer.slideToggle(300);
                });
            } else {
                editContainer.appendTo(clickedElement);
                editContainer.slideToggle(300);
            }
        }, "html");
        e.preventDefault();
    }

    function ajaxEditCall(e) {
        e.preventDefault();
        //if ($('#editForm').valid()) {
        var list = $(document.getElementById('list'));

        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                if (result.passedValidation == true) {
                    $.get(result.action, function (partial) {
                        document.getElementById("editForm").reset();
                        list.html(partial);
                        $('a.edit').on("click", displayEditForm);
                        $('#editForm').slideUp(300);
                        setTimeout(function () {
                            list.effect("highlight", {}, 3000);
                        }, 1000);
                    });
                } else {
                    $(document).scrollTop(0);
                    editContainer.html(result);
                    $.validator.unobtrusive.parse('#editForm');
                }
            }
        });
        //} return false;
    }
}(jQuery));

そして、場合のビューは関連しています

@model ContactListViewModel

@{
    ViewBag.Title = " My Contacts";
}

<div id="myContacts">
    <h2>My Contacts</h2>

    <div id="editContainer" data-amp-edit-url="@Url.Action("Edit", "Contacts")" class="initiallyHidden"></div>

    <div id="list">
        @{ Html.RenderPartial("_ContactList", Model); }
    </div>
    <div id="dialog" data-amp-del-url="@Url.Action("Delete", "Contacts")" title="Confirmation Required">
        <p>Are you sure you want to delete this Contact?</p>
    </div>
</div>

@section Foot
{
    <script src="~/Scripts/AMPContacts.js"></script>
    <script src="~/Scripts/conditional-validation.js"></script>
    <script src="~/Scripts/Placeholders.min.js"></script>
}

それは明らかに親ビューです。部分的なビューは単なるフィールドの集まりです。すでに長い投稿が増えるのを避けるために、それらのほとんどを削除します

@model AddContactViewModel

@using (Html.BeginForm("Edit", "Contacts", FormMethod.Post, new { @id = "editForm", @class = "addTab" }))
{
    @Html.ValidationSummary(true, "Please correct the errors and try again.")

    @Html.HiddenFor(m => m.Id)
    @Html.HiddenFor(m => m.OwnedItemId)
    @Html.HiddenFor(m => m.AddressId)

    <div id="editContactDetails">
            <div>
                @Html.DisplayFor(m => m.PlanName)
            </div>

            <div>
                @Html.DropDownListFor(m => m.Title, Model.TitleList, "Title")
            </div>
            <div>
                @Html.EditorFor(m => m.FirstName, new { @id="editFirstName", data_placeholders_focus = "false", placeholder = ViewData.ModelMetadata.Watermark })
                @Html.ValidationMessageFor(m => m.FirstName)
            </div>

        // And so on....

        <div class="addDEC">
            <input class="addDECButton" type="submit" value="Save" />
        </div>
}
4

1 に答える 1

1

作業中のサイトでこの問題に遭遇しました。ajax キャッシュを無効にする必要があります。

//Disbable cache for all jQuery AJAX requests
$.ajaxSetup({ cache: false });

これはすべての ajax 呼び出しに対して実行されるため、使用状況に応じて、特定のページでのみ実行したい場合があります。

于 2013-05-06T22:14:22.757 に答える