Question

I have the following directory structure :

/script/x.js

/includes/x.txt

/1/2/index.html

After hooking a webpage into JQuery, if I run the following inside of the HTML file index.html the x.txt file displays correctly…

<script type="text/javascript">
    $(function(){
        $('.footer').load('../../includes/x.txt');
    });
</script>

If I place the following code inside the x.js file changing the relative path to footer.txt accordingly

$(function(){
$('.footer').load('../includes/x.txt');
});

and hook the x.js file into the page with

<script type="text/javascript" src="../../script/global.js"></script>

it doesn’t work.

This is obivously a path issue that I’m going wrong with, any guidance would be appreciated.

Answer 1

Use absolute paths. They start with /. That is:

<script type="text/javascript">
    $(function(){
        $('.footer').load('/includes/x.txt');
    });
</script>

and

$(function(){
    $('.footer').load('/includes/x.txt');
});

and

<script type="text/javascript" src="/script/global.js"></script>