georgehowell
asked on
jQuery and AJAX... I can't find what's wrong with my code?!?
hi to all jQuery experts, and thanks for your help... I'm trying to learn jQuery, and this has got me goin in circles trying to fig out:
<script type="text/javascript">
$(document).ready(function (){
$('a').click(function(e){
e.preventDefault();
var url = 'remote_content.html';
var href = $(this).attr('href');
if('all' == href) {
$('#newContent').load(url) ;
} else {
$('#newContent').load(url + ' #' href);
}
});
});
</script>
</head>
<body>
<!-- CONTENT -->
<div id="content">
<h2>Load new content...</h2>
<a href="all">All</a> | <a href="first">First</a> | <a href="second">Second</a>
<div id="newContent"></div>
</div>
</body>
</html>
Here's "remote_content.html":
<p id="first">Lorem ipsum dolor sit amet, bla bla</p>
<p id="second">Sed diam nonummy bla bla </p>
This is what I get:
Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
Can anyone please tell me what I've done wrong..
Thanks
G
<script type="text/javascript">
$(document).ready(function
$('a').click(function(e){
e.preventDefault();
var url = 'remote_content.html';
var href = $(this).attr('href');
if('all' == href) {
$('#newContent').load(url)
} else {
$('#newContent').load(url + ' #' href);
}
});
});
</script>
</head>
<body>
<!-- CONTENT -->
<div id="content">
<h2>Load new content...</h2>
<a href="all">All</a> | <a href="first">First</a> | <a href="second">Second</a>
<div id="newContent"></div>
</div>
</body>
</html>
Here's "remote_content.html":
<p id="first">Lorem ipsum dolor sit amet, bla bla</p>
<p id="second">Sed diam nonummy bla bla </p>
This is what I get:
Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
Can anyone please tell me what I've done wrong..
Thanks
G
ASKER
Hi amsterdam,
thanks for your comment
I tried that ...the lessons I'm doing (Peachpit) had it like ' #' also.
Attached is the URL in the browser address bar and the page error I'm getting, upon clicking one of the links
screenShot.jpg
thanks for your comment
I tried that ...the lessons I'm doing (Peachpit) had it like ' #' also.
Attached is the URL in the browser address bar and the page error I'm getting, upon clicking one of the links
screenShot.jpg
ASKER
call jquery just before the closing body its good practice.
then your script which should also be external
your external content is
its important to add the + between strings and variables
then your script which should also be external
your external content is
remote-content.htmlshould be
remote_content.html
its important to add the + between strings and variables
$('#newContent').load(url + '#' + href);
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<!-- CONTENT -->
<div id="content">
<h2>Load new content...</h2>
<a href="all">All</a> | <a href="first">First</a> | <a href="second">Second</a>
<div id="newContent"></div>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
var url = 'remote-content.html';
var href = $(this).attr('href');
if('all' == href) {
$('#newContent').load(url);
} else {
$('#newContent').load(url + '#' + href);
}
});
});
</script>
</body>
</html>
ASKER
the page keeps going to an unknown href, rather than populating <div id="newContent"></div> with what I've improvised as a remote_server
After I made the correction you'd advised, the page gives this error running off the desktop:
" File not found
Firefox can't find the file at /Users/georgehowell/Docume nts/MISC/L ESSONS/jQu ery/jOuery -UI/all.
Check the file name for capitalization or other typing errors.
Check to see if the file was moved, renamed or deleted. "
And the "Object not found!" error running through localhost
After I made the correction you'd advised, the page gives this error running off the desktop:
" File not found
Firefox can't find the file at /Users/georgehowell/Docume
Check the file name for capitalization or other typing errors.
Check to see if the file was moved, renamed or deleted. "
And the "Object not found!" error running through localhost
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
amsterdamcomputer went to a lot of effort solving this question. I would have allocated 500 points if I'd known it was more than just a typo in my code... sorry about that.
Thank you ever so much for all your help and time.
Regards,
George Howell
Thank you ever so much for all your help and time.
Regards,
George Howell
Open in new window
should be
Open in new window