Clean URLs messing up relative links

Question

I have set up clean URLs and for those most part they work fabulously. However some of the relative paths for css, images, etc. are getting messed up, using the fake clean-URL root.

To start, here's my .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteBase /
# Rewrite for page and number
RewriteRule ^([a-zA-Z0-9\-]+)/([0-9\-]+)$ index.php?page=$1&n=$2 [L]
RewriteRule ^([a-zA-Z0-9\-]+)/([0-9\-]+)/$ index.php?page=$1&n=$2 [L]
# Rewrite for page only
RewriteRule ^([a-zA-Z0-9\-]+)$ index.php?page=$1 [L]
RewriteRule ^([a-zA-Z0-9\-]+)/$ index.php?page=$1 [L]

Works well enough for what I want and as far as I can tell this is what I want.

I also have some dynamically loaded/reloaded page content through AJAX like techniques. Basically, given a page name (the var page given to index.php), it returns the URL for an HTML or PHP file to fill/replace some div that holds the main content. This stuff though, immediately does not work.

function loadContent(page, number) {
    // this stuff puts a temporary loading image
    $("#StageContent").html(
        "<div id='loading' style='width:100%; text-align:center;'>" 
        + "<img src='images/ajax-loader.gif' style='margin-top:50px;' />"
        + "</div>"
    );
    // jQuery call to php to retrieve url for given page name
    $.getJSON("includes/pages.php", {page:page, n:number}, function(json) {
        $("#StageContent").load(json.page_url);
        document.title = json.page_title;
        current_page = json.page_name;
        page_number = json.page_number;
        console.log("page loaded: " + current_page);
    });
}

The problem being that the dynamically created URLs (the image source and the json.page_url) have now added the fake clean URL paths to them. E.g. when loading for the home page (www.mysite.com/home/) it adds the "home/" to those two so that, for example for the image, it tries to find "www.mysite.com/home/images/ajax-loader.gif" instead of "www.mysite.com/images/ajax-loader.gif" resulting in a bad link. However it only does it for those two, not the other images or script or css links in the page so the rest loads fine. [afterthough: this is because I loaded it for the base url first then tried to load a page, when trying just the clean-URL it creates issues just the same as below]

The other odd thing is that when using a multi-part clean URL (for example let's say "www.mysite.com/papers/2/" for which I want page 2 from the papers content, now in addition to the above problems, it happens for every relative link in the webpage but only for one level. So the whole page doesn't load properly because the call to the CSS stylesheet now has "papers/" added in the relative link and the same with every image and etc with a relative link.

This is probably something simple in the htaccess I'm guessing, but what am I missing? I have the RewriteCond lines I thought. Or do I have to force non-relative paths for everything?

Answer 1

You either need to change those URL's to absolute urls, e.g.:

    "<div id='loading' style='width:100%; text-align:center;'>" 
    + "<img src='/images/ajax-loader.gif' style='margin-top:50px;' />"
    + "</div>"

and

$.getJSON("/includes/pages.php", {page:page, n:number}, function(json) {

Or add this tag to the header of your page:

<base href="/" />

The reason why this is all happening is because the browser doesn't know anything about your mod_rewrite routing, so as far as it's concerned, it's loading a page located at www.mysite.com/papers/2/. Which means any relative URL has the URL base of /papers/2/, (instead of / in the case of loading /index.php). So every relative URL the browser sees, it will automatically append what it thinks is the relative URL base to the beginning of it.