How do you make ajax work from different directories?

Question

First, let me show you the folder structure:

public_html[]  
     |_ project_folder[]  
            |_another_folder[]  

            |_xml_folder[]  
                   |_xmlfile.xml   

            |_ js_folder[]  
                   |_javascriptfile.js  

            |_ file.html  
            |_ file2.html

I have some file.html and file2.html load use jQuery ajax on document load. Ajax uses this code:

$(document).ready(function()
{
    $.ajax({
     type: "GET",
     url: "xml/xmlfile.xml",
     dataType: "xml",
            ...
            ...
            ...
}

These works fine when the HTML files are found on the root directory of the files (just the way they are now)

Now, when I move an html file to a folder (say, moving file2.html to another_folder), loading the xml file doesn't work anymore. Take not that I've changed the necessary src tags on the html ie: from src\"js/javascriptfile.js" to src=\"../js/javascriptfile.js".

What I haven't changed is the "url" on the javascript file. And now, the XML isn't loading because it's trying to look for the XML file on it's own directory (another_folder/xml/xmlfile.xml), and not from the root directory where it's located.

My question is, what should be done in order to avoid this problem?

Answer 1

Use an absolute URL in the js file e.g.

'/project/xml/xmlfile.xml'

If you want it to be more general than that, there are other things you could do, like reading the current url and building the ajax url from that.

Update: responding to comment An example of how you might generate the proper path. If projects are always the first subdirectory, this should work to build the proper url.

function xml_url(){
var first_dir_regexp = /https?:\/\/[^\/]+\/([^\/]+)\/.+/;
matches = first_dir_regexp.exec(document.location.toString());
return matches[1]+"/xml/xmlfile.xml";
}
//...
xml_url()

This code uses a regexp to pull out the first directory of a url and appends /xml/xmlfile.xml to it.

e.g. if the page is example.com/project1/awesome/index.html, it returns example.com/project1/xml/xmlfile.xml

Note this code is pretty fragile, you would probably want to add some checks to it. It's just an example.

If your projects are more than one level deep, you should consider adding some config settings that let the javascript know more about the environment it is running in.

Answer 2

Use urls that are relative to the web root, not the current directory.

$(document).ready(function()
{
    $.ajax({
        type: "GET",
        url: "/xml/xmlfile.xml", // note the leading slash
        dataType: "xml",
            ...
            ...
            ...
}