Диалог jQuery больше не работает после добавления к <form> - PullRequest
Новая
       6

Диалог jQuery больше не работает после добавления к <form>

3 голосов
/ 20 августа 2010

У меня есть форма и div внутри этой формы, которые я использую для содержимого диалога jQuery.Моя цель состоит в том, чтобы диалоговое окно всплыло, пользователь вводит некоторую информацию в текстовые поля и текстовые поля, затем отправляет форму, и эти данные доступны для моего кода, но затем я могу снова открыть диалоговое окно (страницупосле отправки), введите новые данные и повторно отправьте форму, если они пожелают.

Если я выполню: 

$('div#mydialog').appendTo($('form#foo'));

, а затем: 

 $('div#mydialog').dialog('open');

aДиалог отображается только с кнопками, а за ним показывается div, недоступный для пользователя.(короче говоря, это похоже на взаимодействие кластеров виджетов пользовательского интерфейса)

Почему это добавление div # mydialog к форме (именно там он и должен был начинаться), а затем вызов .dialog ('open') приводит к такому поведению, и как я могу заставить его нормально открываться после добавления в форму # foo для отправки данных пользователя на сервер?

Заранее спасибо

EDIT: Похоже, что по какой-то причине диалог не добавляется после того, как он был первоначально открыт.то есть он открывается / редактируется / закрывается несколько раз, пользователь нажимает «отправить», div добавляется в форму, затем, когда я пытаюсь снова перейти к диалогу («открыть»), Firebug показывает, что он остается на месте, где он находитсяформа - jQuery, кажется, не пытается переместить его снова, а просто меняет встроенные стили.Кто-нибудь знает, почему это так?

РЕДАКТИРОВАТЬ 2: Я не знаю, какая часть моего html / скрипта поможет вам, это в основном то, что вы себе представляете: 

    <form id="foo"><! -- some form stuff -->
  <div id="stufftoputindialog" style="display:none;">
    <!-- text boxes/textareas to put in dialog -->
  </div>
</form>

и 

    $('#stufftoputindialog').dialog({
            height: 550,
            width: 400,
            modal: true,
            buttons: {
                "OK": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            },
            autoOpen: false
        }

при нажатии кнопки редактирования: 

   $('#stufftoputindialog').dialog('open');

при отправке формы: 

$('#stufftoputindialog').appendTo('form#foo');

затем при нажатиикнопки редактирования еще раз, 

$('#stufftoputindialog').dialog('open');

вызывает железнодорожную катастрофу пользовательского интерфейса (и согласно Firebug, #stufftoputindialog не перемещался за пределы формы до </body>, как это было в первый раз)

1 Ответ

4 голосов
/ 20 августа 2010

Это в контейнере, который вам также нужно переместить, сделайте это вместо: 

$('div#mydialog').parent().appendTo('form#foo');

Оболочка для таких вещей, как заголовок заголовка ... посмотрите на свой источник, когда вы вызываете .dialog(), этозавернув его в другой <div>, вам нужно перейти к этому .parent(), а затем переместить к этому элементу:)

...