jQuery Диалоговое размещение полей формы

Question

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

data = $('#myDialog').serialize();

Однако это ни к чему не приводит. Если я ссылаюсь только на содержащую форму вместо myDialog, я получаю все поля на странице, кроме тех, которые находятся в моем диалоговом окне.

Каков наилучший способ собрать поля формы в диалоге для отправки AJAX?

Answer 1

Причина, по которой это происходит, заключается в том, что dialog фактически удаляет ваши элементы и добавляет их на корневом уровне в теле документа. Это сделано для того, чтобы скрипт диалога мог быть уверен в своем расположении (чтобы быть уверенным, что данные диалога не содержатся, скажем, в относительно позиционированном элементе). Это означает, что ваши поля на самом деле больше не содержат в вашей форме.

Вы по-прежнему можете получать их значения через доступ к отдельным полям по id (или как угодно), но если вы хотите использовать удобную функцию serialize, вам понадобится форма в диалоговое окно.

Answer 2

Элемент формы внутри диалога удаляется из формы и перемещается в конец тела. Вам нужно что-то вроде этого.

 $("#dialog_id").dialog().parent().appendTo($("#form_id"));

Answer 3

Я только что столкнулся с точно такой же проблемой, и, поскольку у меня в диалоговом окне было слишком много полей, чтобы ссылаться на них по отдельности, я сделал обертку во временную форму, сериализовал ее и добавил результат в исходную форму. сериализованные данные перед выполнением вызова ajax:

function getDialogData(dialogId) {
    var tempForm = document.createElement("form");
    tempForm.id = "tempForm";
    tempForm.innerHTML = $(dialogId).html();
    document.appendChild(tempForm);
    var dialogData = $("#tempForm").serialize();
    document.removeChild(tempForm);
    return dialogData;
}

function submitForm() {
    var data = $("#MyForm").serialize();
    var dialogData = getDialogData("#MyDialog");
    data += "&" + dialogData;
    $.ajax({
        url: "MyPage.aspx",
        type: "POST",
        data: data,
        dataType: "html",
        success: function(html) {
            MyCallback(html);
        }
    });
}

Answer 4

jQuery("#test").dialog({
           autoResize:true,
           width:500,
           height:600,
           modal: true,
           bgiframe: true,
           }).parent().appendTo("form");

Это работает как шарм