Question

我从this thread获得了这个动态创建的JQueryUI对话框，它通过<a href='2.html'>的Ajax加载内容。但我发现以下代码存在问题。尽管如控制台中所示成功完成了AJAX请求，但内容无法附加到对话框容器中。任何人都可以在这一行找出加载函数的问题：

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

我试过了

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

他们工作。

代码：

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

你可以这样做：

创建一个div，并在其中使用它来附加内容。

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

转换对话框中的第一个div：

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

将内容附加到您的第二个div：

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

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

Answer 2

似乎你的哈希之前有一个空格......试试这个：

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

无法在jQuery对话框中加载AJAX内容

2 个答案: