Как определить, что вызвало событие закрытия в диалоговом окне JQuery UI

Question

У меня есть кнопки Создать и Отменить как часть модального диалога jquery-ui. Я хочу сделать определенную вещь после закрытия диалогового окна, только если пользователь нажимает «Создать». Если они нажимают «Отмена», или «X», или нажимают «Esc», я хочу сделать что-то еще. Есть ли способ передать параметры в обработчик событий закрытия или каким-либо другим способом определить причину закрытия?

Answer 1

В событии close вы можете узнать, что произошло, посмотрев на параметр event (параметр 1).

Если диалоговое окно было закрыто нажатием [x] , тогда вы получите mouse-event fields.

Аналогично, если диалоговое окно было закрыто нажатием Escape , тогда вы получите клавиатурное событие поля.

Если диалоговое окно было закрыто программно, то ни одно из вышеперечисленного не применимо.

Итак, хорошее место для начала - посмотреть на event.which . Закрытие с помощью [x] будет означать, что вы получите значение кнопки мыши (от 1 до 3), а закрытие с помощью Escape будет означать, что вы получите код клавиши (27). Закрытие программно означает событие, которое будет неопределенным.

Теперь вернемся к вашему вопросу ...

Вы хотите сделать одну вещь, если они нажмут кнопку «Создать» - это просто, просто вставьте это в функцию для этой кнопки.

Вы хотите сделать что-то еще на [x], Escape или нажав Cancel. Создайте функцию с именем cancelled () (или как угодно), а затем вызовите эту функцию на кнопке Cancel и вызовите ее в событии закрытия , если event.which имеет значение .

Как то так ...

buttons: {
    'Create': function() {
        // do your stuff here
        $(this).dialog('close');
    },
    Cancel: function() {
        cancelled();
        $(this).dialog('close');
    }
},
close: function(event) {
    if (event.which) {
        cancelled();
    }
}

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

Answer 2

Определите события для ваших кнопок следующим образом:

$("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        height: 300,
        modal: true,
        buttons: {
            'Create': function() {
                alert('the user clicked create');
                $(this).dialog('close');
            },
            Cancel: function() {
                alert('the user clicked cancel');
                $(this).dialog('close');
            }
        },
        close: function() {
           // do somthing

        }
});

Также посмотрите на параметры, передаваемые в событие close, сигнатура метода:

function(event, ui)

Вы можете найти больше информации здесь текст ссылки

Answer 3

попробуйте, как описано здесь: http://jqueryui.com/demos/dialog/#modal-confirmation

- редактировать

скопировано по ссылке сверху:

    var trigger = "";
    $("#dialog").dialog({
        bgiframe: true,
        resizable: false,
        height:140,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Create': function() {
                // do your stuff
                trigger = "create";
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
        close: function() {
            if (trigger == "create")
                // do something here
        }
    });

Answer 4

$('#jqPopup').dialog({modal:true,title:tit,autoOpen:false,beforeclose:function(){
   //Will get triggered when user press the 'X' button 
   $("#wholeContent").css('display','block');} 
});

$("#wholeContent").css('display','none');

$('#jqPopup').dialog('open');