it-swarm.com.ru

Запустите функцию после загрузки диалогового окна 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, например:

open: myFunction(),

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

12
HTX9

Решение № 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
Peter

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

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

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

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

3
Bruno Calza

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

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

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

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

В соответствии с предложением losnir используйте $ (this) .parent (). Обещание (). 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");
    });
}
});

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

2
Yang Kin

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

0
Patoshi パトシ

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

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

0
prince jose