Make relative link absolute in javascript / php

Question

I have a bug in some of my pages related to a form.

On any page in the root directory, the form works:

site.com/page.php

On these pages, it does not:

site.com/subdomain/page.php
site.com/subdomain/subsubdomain/page.php

I think I've traced the problem back to some script tags that are using relative links.

Here's the code:

<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<script type="text/javascript">
$().ready(function() {
    $("#where").autocomplete("autofill_source.php", {
        width: 260,
        matchContains: true,
        selectFirst: false
    });
});
</script>

There are 3 files being referenced: 2 in src="*.js" part of the code and one (autofill_source.php) in the function part of the code.

My question is, how do I go about making all 3 of these links absolute, keeping in mind it could be referenced from the root folder, or down 2, 3 or more sub-directories.

I've seen it handled with ${pageContext.request.contextPath} or some other ways, but I just wanted to ask and see what the best solution is.

Thanks in advance.

Answer 1

Try to replace autofill_source.php to /autofill_source.php. Slash at the start of the path means the root folder of you web server. Or, you may get your base URL with window.location.origin in JavaScript.