Использование диалогового окна jQuery UI («уничтожить») помещает элемент в неправильное место? - PullRequest
Новая
       10

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

5 голосов
/ 18 ноября 2009

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

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

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

Ответы [ 3 ]

14 голосов
/ 10 августа 2011

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

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

Пример кода: 

$('a.popup-modal').click(function(e){
    var $modal = $(this).closest('form').find('.modal').clone();
    $modal.dialog({
        autoOpen: true, 
        close: function(event, ui){
            $(this).remove();
        }
    });
});
8 голосов
/ 18 ноября 2009

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

  • Когда вы создаете диалог, 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>
0 голосов
/ 18 ноября 2009

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

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

<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/

...