My ajax call in jQuery is not working. Here is the jsfiddle: http://jsfiddle.net/jefffabiny/czZKM/
My page2.html file is simply:
<p>page 2</p>
Does anyone see the problem? All the error says is 'error'.
EDIT My jquery is in a subfolder of my root directory. [my root folder (where my index is)] >> [my js folder (where my jquery is)]. So, the '../' syntax should be correct for going up one level in the file structure. I think, lol.
The error is caused because page2.html cannot be found.
getContent('../page2.html');
This line is the cuplrit.
I assume that the path is incorrect.
For the jsFiddle you will need to provide an absolute path (http://www.example.com/page2.html)
Your path might not exist. Take a look in FireBug network tab or Chrome and see if you are getting a 404. Also I would recommend using the built in jQuery function that does exactly what you are looking for very concisely:
<p class="test"><a href="#">I will load text on click.</a></p>
<div class="contentArea">test</div>
<script type="text/javascript">
$('.contentArea').load('../page2.html');
</script>
Try to call getContent like bellow:
getContent('/page2.html');
It will assume that the file is in the root directory.
The ajax call cannot refer to a relative path (i.e. '../'), it must be absolute (i.e. 'http://localhost/page2.html').
OP: Don't get too caught up in same-origin policy and jsFiddle issues.
Check if the call is working locally. The following code WILL work (obviously replace C:\ with whatever your local drive or root folder is):
C:\test\page2.html
C:\test\subdir\test.js
C:\test\subdir\test.html
page2.html
<p>page 2 content</p>
test.js:
$.ajax({ url: '../page2.html',
success: function(resp) { $('body').append(resp); }
});
test.html:
<html>
<body></body>
</html>
test.html (after AJAX call):
<html>
<body><p>page 2 content</p></body>
</html>