在提交ajax後不需要表單默認值

Question

我有這個腳本，它打算做的是：在一個包含聯繫人列表的視圖中，每當您點擊其中一個鏈接時顯示一個編輯在部分視圖中（在父視圖中只有一個div用於保存）在單擊的聯繫人下方，因爲它會向服務器發送ajax調用並獲取該聯繫人的信息。提交後，通過ajax，它刷新列表。

一切似乎工作正常，但如果我編輯聯繫人，刷新列表後，我嘗試再次打開同一聯繫人上的窗體，信息與編輯前相同。雖然調試我看到服務器列表是正確的（列表中的顯示也是如此，但它只是在表格中顯示）

事情是在鉻開發人員工具中，我可以看到窗體中有一些「默認值」設置爲以前的東西。我直到現在還不知道他們，我不知道如何擺脫他們，因爲據我瞭解，我打電話給服務器，無論如何，我已經試過這個

document.getElementById（ 「editForm」）復位（）;

沒有運氣。

感謝

腳本

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

Answer 1

我遇到了這個問題，我正在處理一個網站。你需要禁用AJAX緩存：

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

那會做所有的Ajax調用，所以你可能只希望做的是在某些頁面，根據您的使用。