JQuery UI Dialog: закрыть изнутри

Question

JQuery UI Dialog: закрыть изнутри

0

Я пытаюсь закрыть jQuery UI Dialog изнутри загруженного извне файла, который содержит ссылку, которая нажала, чтобы закрыть циферблат.

"Основной" файл содержит следующее:

<div id="dialog-operations"><div id="dialog-content"></div></div>
<a href="#" id="search-client-button">Search</a>

И сценарий:

$("#dialog-operations").dialog({
    autoOpen: false,
    title: "Search",
    width: 800,
    height: 500,
    modal: true,
    position: { my: "center center", at: "center center" },
    open:  function(event, ui) {
        $('#dialog-content').load('myFile.html');
    },
    close: function() {
        $(this).dialog('close');
    }
});

$("#search-client-button").click(function() {
    $("#dialog-operations").dialog("open");
});

Динамически загруженный myFile.html выполняет поиск через Ajax и показывает некоторые ссылки, которые выполняют некоторые действия, и в конце должен закрыть диалоговое окно (в следующем примере я просто пытаюсь закрыть диалоговое окно Ajax):

$.ajax({
    url: "search.php",
    data: $("#search-user-form").serialize(),
    type: "GET",
    context: this
}).done(function(data) {
        $(this).closest('.ui-dialog-content').dialog('close'); // not working
        $("#dialog-operations").dialog( "close" ); // not working
        $(this).dialog("close"); // not working
        this.close(); // not working
        $(this).dialog().dialog("close") // not working
});

Диалог не закрывается, и в консоли FireBug я получаю ошибки по неопределенным методам или следующий:

Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'

Что я делаю не так? Возможно ли закрыть диалоговое окно из файла, загруженного с помощью Ajax? Я использую jQuery 1.11.0 и jQuery UI 1.10.4.

Я бы очень признателен за любые предложения!

РЕДАКТИРОВАТЬ

После @Justin помощи и много обсуждений это код, который я, наконец, в конечном итоге. Важная информация: сначала загрузите файл, а затем определите Диалог!

$("#dialog-content").load('myFile.html', function(){
    $("#dialog-operations").dialog({
        autoOpen: false,
        title: "Search",
        width: 800,
        height: 500,
        modal: true,
        position: { my: "center center", at: "center center" }
    });

    $("#search-client-button").click(function() {
        $("#dialog-operations").dialog("open");
    });

});

И во включенном файле (только важный фрагмент):

$.ajax({
    url: "search.php",
    data: $("#search-user-form").serialize(),
    type: "GET",
    context: this
}).done(function(data) {
    $("#dialog-operations").dialog("close");
});

К сожалению, этот подход нарушает разделение (включенный файл ссылается на контейнер, определенный в родительском файле), поэтому, вероятно, я просто прекращу идею включения содержимого Dialog из другого файла. Но это другая история.

Jacek 08 март 2014, в 08:06

Источник

Теги:

jquery

jquery-ui

jquery-ui-dialog

1 ответ

Ещё вопросы

Justin Paul Paño · Accepted Answer · 2014-03-08T06-34-00.000Z

Попробуйте удалить параметр контекста в вашей конфигурации ajax или попробуйте изменить параметр контекста на элемент DOM вместо этого.

РЕДАКТИРОВАТЬ

Кажется, теперь я знаю, где ты ошибся. Возможно, потому, что функция $.ajax уже была выполнена javascript, прежде чем ваша функция загрузки сначала завершила свой собственный запрос ajax. Попробуйте запустить функцию загрузки, а затем поставьте на нее второй параметр - функцию обратного вызова, которая создает диалог и другие материалы. Я удалил опцию open

open:  function(event, ui) {
    $('#dialog-content').load('myFile.html');
}

в вашей инициализации диалога.

$('#dialog-content').load('myFile.html', function(){
    $("#dialog-operations").dialog({
        autoOpen: false,
        title: "Search",
        width: 800,
        height: 500,
        modal: true,
        position: { my: "center center", at: "center center" },
        close: function() {
            $(this).dialog('close');
        }
    });

    $("#search-client-button").click(function() {
        $("#dialog-operations").dialog("open");
    });

    $.ajax({
        url: "search.php",
        data: $("#search-user-form").serialize(),
        type: "GET",
        context: this
    }).done(function(data) {
        $(this).closest('.ui-dialog-content').dialog('close'); // TEST
        $("#dialog-operations").dialog( "close" ); // TEST
        $(this).dialog("close"); // TEST
        this.close(); // TEST
        $(this).dialog().dialog("close") // TEST
    });
});

Большое спасибо за ваше предложение. После еще одного тестирования я понял, что это не проблема ajax. Я провел следующий тест на той же странице, которая открывает диалог: $("#search-client-button").click(function() {$("#dialog-operations").dialog("open"); alert('test'); $("#dialog-operations").dialog("close");}); и получил ту же ошибку в FireBug: Error: cannot call methods on dialog prior to initialization; attempted to call method 'close' . Похоже, загрузка внешнего файла с помощью .load() приводит к тому, что Dialog теряет свой контекст?
Просто подтвердил, что: изменение этой части Dialog: open: function(event, ui) {$('#dialog-content').load(url)} с этим: $('#dialog-content').html('<div>Test content</div>'); делает, что диалог открывается и закрывается, как ожидалось. Все еще не знаете, почему он теряет свой контекст?
Джастин, это была проблема! Сначала загрузите внешний файл, а затем определите диалог, а не наоборот. Я отредактирую свой вопрос, чтобы показать, чем я наконец закончу. Спасибо большое за помощь!