JQuery .load event causes Internal Server Error

Question

I tried to improve the speed of my website by loading most pages right at the beginning. Therefore I created a number of div-tags and wanted to load the other files right into them by using the load event of jQuery.

Here is my source code:

<script>
function LoadPages(){
    $(document).ready(function(){
        $("#content1").load("main.php",function(){
            $("#content2").load("page2.php");
        });
    });
}
</script>

When loading my website ther occurs an Internal Server Error 500. In fact, I like to load up to 10 pages, but the error occurs with 2 also. I call the function LoadPages() right after I define the divs in the body, so the divs exist when I call the function.

Note: If I only load one page, the code works. The code also works if the callback function of the first load event is empty, but if the callback is not empty (for example just an alert statement) then the error appears again. Does anyone have an idea what could cause the error?

Thank you for your help in advance.

Answer 1

This is a test suggestion, but is too big for a comment:

1. There is no need for the DOM ready as (from your comments) your calling code is defining the elements, so they must exist.

e.g. this will do

<script>
    function LoadPages(){
        $("#content1").load("main.php",function(){
            $("#content2").load("page2.php");
        });
    }
</script>

Note: redundant DOM ready handlers do nothing harmful, as they fire instantly, but they waste space so are best avoided.

2. Test your code by reusing the page you know works (e.g. main.php in both loads)

e.g.

<script>
    function LoadPages(){
        $("#content1").load("main.php",function(){
            $("#content2").load("main.php");
        });
    }
</script>

3. Test you pages directly by putting the URLs in your browser

e.g.

http://www.domain.com/main.php
http://www.domain.com/page2.php

and see what the problems are with the pages.