jquery dialog .html() question

Question

I am using a jquery dialog and want to set the .html value with an external html file located on the same server. What I'm unsure of is exactly how to achieve this.

var $tos_dlg = $('<div></div>')
  .html($(this).load('/includes/tos.html'))
  .dialog({
    autoOpen: false,
    title: 'Policies &amp; Terms of Service',
    width: 600,
    height: 400,
    modal: true
});

The above section where the .html() is called is where I want to inject the contents of the external file. I think that the .load function would work somehow, but just not sure if that is the right approach and if so, how exactly to implement it. Can anyone help?

Thanks

Answer 1

Call .load() on $tos_dlg directly:

var $tos_dlg = $('<div></div>')
    .load('/includes/tos.html')
    .dialog({
        autoOpen: false,
        title: 'Policies &amp; Terms of Service',
        width: 600,
        height: 400,
        modal: true
    });

Also, make sure you are attaching $tos_dlg to the DOM somewhere, via something like $tos_dlg.appendTo("#containerElement").

Answer 2

Try this:

var $tos_dlg = $('<div></div>').html($(this).load('/includes/tos.html'));
$("body").append($tos_dlg);
$tos_dlg.dialog({
    autoOpen: false,
    title: 'Policies &amp; Terms of Service',
    width: 600,
    height: 400,
    modal: true
});