jQuery Диалоговая форма сериализации переупорядочения некорректных данных при последующем использовании

Question

Я работаю с формами внутри jQuery Dialog, и у меня возникают некоторые проблемы с данными, которые он публикует. Первая загрузка и сохранение отлично работают, публикуют правильные данные. Пока я не обновляю страницу, каждый последующий груз, похоже, работает, как и в правильных данных в форме, однако при сохранении данные с первой загрузки - это то, что выкладывается каждый раз.

function formdialog(url, tack, divid, scriptload){ 
    $.getJSON(url+tack+"/form", function(data){ 
     var formwin = '<div><form id="formdialog">'+data['form']+'</form></div>'; 
     var dialog = $(formwin).dialog({ 
      title: data['title'], 
      autoOpen: false, 
      modal: true, 
      buttons: { 
       "Save": function(){  
        $.post(url+tack+"/process", 
         $("#formdialog").serialize(), 
         function(data){ 
          alert($("#formdialog").serialize()); 
          $(this).dialog('close'); 
          $(this).remove(); 
         } 
        ); 
       }, 
       "Cancel": function(){$(this).dialog('close'); $(this).remove();} 
      } 
     }); 

     dialog.dialog("open"); 
    }); 
} 

$(function(){   
    $("a.edlnk").click(function(){ 
     var url = $(this).attr("href"); 
     formdialog(CONFIG_HREF_SITE+"ajax/"+appControl, "/"+url, divid); 
     return false; 
    }); 
}); 

Answer 1

Я считаю, что проблема заключается в

$(this).dialog('close'); 
$(this).remove(); 

... в вашем post обратного вызова, потому что вы не указали контекст для обратного вызова. Если это так, изменение post к этому следует исправить:

$.ajax({ 
    url:  url+tack+"/process", 
    type:  'POST', 
    data:  $("#formdialog").serialize(), 
    context: this, 
    success: function(data){ 
     alert($("#formdialog").serialize()); 
     $(this).dialog('close'); 
     $(this).remove(); 
    } 
}); 

... потому что тогда вы сохраняющий смысл this, когда функция success называются.

Так почему же этот вопрос вызывает поведение, которое вы видите? Потому что, если вы не удалите div, вы не удаляете form, что означает, что вы в конечном итоге получаете несколько form s на странице с тем же идентификатором. Хотя наличие одного и того же ID на нескольких элементах является недопустимым и поэтому подвержено неопределенному поведению, большинство браузеров предоставят первый соответствующий элемент, когда вы запрашиваете элемент по ID   — который в вашем случае был бы более ранней формой с более ранние данные.

---

Редактировать Re ваш комментарий: Да, я как бы пропустил $(this).dialog('close') там. :-) Пару вариантов: Один помнить $(formwin) в локальной переменной, а затем использовать его в функцию обратного вызова, например:

var formwin = '<div><form id="formdialog">'+data['form']+'</form></div>'; 
var formwinElement = $(formwin);  // <== Remember it here 
var dialog = formwinElement.dialog({ // <== Use it here 

// ... 

       $.post(url+tack+"/process", 
        $("#formdialog").serialize(), 
        function(data){ 
         alert($("#formdialog").serialize()); 
         $(this).dialog('close'); 
         formWinElement.remove(); // <== And again here 
        } 
       ); 

... и не заморачиваться с context парам (отсюда мой используя ваш оригинал $.post в этом обновлении). Это работает, потому что обработчик успеха post является закрытием переменной formwinElement (и нескольких других вещей).