javascript - Jquery 模态弹出对话框未加载内容

Question

我想显示一个模式弹出窗口，其中包含字符串列表

我试过了

在Jquery

$("#modalFilterDiv").load("<div><p>This is html generated from Jquery</p><ul><li>"+loopChartID+"</li></ul></div>").dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        hieght: 450,
        width: 800,
        dialogClass: 'FilterSelectedList',
        modal: true

    }).dialog("open");

在Index.cshtml

<div id="modalFilterDiv" title="Select Controls To Filter">
</div>

我在单击其中一个按钮时调用此函数。它显示空白模式弹出窗口，没有任何数据

without p tag and li tag

我想从加载函数加载数据，该函数现在将返回一项。 当我调试这个时，我可以看到loopChartID中的值，但它没有显示在模式弹出窗口中。

<div><p>Heading for List goes here</p><ul><li>"+loopChartID+"</li></ul></div>"

请帮助我理解这一点并使其发挥作用。

Answer 1

$.fn.load()从服务器加载数据并将返回的 HTML 放入匹配的元素中。当您需要设置 HTML 内容时，而不是 $.fn.load()使用$.fn.html()

$("#modalFilterDiv")
    .html("<div><p>This is html generated from Jquery</p><ul><li>"+loopChartID+"</li></ul></div>")
    .dialog({
    });

<小时/>

使用循环生成HTML

var ul = $('<ul />');
for(var i =0;i <10; i++){
    ul.append($('<li />', { text : i }));
}

var div = $('<div />')
            .html('<p>This is html generated from Jquery</p>')
            .append(ul);

$("#modalFilterDiv")
    .html(div)
    .dialog({
    });

$(function() {
  var ul = $('<ul />');
  for (var i = 0; i < 10; i++) {
    ul.append($('<li />', {
      text: i
    }));
  }

  var div = $('<div />')
    .html('<p>This is html generated from Jquery</p>')
    .append(ul);

  $("#modalFilterDiv")
    .html(div);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modalFilterDiv"></div>