Question

我在HTML页面中有一个DIV容器，我在其中使用jquery.load（）函数动态加载其他HTML页面。在其中一个页面上，我需要在该页面加载之后/之前填充数据库中的表。如何调用刚刚在DIV加载页面后执行的javascript函数。

这是动态加载的＆＃34; Headquarters.html＆＃34;页面：

<div class="row">
    <div class="col-md-10"  >
        <table class="table table-bordered table-hover" id="tbl_hqlist">
                <tr>
                    <th> HQ Code</th>
                    <th> Headquarter Name</th>
                </tr>
        </table>
    </div>
</div>

我正在使用jquery.load（）函数加载该页面，如下所示：

function fn_headquarters(){
    $('#bodyContent').load("../html/headquarters.html");
    headquarterManagement();
    return;
 }

function headquarterManagement(){
        $.ajax({
            url:"../bin/manage_hq.php",
            data:{  'procAction': 1},
            method: 'POST',
            dataType: 'JSON',
            success: function(proc_msg){

       //   get data and populate the table using jquery.each() & jquery.append() functions

            },
            error: function(xhr){
                console.log(xhr.responseText);
            }
        })
        return;
 }

此代码无法更新＆＃34; tbl_hqlist＆＃34;。

Answer 1

jQuery load()使用AJAX，因此是异步的，幸运的是，它提供了一个回调参数。像这样调整......

function fn_headquarters(){
    $('#bodyContent').load("../html/headquarters.html", function(){
        headquarterManagement();
    });
    return;
 }

通过执行此操作，您将在填充之前确保元素实际存在。

？Bonus：这将从json数据创建表格标记：

function makeTableFromArray(arrayOfData){
    var html_buffer = [];
    html_buffer.push("<table><thead><tr>");
    var headerData = arrayOfData[0];
    for(var p in headerData)
        if(headerData.hasOwnProperty(p))
            html_buffer.push("<th>"+p+"</th>");
    html_buffer.push("</tr></thead><tbody>");
    for(var i=0; i<arrayOfData.length; i++){
         html_buffer.push("<tr>");
         for(var p in arrayOfData[i])
             if(arrayOfData[i].hasOwnProperty(p))
                 html_buffer.push("<td>"+arrayOfData[i][p]+"</td>");
         html_buffer.push("</tr>");
    }
    html_buffer.push("</table>");
    return html_buffer.join("");
}

https://jsfiddle.net/sbctwdLc/

如何在动态加载的DIV中填充html表

1 个答案: