Question

I’ve been strugling with query for some time. I have a CMS that i want to use on my site, buy i cant use PHP includes so i decided to use jquery. I have made all the necesary includes and when i open the webpage it doesn’t load all the files… Rarely does load() function load every file. Any ideas to solve the problem or alternatives? thanks.

<script type="text/javascript">
$(document).ready(function(){  
// find element with ID of "target" and put file contents into it  
$('#welcome-container').load('admin/data/blocks/Slider/Text.html');
$('#slides').load('admin/data/blocks/Slider/Imagini.html');  
$('#acasa-continut').load('admin/data/blocks/Acasa/Continut.html');  
$('#sidebar').load('admin/data/blocks/Sidebar/Continut.html');  
$('#sidebar-v1').load('admin/data/blocks/Sidebar/Video-1.html'); 
$('#sidebar-v2').load('admin/data/blocks/Sidebar/Video-2.html');
$('#principii').load('admin/data/blocks/Despre/Principii.html');
$('#echipa').load('admin/data/blocks/Despre/Echipa.html');
$('#echipament').load('admin/data/blocks/Despre/Echipament.html');
$('#contact-t').load('admin/data/blocks/Contact/Contact.html');
}); 
</script>

I have checked with deloper tools and it gives ,randomly on every refresh, 500 Internal Server Error on different elements

Answer 1

Client-side code to request composite HTML and distribute it to the various containers will be something like this :

$(document).ready(function(){  
    $.ajax({
        url: 'admin/data/blocks/all/page.html',
        dataType: 'json',
        success: function(data){
            $.each(data, function(i, obj) {
                $('#'+obj.target).html(obj.html);
            });
        }
    });
});

This assumes admin/data/blocks/all/page.html to be a server-side resource that will deliver a json-encoded response of the following construction :

[
    { 'target':'welcome-container', 'html':'<div>whatever</div>' },
    { 'target':'slides', 'html':'<div>whatever</div>' },
    { 'target':'acasa-continut', 'html':'<div>whatever</div>' },
    { 'target':'sidebar', 'html':'<div>whatever</div>' },
    { 'target':'sidebar-v1', 'html':'<div>whatever</div>' },
    { 'target':'sidebar-v2', 'html':'<div>whatever</div>' },
    { 'target':'principii', 'html':'<div>whatever</div>' },
    { 'target':'echipa', 'html':'<div>whatever</div>' },
    { 'target':'echipament', 'html':'<div>whatever</div>' },
    { 'target':'contact-t', 'html':'<div>whatever</div>' },
]