Why does jQuery.load not handle relative links?

Question

I'm using some basic jQuery to speed up my site by replacing the content via AJAX rather than fully reloading the page (similar to what Turbolinks does):

$("nav").delegate("a", "click", function() {
    href = $(this).attr('href');
    history.pushState(null, null, href);
    $('#main').load(href + " #main");
    return false;
});

The problem I'm having, though, is that the relative links on my /portfolio page fail. For example, I have <img src="website.jpg"> which is located at /portfolio/website.jpg, but throws a 404 because .load() is looking for /website.jpg.

I know that making the image paths absolute will work, but is there some way to fix this with JavaScript? And why doesn't jQuery handle this? Are relative links bad practice?

Answer 1

It's not jQuery. load is loading the resource. The thing is, though, that then that HTML is put in your current document, and so all links within that HTML are resolved relative to the current document, not relative to the URL you loaded.

You'll either have to make those root-relative paths, or use get to get the HTML and pre-process it yourself.

I haven't tried it, but you might play with a base element, dynamically adding it before doing the load (with the appropriate base URL derived from the href you're loading) and then removing it when the load is complete.

Edit: Yup, using base works:

$("nav").delegate("a", "click", function() {
    // *** Added var to next line
    var href = $(this).attr('href');
    // *** Added base
    var base = $('<base href="' + href + '">');
    // *** Put base in head
    $("head").append(base);
    history.pushState(null, null, href);
    $('#main').contents().hide();
    $('#main').load(href + " #main", function() {
        // *** Remove base; I *think* at this point it's already
        // been used (worked in my test, anyway)
        base.remove();
    });
    return false;
});

Note that I added a var before your href variable. It looked like you were falling prey to The Horror of Implicit Globals.