Как закрыть диалог с помощью jQuery? - PullRequest
Новая
       35

Как закрыть диалог с помощью jQuery?

23 голосов
/ 15 июня 2011

Я использую приведенный ниже код для динамического создания виджета JQuery UI Dialog: 

 $(function () {
        var Selector = $("a:contains('sometext')");
        $(Selector).bind('click', function () {
            var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
            var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
            $('body').append(NewDialog);
            $('#MenuDialog').html(DialogContetn);
            $('#MenuDialog').hide();
            $('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' });
            $("#btnCloseDialog").live('click', function () {
                $("#MenuDialog").dialog('close');
            });
            return false;
        });
    });

При первой загрузке JQuery Dialog работает правильно, и когда я нажимаю на btnCloseDialog, JQuery Dialog успешно закрывается.

Однако после этого btnCloseDialog больше не закрывает диалоговое окно.Почему это происходит?

Обновление

Я поместил свой код в jsfiddle .

Это странное поведение, потому что кнопка правильно закрывает диалог в jsFiddle, но не в диалоге в моем проекте.

Ответы [ 5 ]

42 голосов
/ 25 октября 2011

Поскольку это проявляется на ранних этапах поиска для создания динамического диалога в jquery, я хотел бы указать на лучший способ сделать это.Вместо того, чтобы добавить свой div и содержимое диалогового окна в HTML, а затем вызвать его, вы можете сделать это гораздо проще, поместив HTML-код непосредственно в объект jquery, например: 

$(function () {
    $("a:contains('sometext')").click(function() {
        var NewDialog = $('<div id="MenuDialog">\
            <p>This is your dialog content, which can be multiline and dynamic.</p>\
        </div>');
        NewDialog.dialog({
            modal: true,
            title: "title",
            show: 'clip',
            hide: 'clip',
            buttons: [
                {text: "Submit", click: function() {doSomething()}},
                {text: "Cancel", click: function() {$(this).dialog("close")}}
            ]
        });
        return false;
    });
});

Я также показалкак вы можете поместить несколько кнопок со встроенными функциями вместо того, чтобы прикреплять функцию live () к кнопке.Я использовал этот метод в нескольких местах, и он прекрасно работает для меня.Он также поддерживает формы (я собрал данные в doSomething () и отправил через ajax, но другие методы тоже работают) и т. Д.

3 голосов
/ 15 июня 2011

Скорее всего, вам не следует использовать идентификаторы для динамически создаваемого контента, так как вы можете получить более одного элемента с одинаковым идентификатором - это означает, что document.getElementById (который, как я предполагаю, использует sizzle для селектора #id) вернет только первый (потенциально невидимый).

2 голосов
/ 06 июня 2013

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

Я также использую show / expire и moment.js для фильтрации по дате и затем использую куки с идентификатором каждого предупреждения (не показано здесь), чтобы предотвратить дублирование уведомлений. Это идет хорошо, и я мог бы просто решить собрать это как библиотеку в ближайшее время, если у меня будет достаточно интереса.

Бит, специфичный для этого вопроса, состоит из 2 частей; 1) JSON, который включает параметры для jQuery.dialog () и 2) код для использования этого JSON и создания диалога. Ключевым моментом здесь является обратить внимание на то, как я ссылаюсь на параметры объекта 'n' и использую их для динамического создания диалога. Объект tDlg является большой частью этого, поскольку именно он в конечном итоге представляет диалог и передается в $ (). Dialog ()

Фрагмент JSON, включающий параметры моего диалога: 

"doAlert":{
                "modal":false
                ,"height":240
                ,"width":380
                ,"title":"Welcome to the new BatchManager"
                ,"body":"<div style='text-align:center;'>Welcome to the new and enhanced<br/>BatchManager!</div><div style='text-align:center;'>Enjoy!</div>"
                ,"buttons":[
                    {
                        "text":"Ok"
                        ,"click":"$(this).dialog('close');"
                    }
                ]
            }

Фрагмент JavaScript (с использованием jQuery) для инициализации диалога на основе моего JSON (n соответствует doAlert, который является частью массива «уведомлений» в этом примере): 

var tDlg = {
    resizable: false,
    height: (n.doAlert.height) ? n.doAlert.height : 240,
    width: (n.doAlert.width) ? n.doAlert.width : 240,
    modal: (n.doAlert.modal) ? n.doAlert.modal : true,
    dialogClass: "dlgFont"
};
if (n.doAlert.buttons) {
    tDlg.buttons = [];
    $.each(n.doAlert.buttons, function (i, n) {
            tDlg.buttons.push({
                            text: n.text,
                            click: new Function(n.click)
                    })
    })
}
$('<div class="dlgFont" title="' + n.doAlert.title + '"><p><span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>' + n.doAlert.body + '</div>').dialog(tDlg);
1 голос
/ 08 января 2013

Лично я справился следующим образом:

1) Создайте html диалогового окна, с двумя размахами со значением xxx по умолчанию 

<div id="dialog1" title="Title of the dialog">
    <p>There are two variables: <span id="var1">xxx</span> and
    <span id="var2">xxx</span></p>
</div>

2) Подготовьте divявляясь диалоговым окном 

$(function() {
    $( "#dialog1").dialog({
    autoOpen:false,
        modal: true,
        buttons: {
        "Button 1": function() {
            $(this).dialog( "close" );
        },
        "Button 2": function() {
            $(this).dialog( "close" );
        }
    }
    });
});

3) И изменяя значение двух диапазонов с помощью этой функции, перед запуском диалога: 

function showDialog(value1,value2){
    $("#var1").html(value1);
    $("#var2").html(value2);
    $( "#dialog1").dialog('open');
}

4) Поэтому, когда вам это нужно,функция таким образом 

showDialog('tom','jerry');

Вы можете попробовать это в http://jsfiddle.net/sekmo/L46vb/1/

1 голос
/ 15 июня 2011

Несколько моментов для размышления:

  1. OnDialogClose вы должны отсоединить #MenuDialog от DOM, чтобы избежать нескольких объектов с одинаковым идентификатором, или вы можете проверить, существует ли div#MenuDialog перед добавлением одного.

  2. var Selector = $("a:contains('sometext')"); является бессмысленной линией, если вы не будете использовать ее снова где.

  3. Вы используете $('#MenuDialog') несколько раз. Было бы лучше присвоить его переменной, а не повторять запросы var Selector = $('#MenuDialog');.

...