Question

I have this function that switches the HTML contents from one element on a page to the another. The issue I am having is the when first iteration of this function is ran it keeps the original HTML values. I thought the below code would simply overwrite the current contents. First am I wrong?

Second, I am using Ajax to call content. Could this be the cause where some how the DOM doesn’t see the change?

Here is my code:

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

The HTML elements I call to be switched:

            <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 call (and other stuff for sake of completeness.)

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;  }

Answer 1

If your objects with class="pageNav" and id="subNav" exist and pageNav has the desired content in it the first time you run the subNavContent() function, then the contents of the first object with class="pageNav" will be copied to the object with id="subNav". Note – this is not moving contents, but making a copy of the HTML and assigning it to the object subNav. It will replace the previous contents of subNav.

If it is not working the first time you call it, then it’s probably because one of the two objects doesn’t exist yet or the contents of pageNav is not yet there when you run the function.

In addition, you cannot have two elements with the same id. Your HTML shows two elements with id="subNav". There should only ever be one element with a given ID. That’s why document.getElementByid() only returns one element.

Also, the HTML in your question doesn’t show any object with a class="pageNav".

It is also possible that there is an issue with how you are making the ajax call and calling this function after the ajax call has completed. You will have to show us your ajax code for us to comment on that. If, for example, you weren’t waiting until the success handler of the ajax call gets called, then the new content wouldn’t be in the page yet the first time you ran the function.

---

EDIT: after looking at the actual code for the ajax call in the OP’s actual page.

I can confirm that the way you are calling subNavContent() in your ajax call is incorrect. This code will not work because you call subNavContent() before the new content has been loaded into the page. This is your existing version of the code:

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;  }

You are calling subNavContent() right after sending your ajax request. You can only run this call AFTER the response has been received and the data has been put in your page. You could change it to this:

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;  
}

Also, you have an extremely difficult bracing style to read, comprehend, prevent making mistakes and to edit.