javascript - 如何拉取由javascript函数创建的元素的innerHTML

Question

问题:

我有一个 id 为“tableholder”的 div 元素，它纯粹是为了将输出保存在一个 javascript 函数上，该函数通过 ajax 从 PHP 文件中提取数据。

在 tableholder 元素中，是一个 list.js 表，如果我们简单地包含他的 php 文件而不是通过 ajax 调用它并通过 innerHTML = ""设置它，它就可以工作。

动态创建的tableholder div 的innerHTML 的内容如何使用？

到目前为止的代码:

调用的 PHP 文件:

    <?php

// Connection details for the database being called.
include 'connection.php';

// Putting the query to the database in a variable called "$assets".
$assets = "SELECT * FROM assetregister.getassets";
$assetPull = $conn->query($assets);
$output = "";

// Pulling all of the details from the database and displaying them on the page within the inidividual divs.
if ($assetPull->num_rows > 0) {
    $output .= "<div id='users'>";
    $output .= "<input class='search form-control mt-2' placeholder='Search...' />";
    $output .= "<div class='m-2'>";
    $output .= "<button class='sort btn' data-sort='model'>Sort By Model</button>";
    $output .= "<button class='sort btn ml-2' data-sort='domain'>Sort By Domain</button>";
    $output .= "<button class='sort btn ml-2' data-sort='location'>Sort By Location</button>";
    $output .= "</div>";
    $output .= "<table class='table table.hover list'>";
    $output .= "<thead>";
    $output .= "<th style='text-align: center;'>Model</th>";
    $output .= "<th style='text-align: center;'>Serial Number</th>";
    $output .= "<th style='text-align: center;'>Asset Number</th>";
    $output .= "<th style='text-align: center;'>Domain</th>";
    $output .= "<th style='text-align: center;'>Location</th>";
    $output .= "<th style='text-align: center;'>Type</th>";
    $output .= "</thead>";
    while ($row = $assetPull->fetch_assoc()) {
        $output .= "<tbody class='list' style='text-align: center;'>";
        $output .= "<td class='model'>" . $row['modelName'] . "</td>";
        $output .= "<td class='serialNumber'>" . $row['serialNumber'] . "</td>";
        $output .= "<td class='assetNumber'>" . $row['assetNumber'] . "</td>";
        $output .= "<td class='domain'>" . $row['domain'] . "</td>";
        $output .= "<td class='location'>" . $row['locationName'] . "</td>";
        $output .= "<td class='type'>" . $row['type'] . "</td>";
    }
    $output .= "</tbody>";
    $output .= "</table>";
    $output .= "</div>";
    // If there is no rows in the table that is being called then they will display 0 Results... See below.
} else {
    $output .= "0 results";
}

echo $output;

$conn->close();
?>

这有效:

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <main class="col-12" style="margin-top: 80px;">
                <button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
                <?php include 'scripts/getAsset.php'; ?>
            </main>
        </div>
    </div>
</div>
<script>
    populatetable('tableholder');
    window.onload = function () {
        var options = {
            valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
        };
        var userList = new List('users', options);
    };
</script>

这会输出表格，所有 list.js 函数都按预期正常工作。

这行不通:

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <main class="col-12" style="margin-top: 80px;">
                <button class="btn btn-primary" onclick="assetSubmit()" style="width: 100%;">Add An Asset</button>
                <!-- Pulling in the results of the assets (most recent assets)  -->
                <div id="tableholder"></div>

                <!-- end -->
            </main>
        </div>
    </div>
</div>

<!-- PHP include for the footer -->
<?php include 'assets/layout/footer.php'; ?>

<!-- end -->

<script>
  populatetable('tableholder');
  window.onload = function (){
    var options = {
      valueNames: [ 'model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
    };

    var userList = new List('users', options);

  };
function populatetable(name){

  $.ajax({
    url: "scripts/getAssets.php",
    success: function(data){
      document.getElementById(name).innerHTML = data;
    }
  })
}
</script>

我可以假设:

从我为测试代码而放入的各种 console.log 行和 php 回显来看，问题似乎是用于启动 list.js 表的 javascript 命令无法找到“用户”由 document.getElementById(name).innerHTML = data; 在 populatetable() 函数中创建的表。我知道这一点，因为以下显示空白:

console.log(document.getElementById(tableholder).innerHTML);

我做错了什么，或者无法提取动态创建元素的 innerHTML 数据？

Answer 1

问题是当你调用 List() 的时候，ajax 调用尚未完成，因为它是异步的。

试试这个:

var options = {
    valueNames: ['model', 'serialNumber', 'assetNumber', 'domain', 'location', 'type']
};
var userList;

$(document).ready(function() {
    populatetable('#tableholder');
});

function populatetable(id) {
    $.ajax({
        url: "scripts/getAssets.php",
        success: function(data) {
            $(id).html(data);
            userList = new List('users', options);
        }
    });
}

在这里，我在任何有用的地方都使用 jQuery，并且我正在调用 List()只有在实际插入数据之后。

另请注意，就像我在评论中提到的那样，您需要移动 <tbody>循环外的行。