Снова откройте диалог jQueryUI после его закрытия. - PullRequest
Новая
       2

Снова откройте диалог jQueryUI после его закрытия.

3 голосов
/ 07 марта 2011

У меня есть несколько ссылок на странице, и я хочу показать отдельные диалоги jQuery для каждого из них.Вот разметка: 

<html>
    <body>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                 <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
        <div class="container">
            <a href="#" class="delete_link">delete</a> <!-- when this link is clicked, dialog should popup -->
            <div class="dialog_box"> <!-- this is the dialog for jquery UI -->
                 Pleasy specify a reson for your action    
                  <textarea rows="5" cols="60"></textarea>
            </div>
        </div>
    </body>
</html>

И Javascript: 

$(document).ready(function() {
    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        var d = $(this).closest('DIV.container').find('DIV.dialog_box').dialog({
            autoOpen: false,
            title: 'You are going to delete a div!',
            buttons: {
                "Do delete": function() {
                    alert('You have entered:' + $(this).find('textarea').val());
                    $(this).dialog("close");
                    $(this).closest('DIV.container').hide(); //hiding div (primary action)     
                }
            },
            width: 800
        });
        d.dialog("open");
    });
});

Как видите, ссылки, которые инициируют событие, имеют класс delete_link и DIV, которые должны быть диалоговыми окнами jQuery UI, иметь dialog_box класс.

Проблема: , когда диалоговое окно открыто и пользователь нажал «закрыть», невозможно снова открыть диалоговое окно.

Согласно поиску Google и SO яЯ не первый с этой проблемой.Это сообщение, например: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ Кажется, что диалог должен быть каким-то образом инициализирован перед действием click(), но во всех решениях на странице есть только один диалог с назначенным идентификатором - я просто не могу применить это кмоя ситуация.

Я пробовал это, но это не работает: 

$(document).ready(function() {
    //initializing
    $('DIV.dialog_box').dialog({
        autoOpen: false,
        title: 'You are going to delete a div!',
        buttons: {
            "Do delete": function() {
                alert('You have entered:' + $(this).find('textarea').val());
                $(this).dialog("close");
                $(this).closest('DIV.container').hide(); //hiding div (primary action)     
            }
        },
        width: 800
    });

    $('.delete_link').click(function() {
        alert('about to show jQuery dialog!');
        $(this).closest('DIV.container').find('DIV.dialog_box').dialog("open");
    });
});

Я подготовил демо на jsFiddle: http://jsfiddle.net/NQmhk/ Нет jQUery UI css там, ноЯ надеюсь, что этого будет достаточно, чтобы понять проблему.

Любая помощь будет принята с благодарностью.

Ответы [ 8 ]

5 голосов
/ 10 марта 2011

На самом деле у меня была похожая проблема, и с некоторыми подсказками я решил ее.

В основном я создаю ссылку с классом "show-popup-link", которая откроет следующий элементкак всплывающее окно при нажатии. 

<a href="#" class="show-popup-link">Click for popup</a>
<div class="hidden-element">Some content for the popup</div>

И после загрузки страницы я выполняю этот метод javascript: 

function SetupShowPopupLink() {
   $("a.show-popup-link").click(function () {
      var $link = $(this);
      var dialogClone = $link.next().clone();
      $link.next().dialog({ 
         title: "title", 
         close: function () { $link.after(dialogClone); }
       });
   });
}

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

Моя единственная проблема заключается в том, чтоможет быть некоторая утечка памяти с элементом, который отображается как всплывающее окно, но, возможно, не так, как это должно быть обработано jquery-ui.

Я надеюсь, что это работает для вас.

4 голосов
/ 07 марта 2011

Попробуйте вызвать диалоговое окно («уничтожить») в функции кнопки диалога.

1 голос
/ 14 февраля 2013

Вы все равно должны вызывать «уничтожить» в диалоге, несмотря ни на что.Это предотвратит утечку памяти (несколько DIV), создаваемую при каждом вызове диалога.В функции диалога «close» просто вставьте $ («# dialog»). Dialog («уничтожить»);сделать правильную уборку.

1 голос
/ 07 марта 2011

Один из вариантов - поставить идентификатор в каждом диалоговом окне, например: 

<div id="dialog_box_1" class="dialog_box">
  ...
</div>

. Затем укажите следующую ссылку, которая открывает диалоговое окно (изменение # 1 для открытия соответствующего диалогового окна): 

<a href="#1" class="dialog_open">Open</a>

Теперь вы можете переместить код, который подключает диалоговое окно, к событию click и попробовать что-то вроде: 

<script type="text/javascript">
    $(function() {
        $('.dialog_box').modal();

        $('.dialog_open').click(function(e) {
             e.preventDefault();
             var id = $(this).attr('href').replace('#', '');
             $('#dialog_box_' + id).dialog('open');
        });
    });
</script>

Обратите внимание, что я никогда не использовал диалоговое окно jQuery UI.

Надеюсь, это поможет.

1 голос
/ 07 марта 2011

Что происходит, так это то, что jQuery извлекает ваш диалог div из контейнера div и помещает его в самый низ вашего HTML-тела, и не закрывает его снова. Я думаю, что на самом деле это лучшая практика при использовании диалога jQuery в целом, в противном случае вам нужно написать некоторый код очистки, чтобы вернуть ваш диалог div в контейнер контейнера.

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

0 голосов
/ 18 января 2017

Я использую C #, MVC Partials и вложенные диалоги jQuery. Я отображал [второй] диалог (MVC Partial) из уже отображенного диалога (MVC Partial). Диалог будет отображаться повторно во второй раз, но он будет перемещен вверх, потому что старый контейнер диалога не разрушается, компенсируя вычисление центра / вершины.

Это удаляет диалоговое окно, оставляет уже отображенное диалоговое окно нетронутым, а повторное отображение диалогового окна очищается от ранее введенных данных. 

buttons: {
                        "Close": function () {
                            $("#MyDivPlaceholder").dialog("close");
                            $("#MyDivPlaceholder").empty();
                            $("div[aria-describedby='MyDivPlaceholder']").remove();
                        }
                    }
0 голосов
/ 11 июня 2016

изменение 

$(this).dialog("close");

с 

$(this).dialog("destroy");
0 голосов
/ 01 сентября 2014

да уничтожь, у меня будет работать: 

$('.ui-dialog-titlebar-close').click(function(){

   $("#dialog2").dialog("destroy");

});
...