JavaScript — XMLHttpRequest с холстом на странице загрузки

Я пытаюсь загрузить страницу с холстом через XHR, и холст не отображается. Я полагаю, что проблема связана с тем фактом, что я не добавляю ее к ответу XHR.

Главная страница

<script type="text/javascript">

function LoadContent1()
{
var LoadContent1;

if (window.XMLHttpRequest)
{
LoadContent1 = new XMLHttpRequest();
}

LoadContent1.onreadystatechange = function()
{
if (LoadContent1.readyState == 4 && LoadContent1.status == 200)
{
document.getElementById("loadContent1").innerHTML = LoadContent1.responseText;
document.getElementById("loadingImageContent1").src = "1-pixel.gif";
$("#loadContent1Parent").hide();
$("#loadContent1Child").hide();
}
}

LoadContent1.open("GET", "page.php", true);
LoadContent1.send();
}

</script>

Страница загружается через XHR (Page.php)

<canvas id="mycanvas_pie" height="290" width="290"></canvas>
<canvas id="mycanvas_pie2" height="290" width="290"></canvas>

<script>
var myPie = new Chart(document.getElementById("mycanvas_pie").getContext("2d")).Pie(pieData1,opts);
var myPie2 = new Chart(document.getElementById("mycanvas_pie2").getContext("2d")).Pie(pieData3,opts);
</script>

1

Решение

Прежде всего, вам нужно убедиться, что ваш AJAX-вызов запущен и возвращается с правильным HTML-кодом.
Вы можете легко узнать это в любом современном браузере, используя точки останова, например, или используя метод console.log ().

Вам также необходимо убедиться, что элемент, который вы пытаетесь заполнить ответом, уже существует в DOM. В вашем случае это идентификатор «loadContent1».

Другие рекомендации:

  • Я не рекомендую использовать (почти) одно и то же имя в именах переменных / функций / объектов, а также для элементов DOM. Попробуйте использовать описательные имена, потому что ваш код может быть легко запутанным, даже в этом крошечном фрагменте
  • если это не обязательно, постарайтесь избегать автоматического запуска JavaScript-кодов при получении и отображении HTML-кода по соображениям безопасности. Вы можете поместить этот код javascript в свою функцию обратного вызова, например, или даже лучше, если вы организуете эти строки в отдельный объект.
1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector