JQuery UI диалоговое окно удаляет <div>после закрытия - PullRequest
Новая
       5

JQuery UI диалоговое окно удаляет <div>после закрытия

0 голосов
/ 27 июля 2011

У меня есть три элемента div и кнопки для каждого из них для запуска моего диалогового окна. Когда я запускаю родительский div, он показывает диалоговое окно и содержимое двух других дочерних элементов без проблем.

Если запущен только дочерний элемент div, он открывается и отображает содержимое дочернего элемента div a ok,

но когда я открываю [нажмите кнопку для диалогового окна] родительского div, содержимое дочернего div исчезает [путем проверки через firebug] или не отображается,

но когда я запускаю кнопку для дочернего элемента div, открывается диалоговое окно, и содержимое в порядке.

Пожалуйста, помогите мне, чего мне не хватает. спасибо. 

        <div id="parentDialog">
         <div id="childoneDialog"></div>
         <div id="childtwoDialog"></div>
        </div>
    <input id="buttonParent" type="button" />
    <input id="buttonChildone" type="button" />

$("#buttonParent").click( $("parentDialog").dialog.("open") .... );
$("#buttonChildone").click( $("childoneDialog").dialog.("open") .... );

1 Ответ

0 голосов
/ 27 июля 2011

Проблема в том, что у вас есть вложенные диалоги. Диалог jQuery работает так, что он предполагает, что все диалоги должны быть эксклюзивными. Не вкладывайте свои диалоги, и все должно быть в порядке.

Обновление: на основе вашего комментария ниже, вот что вы можете попробовать. Это не идеально, но это должно сделать работу. Например: 

<div id="Dialog1">
    <!-- dialog1 stuff here -->
    <div class="formTarget"><!-- dynamically insert form here --></div>
    <!-- more dialog1 stuff here -->
</div>

<div id="Dialog2">
    <!-- dialog2 stuff here -->
    <div class="formTarget"><!-- dynamically insert form here --></div>
    <!-- more dialog2 stuff here -->
</div>

<div id="reusableForm">
    <form><!--yourformhere--></form>
</div>

<script>
function triggerDialog(d) { // note that 'd' is the ID of the dialog you want to trigger
   $('#reusableForm').appendTo('#'+d+' .formTarget');
   $(''#'+d).dialog('open');
}
</script>

На любой ссылке или кнопке, которые вы хотите активировать, выполните следующие действия: 

<a href="#" onclick="triggerDialog('Dialog1')">Click here to trigger Dialog 1</a>
<button type="button" onclick="triggerDialog('Dialog2')">Click here to trigger Dialog 2</button>

По сути, этот код перемещает форму в один диалог или другой, в зависимости от того, что передается в функцию triggerDialog. Он не идеален, но он должен дать вам некоторое представление об опциях, которые вы имеете с манипуляциями с JQuery и DOM. Некоторые другие методы jQuery, на которые вам следует обратить внимание: 

$.append()
$.clone()
$.after() / $.before()

Проверьте http://api.jquery.com/ для получения дополнительной документации.

...