I want to use jQuery to create server side includes, but I'd like to create a method to generate the content automatically based on the "title" attribute of the inserted element, such as:

<div class="js-include" title="nav.html"></div>
<div class="js-include" title="table.html"></div>

That way one script could be used to generate multiple content elements.

The content files are stored in the same folder as the base file. Here is the script I am trying to use, but it's not working:

<script>
$(".js-include").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});
</script>

I want to use jQuery to create server side includes, but I'd like to create a method to generate the content automatically based on the "title" attribute of the inserted element, such as:

<div class="js-include" title="nav.html"></div>
<div class="js-include" title="table.html"></div>

That way one script could be used to generate multiple content elements.

The content files are stored in the same folder as the base file. Here is the script I am trying to use, but it's not working:

<script>
$(".js-include").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});
</script>

• javascript
• jquery
• html

• js must be at the end of html,if ajax is correct it will work – Arun Killu Commented Jan 8, 2013 at 4:54

3 Answers 3

I would probably remend you use data-* attributes instead of title="...". I would make more sense here I think. Also, you don't need to replaceWith or even get, jquery has an ajax overload to help you out.

<div class="js-include" data-page="nav.html"></div>
<script>
$(function () {
    $(".js-include").each(function () {
        $(this).load($(this).data('page'));
    });
});
</script>

Try wrapping the code in $(document).ready() like so

<script type="text/javascript>
$(document).ready(function(){
    $(".js-include").each(function(){
        $(this).load($(this).attr("title"));
    });
});
</script>

If that doesn't work, make sure to check your browser's network/error console for HTTP errors.

hmm I think I understand what you wanna do. You wanna, using jQuery, load nav.html and put its content into that div?

Why don't you just do it from server side? If those divs are created server side, server knows during page load that they are needed there and can just include them, instead of leaving it for JS to handle.

I don't know how you could load nav.html using jQuery, maybe some AJAX/HTTP code. But once you have it on a variable, you can just use element.innerHTML to store any HTML text into a DOM element.

But, instead of having server setting a specific class and adding data into title attributes of some elements, (of course, not considering the better approach of server side just handling the include) I'd give these elements an id. Then, in the bottom of the HTML document, I'd print a JSON array holding those ids and what to do with them (in exemple the file to be loaded into them).

Then in a JS file I take that array, loop throu it and process its data as I want.

Edit: I never did such thing before, you gotta run it to test any sxyntax erros.

<?php
$fileslinks = array(
    array(
        'id'        => 'id1',
        'filename'  => 'file1.html'
    ),
    array(
        'id'        => 'id2',
        'filename'  => 'file2.html'
    ),
    array(
        'id'        => 'id3',
        'filename'  => 'file3.html'
    )
);
?>

<div id='id1'></div>
<div id='id2'></div>
<div id='id3'></div>

<script>
    var fileslinks = <?php echo json_encude($fileslinks); ?>;

    fileslinks.forEach(printFiles);

function printFiles(element, index, array){
    var fileContent = // load from element.filename
    document.getElementById(element.id).innerHTML = fileContent;
}


if(!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        var len = this.length;
        if(typeof fun != "function")
            throw new TypeError();

        var thisp = arguments[1];
        for(var i = 0; i < len; i++){
            if(i in this)
                fun.call(thisp, this[i], i, this);
        }
    };
}

</script>