Использование диалогового окна пользовательского интерфейса jQuery (уничтожить) помещает элемент в неправильное место?

У меня есть большая форма со многими частями. Для каждой части я хочу добавить небольшую кнопку «Всплывающее как диалоговое окно», которая будет преобразовывать эту часть в диалоговое окно по запросу, а затем (при закрытии диалогового окна) возвращаться обратно в форму с новыми входными данными.

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

Является ли это «особенностью» диалога ()? Что-нибудь с этим делать? Есть ли лучший способ сделать это без использования диалога()?


forms dialog jquery popup
person Sleepster    schedule 18.11.2009    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Да, это "особенность"... ха-ха... столкнулся с этим некоторое время назад. Вот несколько «ошибок», а затем действительно хакерский способ справиться с ними (хотя и эффективный, если вы планируете иметь много подчиненных форм):

  • Когда вы создаете диалог, jquery запоминает его и сохраняет в отдельный div, после чего никогда не кладет обратно (ага, документация заключается в том, что элемент никогда не возвращается туда, где он был)
  • По моему опыту, если после этого вы будете слишком много возиться со скрытыми элементами, вы можете нарушить будущую функциональность диалога. Лучше просто создать новое диалоговое окно из нового содержимого (особенно если в вашем приложении их много... кодирование каждой подчиненной формы вручную очень быстро станет утомительным).
  • Если вы не можете повторно использовать div, вам придется клонировать их и переименовывать (что я и делаю ниже)

После закрытия диалогового окна приведенный ниже фрагмент «клонирует» содержимое диалогового окна, переименовывает его атрибут id, затем добавляет измененное содержимое в «sub_form_container», таким образом создавая новый диалог/форму каждый раз, когда пользователь закрывает диалоговое окно. Надеюсь это поможет!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <link type="text/css" href="ui.css" rel="stylesheet" />  
  <script type="text/javascript" src="j.js"></script>
  <script type="text/javascript" src='ui.js'></script>
  <script type="text/javascript">
    $(document).ready(function() {
                newDialogs(2); 
    });     
    function newDialogs(idCounter) {
      $('#d1').unbind().bind('click', function() {
        $('#d'+ idCounter.toString()).dialog({close: function(event, ui){
            var newSubForm = $('#d'+idCounter.toString()).clone();
                idCounter += 1;
                newSubForm.attr('id', 'd'+idCounter.toString()).attr('class', '').attr('style', '');
            $('#sub_form_container').append(newSubForm);
            newDialogs(idCounter);
            $('ui-dialog').remove()
          }
        });
      });
    }

  </script>

</head>
  <body>
    <h1>Element above</h1>
    <div>
      <div id='d1'>Activate dialog</div>
      <div id='sub_form_container'>
        <div id='d2'>Dialog content <input type='text' /></div>
      </div>
    </div>
    <h1>Element below</h1>
  </body>
</html>
person btelles    schedule 18.11.2009

arrow_upward
14
arrow_downward

Это сработало для меня:

  • Клонировать диалог
  • Инициализировать клонированный диалог (чтобы оригинал остался на странице)
  • Удалите клонированный диалог, когда я закончу с ним

Пример кода:

$('a.popup-modal').click(function(e){
    var $modal = $(this).closest('form').find('.modal').clone();
    $modal.dialog({
        autoOpen: true, 
        close: function(event, ui){
            $(this).remove();
        }
    });
});
person Andrew    schedule 09.08.2011
comment
Это круто. Это проще, чем подход принятого ответа. Это действительно дерьмовая функция, они действительно должны исправить это дерьмо. - person Milimetric; 18.08.2011
comment
Очень эффективный. Просто убедитесь, что вы не закрываете divs на ids. - person geowa4; 14.12.2011
comment
Как бы вы поступили с модальными окнами с идентификаторами? Все работает, если я не закрою его, не вызывая дублирования. - person Mikhail; 01.02.2014

arrow_upward
0
arrow_downward

Возможно, добавьте какой-нибудь код, иначе трудно сказать, где/почему ваш код может дать сбой.

Вы можете просто сделать это так или похоже

<input id="text" name="textname" type="text">
<input
  type="button"
  value="Pop me up"
  onclick="$('#text').clone().dialog({
    modal:true,
    close: function(event, ui) {
        $('#text').val(this.value);
    }
  });"
>

Найдите образец http://jsbin.com/ujema/.

person jitter    schedule 18.11.2009