диалог jQuery / конфликт сериализации?

Question

Я столкнулся с проблемой, когда поле ввода в форме, которую я использую, должно отображаться только при определенных условиях. Я решил отобразить его с помощью метода jQuery dialog(). Однако после вызова метода dialog() любые последующие вызовы метода jQuery serialize() будут исключать это поле ввода из сгенерированной строки. Я подозреваю, что это как-то связано с dialog() удалением элемента из формы или чем-то подобным, но я не могу найти решение.

Вот HTML и JS для воспроизведения проблемы:

HTML:

<form id="form">
    <div id="dialog" style="display: none;">
        <input type="text" name="foo" value="bar" />
    </div>
    <!-- Other form inputs here -->
</form>

JS:

alert($('#form').serialize()); // "foo=bar"
$('#dialog').dialog({
    buttons: {
        OK: function() {
            alert($('#form').serialize()); // Should be "foo=bar", but is "" instead?
            $(this).dialog('close');
            alert($('#form').serialize()); // Still "".
            setTimeout(function() {
                alert($('#form').serialize()); // Still "".
            }, 0);
        }
    }
});

Edit:

В форме есть несколько других входных данных, которые не должны отображаться в диалоговом окне, поэтому размещение тегов form в диалоговом окне div не вариант для меня.

Answer 1

Да, это потому, что диалоговое окно изменяет разметку, чтобы оно работало, включая тег формы в диалоговом окне

<div id="dialog" style="display: none;">
    <form id="form">
        <input type="text" name="foo" value="bar" />
    </form>
</div>

РЕДАКТИРОВАТЬ - если вы не можете поместить тег формы, вам придется использовать скрытые поля и синхронизировать их с jquery, я боюсь

<form id="form">
    <div id="dialog" style="display: none;">
        <input type="text" name="foo_dialog" class='dialog' value="bar" />
    </div>
    <input type="hidden" name="foo" value="" />
    <!-- Other form inputs here -->
</form>

JS

$('input.dialog').keyup(function(){
    var name = this.name.replace('_dialog', '');
    $('input:hidden[name='+name+']').val(this.value);
});

Answer 2

У меня была похожая проблема, когда я заполнял диалог с загруженным Ajax контентом form и сериализировал его.

form был сериализован так:* Я решил это, выполнив:

function genera() {
    var form = $('#encuesta').serialize();
    $.ajax({
        type: "POST",
        url: "genera_encuesta.php",
        data: form,
        success: function(datos) {
             $('#res1').html(datos);
        }
    });     
}

....

Надеюсь, это поможет кому-то не тратить много времени.

Answer 3

@ NicolaPeluchetti предложил одно возможное решение, но я нашел, что оно не доставляет хлопот:

В опциях dialog() я добавил следующее:

close: function() {
    $(this).appendTo('#form');
}

По сути, он вставляет #dialog обратно в #form при закрытии диалога.Это не поможет, если вам нужно, чтобы входные данные были частью формы , пока диалог открыт , но в моем случае мне нужно было, чтобы он был доступен только после закрытия диалога.