Question

I have two plain html files.
The first has a tree on the left from which you select a category and then it displays on the right the html file according to the selection.
the folder structure is /main/Pages, the main folder contains the main html and the Pages folder the child htmls.

The problem: IE & Firefox – work but do not load the styles of the child pages nor execute their document.ready functions
Chrome – 404 error

The jQuery behind it all:

$(document).ready(function () {
    $('.child').hide();
    $('.parent').click(function (event) {
        event.preventDefault();
        $('.child', $(this).parent()).slideToggle('slow');
    });

    $('a').click(function(event) {
        var innerText = $(this).attr('href');
        var elem = $('#' + innerText);
        if(elem.length > 0) {
            $('#container').load("Pages/" + elem[0].innerHTML + ".html", function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#container").html(msg + xhr.status + " " + xhr.statusText + " <b>"+elem[0].innerHTML+"</b>");
                }
            });
        }
        event.preventDefault();
    });
});

Chrome header:

Request URL:file:///D:/PacientData/Pages/labDemandeCode1.html
OPTIONS file:///D:/PacientData/Pages/labDemandeCode1.html HTTP/1.1
Access-Control-Request-Method: GET
Origin: null
Access-Control-Request-Headers: Origin, X-Requested-With, Accept

Any help regarding both problems would be highly appreciated!!

Answer 1

Don’t use file:// when you’re testing AJAX stuff. It will not work very well. Put your files on a webserver, even if it is a local IIS of Apache server.