Запуск функции после загрузки диалогового окна jQuery

Это может быть простой вопрос, но я не могу заставить его работать. Я использую диалог jQuery для отображения формы, загруженной с другой страницы на моем сайте. Пользователь нажимает на ссылку, которая запускает диалог. То, что я пытаюсь сделать, - запустить функцию после загрузки HTML в диалог. Вот мой код для загрузки диалогового окна:

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("#dialogBox").dialog({
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

У меня есть функция myFunction(), которую я хочу вызвать, когда HTML загружается в диалог. Осмотрев немного, я попытался указать функцию в .load, например:

.load(this.href, myFunction());

Я также попытался использовать открытое событие, например:

open: myFunction(),

Что я делаю неправильно?

Ответ 1

Решение №1:

.load(this.href, myFunction);

Решение №2:

.load(this.href, function(){
  myFunction();
});

Решение №3 (желательно):

open: myFunction,

Решение № 4:

open: function(){
  myFunction();
}

Почему это?

var foo = myFunction(); // `foo` becomes your function return value
var bar  = myFunction; // `bar` becomes your function
bar();

Ваш код должен выглядеть так:

$("#dialogBox").load('http://example.com').dialog({
  title: $(this).attr("data-dialog-title"),
  close: function() { $(this).remove() },
  modal: true,
  open : myFunction // this should work...
})

Ответ 2

Ни один из решений не работал у меня. Я предполагаю, потому что обратный вызов open не вызывается, когда диалог завершен открытым. Мне пришлось использовать setTimeout, чтобы он работал.

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

setTimeout(function(){
    // myFunction();
},100);

Это, очевидно, зависит от того, что внутри myFunction.

Ответ 3

Для jQuery UI - v1.11.4 "полное" в фрагменте кода ниже не работает:

show: {
    effect: 'clip',
    complete: function() {
        console.log('done');
    }
},

Решение, которое работает для jQuery UI - v1.11.4.

Как подключить обратный вызов к эффекту jquery в диалоговом окне?

Как предложено losnir, используйте $(this).parent(). prom(). done:

$("#dialog").dialog({
show: {
    effect: "drop",
    direction: "up",
    duration: 1000
},
hide: {
    effect: "drop",
    direction: "down",
    duration: 1000
},
open: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Opened");
    });
},
close: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Closed");
    });
}
});

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

Ответ 4

У меня возникла проблема с загрузкой внешней страницы, и я также хотел запустить функцию на загруженной странице. Очевидно, использование open: не работало в методе диалога.

jQuery("#pop-sav").load('/external/page', my_function_name );

jQuery("#pop-sav").dialog({
      resizable: false,
      width:'90%',
      autoReposition: true,
      center: true,
      position: 'top',
      dialogClass: 'pop-dialog pop-sort'
});

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

Ответ 5

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

Нажмите здесь для документации