2015-07-15 4 views
0

Я делаю динамическую страницу, содержащую несколько div, которые меняются, когда пользователь выбирает перейти к следующему разделу на моей странице. Однако я не могу загрузить свой веб-сайт для первого набора информации. HTML содержит эти пустые divs, а затем моя функция загружается в файл JSON и изменяет divs по их идентификаторам. Когда я впервые загружаю свою страницу, эти divs появляются без текста. Может ли быть, что мой javascript не работает, когда страница загружена? Вот пример моего HTML:Изменение HTML с помощью javascript динамически, поскольку страница сначала загружается

<div id="passage-section"> 
<!-- Title --> 
<div id="passage-title"></div> 
<!-- The panel that will display the content --> 
<div id="passage"></div> 
<!-- Button that when clicked activates a dialog box for the passage. --> 
<button id="max-passage" class="max"></button> 
</div> 

А вот моя функция:

//This section of code handles the calling of the first passage. 
//Loading in the JSON file and changing the contents of the page. 
function loadFirstPassage() 
{ 
    var timeout = 250; 
    //load the new JSON file and change the elements 
    $.getJSON("passages/2.1.1.json", function(data) { 
     document.getElementById("passage-title").innerHTML = data["passageNumber"]; 
     document.getElementById("passage").innerHTML = "<p class='serif'>".concat(data["reading"]).concat('</p>');\ 

     //fading the elements back in 
     $("#passage-title").fadeIn(timeout); 
     $("#passage").fadeIn(timeout); 
    }); 
} 

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

<head> 
<!--The orginal load of the page maybe it works, who knows? --> 
<script> 
$(window).load(function() 
{ 
    loadFirstPassage(); 
}); 
</script> 

+2

Вы получаете любую обратную связь в консоли? Я бы предположил, что JS работает до загрузки элементов. – dan08

+0

Нет, моя консоль пуста. – RYDiiN

+0

Требуется дополнительное устранение неполадок. Добавьте некоторые 'console.log', чтобы убедиться: 1. функция определяется и называется правильно 2. 'data' на самом деле то, что вы думаете, это 3. элементы существуют, когда функция вызывается – dan08

ответ

0

Попробуйте

$(document).ready(function() { 
    loadFirstPassage(); 
}); 

вместо $(document).load.

+0

Это не делало никаких разница. Дивы все еще пустые. – RYDiiN

+0

Я бы сказал, что проблема с вашим методом loadFIrstPassage проверяет консоль на наличие каких-либо ошибок. – code

0

вы можете попробовать загрузить его сразу после DOM закончил

(function() { 
    console.log('DOM Loaded') 
})(); 

JQuery будет использовать

$(document).ready(function() { 
    console.log('DOM Loaded'); 
}); 
+0

Ничего, до сих пор загружаю мою страницу пустым div. – RYDiiN

+0

Вы могли бы добавить некоторый consol.log() в loadFirstPassage() и проверить, правильно ли загружен json или идентифицировать, когда что-то уволено. Кроме того, вы можете попробовать придерживаться одной конвенции, как сделать document.getElementById («пассажи названия»). InnerHTML до $ («# пассаж названия»). HTML , так как это уменьшит ваш код много и его легче отлаживать. –

Смежные вопросы