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",
            ...
            ...
            ...
}

Answer 3

As I hate duplication of code, I've had the same problem too.

I figured it out this way:

My directory structure:

include_db/
  dbconnect.php
main_project/
  shared_code/
    ajax/
      ajax_script.php
    shared_js.php
  sub_project/
    sub_index.php
  index.php

Please note, that I really have javascript in .php file! I'll explain why lower.

From index.php I include shared java declaring this:

<script type="text/javascript" src="./shared_code/shared_js.php"></script>

From sub_index.php I do it this way:

<script type="text/javascript" src="../shared_code/shared_js.php?path=."></script>

The shared_js.php file is using AJAX, so here is why is it in .php instead of .js:

$.ajax({
  url: ".<?php echo $_GET[path]; ?>/shared_code/ajax/ajax_script.php",
  ...

Because I have to alter the path to that ajax script based on where do I call it from. And that is the content of $_GET[path] variable which I set in index.php or sub_index.php.

The AJAX script ajax_script.php is then using paths relative to itself again so it will have something like you would normally do:

<?php
    require("../../../include_db/dbconnect.php");