Can't load AJAX content in jQuery dialog

Question

I got this dynamically created JQueryUI dialog from this thread that loads content via Ajax from <a href='2.html'> . But I found there is an issue with the following code. Even though AJAX request is successfully made as shown in Console, the content isn't able to append to the dialog container. Can anyone find out what's problem with the load function at this line:

dialog.load($(this).attr('href') + ' #content').dialog

I have tried

dialog.append($(this).data('source') + ' #content').dialog
dialog.text($(this).data('source') + ' #content').dialog

and they work.

Code:

var loading = $('<img src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" alt="loading" class="loading">');

$(document).ready(function () {

   $(document).ready(function () {
      $('button').click(function () {
       $(this).next('.area').append('<a id="open_dia_'+Date.now().toString()+'"  class="open_dia" title="this title" href="2.html">Click</a>');
   });

    $(document).on('click', '.open_dia', function (evt) {
        var dialogid = 'dialog_'+$(this).attr('id');
        var dialog = null;
        if ($('#'+dialogid.toString()).length == 0)
        {
            dialog = $('<div id="'+dialogid+'"></div>').append(loading.clone());
            dialog.load($(this).attr('href') + ' #content').dialog({
                title: $(this).attr('title'),
                width: 500,
                height: 300
            });
        }
        else
        {
            dialog = $('#'+dialogid.toString());
        }


        dialog.dialog('open');
        return false;

    });
});

Answer 1

You can do it in this way:

Create a div, and a div inside that you'll use it to append the content.

<div id="dialogDiv" title="this title" style="display:none;">
  <div id='dialogDivDynamic'></div>
</div>    

convert your first div in the dialog:

$("#selectionResult").dialog({
        modal: true,
        width: '900px',
        buttons: [{ text: "Close", click: functionToCloseDialog() }]
});

append the content to your second div:

$('#dialogDivDynamic').append("This is my new content");

function functionToCloseDialog() {
  $('#dialogDiv').dialog('close');
}

Answer 2

It seems that there is an space before your hash... Try this way:

dialog.load($(this).attr('href') + '#content').dialog({
  title: $(this).attr('title'),
  width: 500,
  height: 300
});