Используйте jQuery load () для динамической загрузки представления элемента

Question

У меня есть следующий код jQuery:

$('body').append('<div id="lang-dialog"></div>');

                $('#lang-dialog').load('URL HERE...');

                $('#lang-dialog').dialog({
                    modal: true,
                    draggable: false,
                    resizable: false,
                    autoOpen: false
                });


                $('a#lang').click(function(event)
                {
                    event.preventDefault(); $('#lang-dialog').dialog('open');
                });

Это приводит к тому, что ссылка загружает диалоговое окно, которое создается в DOM, а затем динамически загружает его содержимое, используя представление элемента здесь: app/views/elements/lang-dialog.ctp

Как мне это сделать, используя CakePHP, чтобы выплевывать элемент в методе загрузки моего кода jquery?

Спасибо

Answer 1

Вам необходимо переместить вызов $('#lang-dialog').dialog(...) в успешный обратный вызов метода .load().В противном случае вы попытаетесь создать диалоговое окно до загрузки разметки (поскольку .load() является асинхронным).

Не могли бы вы объяснить это на примере кода, пожалуйста?

Конечно.

$('body').append('<div id="lang-dialog"></div>');

var $langDialog = $('#lang-dialog')

$langDialog.load('URL HERE...', function ()
{
    $langDialog.dialog({
        modal: true,
        draggable: false,
        resizable: false,
        autoOpen: false
    });
});

$('#lang').click(function()
{
    $langDialog.dialog('open');
    return false;
});