2013-05-06 2 views
1

У меня есть этот скрипт, что он намеревается сделать: в представлении со списком контактов каждый с ссылкой на редактирование всякий раз, когда вы нажимаете на одну из этих ссылок, отображается редактирование форма в частичном представлении (есть только один div в родительском представлении для его удержания) чуть ниже кликаемого контакта, так как он получает вызов ajax на сервер и получает информацию для этого контакта. После отправки через 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> 
} 

ответ

1

Я столкнулся с этой проблемой с сайтом, над которым я работал. Вам нужно отключить кэширование АЯКС:

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

Это будет делать это для всех Ajax звонки, так что вы можете только хотите сделать это на определенных страницах, в зависимости от вашего использования.

+0

Спасибо @Mike, но у меня все еще такая же проблема. Я попытался изменить сокращенную строку на .ajax и сделать то, что упоминалось в http://stackoverflow.com/questions/7750447/difference-between-ajaxcachefalse-and-ajaxsetupcachefalse-in-jqu, на основе вашего ответа, но same (un) luck – mitomed

+0

Я только что заметил, свежий после долгого дня вчера, что я делал что-то не так с моим кэшем решений, и проблема возникла оттуда. Вот почему я не могу пометить ваш ответ как правильный, поскольку это не для моего вопроса (я получаю информацию каждый раз, когда иду на сервер и поэтому не кэшируется), но это полностью моя ошибка, так как ваш ответ делает много смысл и помог мне, и именно поэтому я его продвигаю. Большое спасибо – mitomed

+0

Рад, что вы его отсортировали! –

Смежные вопросы