Я пытаюсь заполнить данные данными из запроса к базе данных с помощью Ajax-вызова. Однако раздел, который я пытаюсь заполнить, остается пустым. JS находится в отдельном файле, который импортируется в конце HTML. Вызов функции для заполнения также находится в конце, поэтому я знаю, что проблема не в том, что ID еще не существует.
Вот содержимое моей функции onreadystatechange:
if (this.readyState == 4 && this.status == 200)
{
const data = JSON.parse(this.responseText);
cards = "";
for (x in data)
{
cards +=
" <!-- Story Card -->\n" +
"<div class=\"card filterDiv State3\" style=\"width: auto;\">\n" +
" <div class=\"card-body\">\n" +
" <h5 class=\"card-title\">State 3 Card title</h5>\n" +
" <h6 class=\"card-subtitle mb-2 text-muted\">Card subtitle</h6>\n" +
" <p class=\"card-text\">Some quick example text to build on the card title and make up the bulk of the card's content.</p>\n" +
" </div>\n" +
"</div> <!--End Story Card --> \n"
}
console.log(cards);
document.getElementById("left-col").innerHTML = cards;
}
Я добавил вызов console.log, чтобы подтвердить, что файл PHP возвращает правильное количество результатов (и удаленное предупреждение подтвердило, что JSON содержит всю правильную информацию и никаких ошибок), и все выводится на печать консоль правильно, но элемент не обновляется. Где это идет:
<div id="left-col">
<!-- To be populated by cards.js -->
</div>
Та же методика работала для другой области страницы, поэтому я не ожидал никаких проблем с этим. Что мне здесь не хватает?