Блог

Главная - Вопросы по программированию - загрузка Chart.js на странице php через ajax вызов не работает

загрузка Chart.js на странице php через ajax вызов не работает

#php #ajax #chart.js2

#php #ajax #chart.js2

Вопрос:

У меня есть простой вызов ajax, который загружает страницу php. Я использую chart.js для построения гистограммы на основе динамических данных MySQL.

Если я перейду на эту страницу напрямую, она будет работать нормально. Однако, если я использую следующий код для загрузки страницы, данные на странице загружаются, а диаграмма — нет.

Скрипт, который я использую для вызова ajaxtest.php страница находится в index.php страница:

     <script>
                function getProduct(str) {
                    if (str == "") {
                        document.getElementById("txtHint").innerHTML = "";
                        return;
                    } else { 
                        if (window.XMLHttpRequest) {
                            // code for IE7 , Firefox, Chrome, Opera, Safari
                            xmlhttp = new XMLHttpRequest();
                        } else {
                            // code for IE6, IE5
                            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xmlhttp.onreadystatechange = function() {
                            if (this.readyState == 4 amp;amp; this.status == 200) {
                                document.getElementById("loader").innerHTML = ''; // Hide the image after the response from the server
                                document.getElementById("txtHint").innerHTML = this.responseText;

                            }
                        };
                        document.getElementById("loader").innerHTML = '<img src="imgs/loader.gif" />'; // Set here the image before sending request
                        xmlhttp.open("GET","ajaxTest.php?prod=" str,true);
                        xmlhttp.send();

                    }
                }
                </script>

В этом файле у меня есть bootstrap.css, загруженный в раздел head. В нижней части страницы, которую я загружаю jquery.js , bootstrap.js и некоторые customizations.js файлы (в таком порядке). Если я удалю их из index.php страница, это не имеет никакого значения, и диаграмма по-прежнему не загружается.

На ajaxtest.php страница у меня есть, она также вызывает одни и те же файлы в одних и тех же местах.

Я подумал, что это может быть моей проблемой, поэтому, когда я удалил их из своего index.php страница по-прежнему не загружается.

Я озадачен тем, почему он не загружается при вызове его через ajax, но загружается, когда я нажимаю на него напрямую. Я не вижу никаких ошибок в firebug / developer tools.

Любые мысли вообще будут оценены.

Комментарии:

1. Проблема в том, что chart.js (любой другой подобный плагин) делает это после загрузки (исходного) документа. Что вам нужно сделать, это сделать chart.js сделайте то же самое еще раз, как только ваш динамически вставленный HTML-код будет отрисован.

2. @jeff Любое направление о том, как я это сделаю? Спасибо!

3. у вас должно быть где-то что-то вроде var myChart = new Chart($("#myChart"), {...}); . Затем это должно быть вызвано после того, как ‘#MyChart’ вставлен в DOM, так что onreadystatechange .

4. Если вы опубликуете более релевантный код (результат ajaxtest.php того, как вы инициализируете диаграмму, ..) Я мог бы помочь больше, теперь я могу только догадываться.

5. @Jeff — у меня есть инициализация диаграммы внизу страницы после тега div для #mychart . Странная часть в том, что когда я нажимаю ajaxtest.php непосредственно страница нормально загружается с chart.js инициализация, как и ожидалось. Позвольте мне скинуть страницы в pastebin или что-то в этом роде и поместить ссылку, чтобы вы могли ее увидеть. Я уверен, что я делаю что-то глупое.

Метки: