innerHTML на DOM? - PullRequest
Новая
       2

innerHTML на DOM?

0 голосов
/ 03 апреля 2012

У меня есть эта функция, которая переключает содержимое HTML с одного элемента на странице на другой.Проблема, с которой я столкнулся, заключается в том, что при запуске первой итерации этой функции она сохраняет исходные значения HTML.Я думал, что приведенный ниже код просто перезапишет текущее содержимое.Во первых я не прав?

Во-вторых, я использую Ajax для вызова контента.Может ли это быть причиной того, что DOM не видит изменения?

Вот мой код: 

function subNavContent ( ) {    
    //If ID is the reference.
    //navContent = document.getElementByID('pageNav').innerHTML;
    navContent = document.getElementsByClassName('pageNav')[0].innerHTML;   
    document.getElementById('subNav').innerHTML = navContent;
    return;}

Элементы HTML, которые я вызываю для переключения: 

            <nav id="subNav" class="aniSubNavOpen drop-shadow lifted">
            </nav>

            <div class="pageNav">
            <h1 data-title="Welcome to The Mind Company">
            <a>Welcome to The Mind Company</a></h1> 
            </div>

Ajax-вызов (и другие вещи для полноты). 

function subNavContent ( ) {    
    navContent = document.getElementsByClassName('pageNav')[0].innerHTML;   

    document.getElementById('subNav').innerHTML = navContent;}

function subNavLoader ( ) {
    var subNav = document.getElementById( 'subNav' );
    var tmp = '';

    if (subNav.className === 'aniSubNavClose' ) {
            tmp = 'aniSubNavOpen';  }
        else {
            tmp = 'aniSubNavClose';}

        subNav.className = tmp;
        return;}

function sectionAssure( classID, type ) {
    subNavLoader ( );

    setTimeout( function ( ) {

        var tmp = '';
        var sel = document.getElementsByTagName('section');

        for (var i=0; i<sel.length; i++){

            if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
            sel[i].style.display = tmp;  }  

        subNavLoader ( ); }, ( 1500 ) );  }

function loadContent ( classID, url, type ) {   
    var xmlhttp;

    if ( window.XMLHttpRequest ) {
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                document.getElementById( classID ).innerHTML=xmlhttp.responseText;}};   

        xmlhttp.open( "GET", url, true );           
        xmlhttp.send( );            
        subNavContent ( );}  
    return;  }

Ответы [ 2 ]

1 голос
/ 03 апреля 2012

Ваша функция не переключает контент, а копирует его. innerHTML - это строка, а не фактические элементы, содержащиеся в pageNav.

Чтобы переместить содержимое, вам нужно будет выбрать все дочерние элементы из pageNav и добавить их в subNav (используя appendChild).

1 голос
/ 03 апреля 2012

Если ваши объекты с class="pageNav" и id="subNav" существуют и pageNav содержит желаемое содержимое в нем при первом запуске функции subNavContent(), то содержимое первого объекта с class="pageNav" будет скопировано к объекту с id="subNav". Примечание. Это не перемещение содержимого, а создание копии HTML-кода и присвоение его объекту subNav. Он заменит предыдущее содержимое subNav.

Если он не работает при первом вызове, возможно, это связано с тем, что один из двух объектов еще не существует, или содержимое pageNav еще не было при запуске функции.

Кроме того, вы не можете иметь два элемента с одинаковым идентификатором. Ваш HTML показывает два элемента с id="subNav". Должен быть только один элемент с данным идентификатором. Вот почему document.getElementByid() возвращает только один элемент.

Кроме того, HTML в вашем вопросе не показывает объект с class="pageNav".

Также возможно, что есть проблема с тем, как вы делаете вызов ajax и вызываете эту функцию после завершения вызова ajax. Вы должны будете показать нам свой код ajax, чтобы мы могли это прокомментировать. Если, например, вы не дожидались вызова обработчика успеха вызова ajax, то новый контент не был бы на странице еще при первом запуске функции.

РЕДАКТИРОВАТЬ: после просмотра фактического кода для вызова AJAX на реальной странице ОП.

Я могу подтвердить, что способ, которым вы звоните subNavContent() при вызове ajax, неверен. Этот код не будет работать, потому что вы звоните subNavContent() до того, как новый контент будет загружен на страницу. Это ваша существующая версия кода: 

function loadContent ( classID, url, type ) {   
    var xmlhttp;
    var dir = getDir ( type );

    if ( window.XMLHttpRequest ) {
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                document.getElementById( classID ).innerHTML=xmlhttp.responseText;}};   

        xmlhttp.open( "GET", dir + url, true );             
        xmlhttp.send( );

        subNavContent ( );}  
    return;  }

Вы звоните subNavContent() сразу после отправки вашего ajax-запроса. Вы можете выполнить этот вызов только ПОСЛЕ того, как ответ получен, а данные помещены на вашу страницу. Вы можете изменить это на это: 

function loadContent ( classID, url, type ) {   
    var xmlhttp;
    var dir = getDir ( type );

    if ( window.XMLHttpRequest ) {
        xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
                document.getElementById( classID ).innerHTML=xmlhttp.responseText;
                subNavContent ( );
            }
        }   

        xmlhttp.open( "GET", dir + url, true );             
        xmlhttp.send( );

    }  
    return;  
}

Кроме того, у вас есть чрезвычайно сложный крепкий стиль для чтения, понимания, предотвращения ошибок и редактирования.

...