Solved

jQuery and AJAX... I can't find what's wrong with my code?!?

Posted on 2013-05-15
7
358 Views
Last Modified: 2013-05-16
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
0
Comment
Question by:georgehowell
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 

Expert Comment

by:amsterdamcomputer
ID: 39170173
$('#newContent').load(url + ' #' href);

Open in new window


should be

$('#newContent').load(url + '#' + href);

Open in new window

0
 

Author Comment

by:georgehowell
ID: 39170259
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
0
 

Author Comment

by:georgehowell
ID: 39170265
Here's the files:

08-ajax.html

remote-content.html
0
Command Line Tips and Tricks

The command line is a powerful tool at the disposal of every Linux user. Although Linux distros come with beautiful user interfaces, it's worthwhile to learn the command line because it allows you to do a number of things that you otherwise cannot do from the GUI.  

 

Expert Comment

by:amsterdamcomputer
ID: 39170598
call jquery just before the closing body its good practice.
then your script which should also be external

your external content is
remote-content.html
should be
remote_content.html


its important to add the + between strings and variables
 
$('#newContent').load(url + '#' + href);

Open in new window



<!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>

Open in new window

0
 

Author Comment

by:georgehowell
ID: 39170745
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/Documents/MISC/LESSONS/jQuery/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
0
 

Accepted Solution

by:
amsterdamcomputer earned 250 total points
ID: 39170795
working.zipI have attached a working version of the script.

It looks like your version has not loaded the jquery so is just following the link.
0
 

Author Closing Comment

by:georgehowell
ID: 39170923
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
0

Featured Post

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question