Запуск функции после загрузки диалогового окна 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(this.href, myFunction());

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

open: myFunction(),

что я делаю не так?

12
jquery jquery-ui jquery-ui-dialog

5 ответов

Решение #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...
})
29

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

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

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

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

3

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

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

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

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

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

$("#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");
    });
}
});

надеюсь, что это помогает.

2

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

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 должно быть без скобок и только имя самой функции, чтобы заставить ее работать. Я не совсем уверен, как это работает, но если вы это выясните, дайте мне знать в комментариях.

0

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

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

0