Help with jQuery feature loader

JavaScript
1

Hey all, am updating a site that has a content loader for a div as follows:


$(document).ready(function() {
        $('#featureLoader').load('features/feature1.html');
});

function loadFeature(featureArea){
        // remove the feature pointer to all existing pointers + hide their features
        for (i=1; i<4; i++){
            if (document.getElementById('feature'+i).className=="featureActive"){
                document.getElementById('feature'+i).className=null;
            }
            if (document.getElementById('featureArea'+1).style.visibility=="visible"){
                document.getElementById('featureArea'+1).style.visibility="hidden";
            }
        }
    
        // set the feature pointer to the right area
        document.getElementById('feature'+featureArea).className="featureActive";
        
    
        // set the feature pointer to the right area
        $('#featureLoader').load('features/feature'+featureArea+'.html');
    }
</script>

                <div id="feature">
                    <div id="featureLoader"></div>
                    <ul id="featureAreas">
                    <li id="feature1" class="featureActive"><a href="#" onclick="loadFeature('1');">News</a></li>
                    <li id="feature2"><a href="#" onclick="loadFeature('2');">Donate</a></li>
                    <li id="feature3"><a href="#" onclick="loadFeature('3');">Get Involved</a></li>
                </ul>
        </div>

I would like to use the function on other pages, calling different html to the area. I have tried changing the following:


        $('#featureLoader').load('features/feature1.html');

to


        $('#featureLoader').load('features/newfeature1.html');

and


        // set the feature pointer to the right area
        $('#featureLoader').load('features/feature'+featureArea+'.html');

to


        // set the feature pointer to the right area
        $('#featureLoader').load('features/newfeature'+featureArea+'.html');

…and I achieve the right file being loaded, but then all other functionality borked.

I’ve also tried keeping the “feature” name, but adding a subdirectory for both of the above - and no dice :frowning:

Any ideas?

2

For the record, I’m a spanner. I had the files uploaded to the wrong directory!

However, using the subdirectory method, I get the second page loaded, but then lose functionality again :frowning: