problems with javascript function loading content from other files

Question

Basically I'm trying to build a functionality in which I only really edit my index.php, I got a lot of other php files with just a form in them or just a few lines of text.
What I want to achieve is to load these other files in the contentwrapper of my index.php.

I have been successfull on doing this with an iframe and with a html <object> .
The problem with these though is that first of all they load an all new #document in the DOM, and also my webpage has no set height so height: 100% won't work on those and I would get these ugly scrollbars and stuff.

after searching a lot on SO today I found a few interesting solutions which I combined, this is what I'm trying now:

<script type="text/javascript" href="js/csi.min.js"></script>
<script type="text/javascript">

function load_content(target){
    document.getElementById('contentwrapper').innerHTML='<div data-include="' + target + '" ></div>';
    return false;
}

</script>

now you may question what data-include is, this is a very nice workaround I found on SO.

THIS is what it does , it basically calls a .js file that replaces the containing element with the data that is in the file (target in the above example)

I call this functionality like this:

<a href="#" onclick="load_content('update.php');">Update profile</a>

It works as far as adding this to the DOM:

<div id="contentwrapper">
    <div data-include="update.php" ></div>
</div>

but besides that it does nothing, I think that it doesn't call the .js file for the data-include attribute. But I can't find a solution for this nowhere.

(BTW: the data-include attribute does work if I put it in a tag manually without javascript)

I Hope I didn't overexplain the situation, and I thank everyone that tries to help in advance!

Answer 1

The csi.js script is only run once after the page is loaded. It just goes over all the elements with the data-include attribute and runs the fragment function.

<script type="text/javascript">
function fragment(el, url) {
    var localTest = /^(?:file):/,
        xmlhttp = new XMLHttpRequest(),
        status = 0;

    xmlhttp.onreadystatechange = function() {
        /* if we are on a local protocol, and we have response text, we'll assume
         * things were sucessful */
        if (xmlhttp.readyState == 4) {
            status = xmlhttp.status;
        }
        if (localTest.test(location.href) && xmlhttp.responseText) {
            status = 200;
        }
        if (xmlhttp.readyState == 4 && status == 200) {
            el.outerHTML = xmlhttp.responseText;
        }
    }

    try { 
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } catch(err) {
        /* todo catch error */
    }
}

function load_content(target){
    fragment(document.getElementById('contentwrapper'), target);
    return false;
}
</script>

Then call it like this:

<a href="#" onclick="load_content('update.php');">Update profile</a>

So, the only thing you need is to call this function for the new created element. Pass the DOM element and the url to this function and it will take care of loading the contents of the requested resource in the corresponding element.

Answer 2

May we assume that you followed this advise from the repository: The only caveat is Chrome, which restricts access to local files via AJAX. To resolve this, simply add --allow-file-access-from-files to your Chrome runtime.

If you didn't, and you're using Chrome, then this stands out to me, and you didn't indicate that you'd corrected the security block that Chrome puts in place.

Answer 3

The csi.js only runs on window.onload. Try

<a href="#" onclick="function() {load_content('update.php'); window.onload(); }">
Update profile</a>