Форма диалога jQuery сериализует репостинг неверных данных при последующем использовании - PullRequest
Новая
       11

Форма диалога jQuery сериализует репостинг неверных данных при последующем использовании

0 голосов
/ 02 июня 2010

Я работаю с формами в 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;
    });
});

1 Ответ

2 голосов
/ 02 июня 2010

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

$(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.

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

Редактировать 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 (и некоторыми другими вещами).

...