Question

This is my first time using AJAX. I’m trying to load one of my pages when a link is clicked (I know I can just do <a href="something.html"> but I am doing it just for the sake of using AJAX, and ran into an issue where my page loads but the javascript of the page doesn’t. Is this a normal AJAX consequence? I’m guessing it has to do with dataType: html? Here’s my code:

function getContent(filename) {
    $.ajax({
        url: filename,
        type: "GET",
        dataType: "html",
        beforeSend: function(){
            $('html').html('<img src="../images/loading.gif">');
        },
        success: function (data, textStatus, xhr) {
            if (filename == "second.html") {
                setTimeout(function (){
                    $('html').html(data);
                }, 2000);
            } else {
                $('html').html(data);
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            $('html').html(textStatus);
        }
    });
}

Answer 1

Can you check chrome’s network monitor? First off, does anything get a 404? Is the file literally second.html? If so then there shouldn’t be path issues. Next what is the “response” that appears for that item? Does that response look ok?

Next, why don’t you try moving the JS from head into the body for the second page? JS should always be right before the closing body tag for performance reasons. Also, there may be an issue with JS being in head and it not getting executed for that reason.

You should be able to load anything on your domain without any issues via AJAX, but there are path issues to watch out for.