jQuery AJAX Dialog

I have the following jQuery UI code:

            $('#lang-dialog').dialog({
                modal: true,
                draggable: false,
            开发者_如何转开发    resizable: false,
                autoOpen: false
            });


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

This allows a link to load up a dialog box instead of doing it's using hypertransfer.

However their is no #lang-dialog on the page as instead I want to create it using jQuery and then use AJAX to load in the contents so for example: $('#lang-dialog').load('/elements/dialogs/language.ctp');

Can anyone help? Thanks

As Fosco mentions, add this before you call .dialog():

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

If it's a method that may get called more than once:

// prevent multiple div's from being added...
if(!$('#lang-dialog').length){
    $('body').append('<div id="lang-dialog"></div>');
}

You want to do the Ajax logic yourself instead of using .load():

$.get(url, function(html) {
  $('some-parent-element').append('<div id="lang-dialog"></div>');
  $('#lang-dialog').html(html).dialog({
    ...
  });
});

Try creating a html element on the fly as shown below.

var $dialog = $('<div id="dialog" title=""></div>').dialog({
        autoOpen: false,
        modal: true
    });