Question

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>

Answer 1

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.