Use jQuery load() to dynamically load element view

I have the following jQuery code:

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

This makes a link load up a dialog box which is created in the DOM and then will load it's content dynamically using开发者_如何学JAVA an element view here: app/views/elements/lang-dialog.ctp

How do I do this though using CakePHP to spit out the element in the load method of my jquery code?

Thanks

---

You need to move the $('#lang-dialog').dialog(...) call into a success callback of the .load() method. Otherwise you will try to create a dialog before the markup is loaded (because .load() is asynchronous).

Can you explain that with a code example please?

Certainly.

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