jQuery Modal Popup對話框未加載內容

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>

我稱此為單擊按鈕之一。 它顯示沒有任何數據的空白模式彈出窗口

沒有p標簽和li標簽

我想從加載函數加載數據，該函數現在將返回一項。 當我調試它時，我能夠在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>