ansaurus

Question

Answer 1

+1 A:

I've modified your URLs so that they all have the id nav_link and a rel that should carry the url that you want to load.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/general.css" />
    </head>
    <body>

    <!--Nav Bar-->
    <div id="nav" class="center round">
        <ul>
            <li><a href="home.html">            Home</a> | </li>
            <li><a href="upcomingevents.html">  Upcoming Events</a> | </li>
            <li><a href="attractions.html">     Attractions</a> | </li>
            <li><a href="facts.html">           Facts</a> | </li>
            <li><a href="placestostay.html">    Places to Stay</a> | </li>
            <li><a href="workscited.html">      Works Cited</a></li>
        </ul>
    </div>

    <a href="shall not trigger" >shall not trigger</a>




    <!--This is where content is loaded via ajax-->
    <div class="box center round"></div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    <script type="text/javascript" charset="utf-8">


        $(document).ready(function(){ 

            $('#nav a').click(function(){

                var the_url = $(this).attr("href");
                alert( the_url );
                $(".box").load( the_url );

                return false;
            });


        });  


    </script>


    </body>
</html>

As you can see, the jQuery code is fairly simple so it track's all clicked id's with nav_link and looks for the propper url and loads it to your box.

Hope it helps!

Herr Kaleun 2010-10-17 07:48:00

really, the same id for all links? This is so wrong...

Ventus 2010-10-17 09:23:01

so correct it:) It does work and for a beginner, the concept is very important. He could learn alot from this example

Herr Kaleun 2010-10-17 09:37:40

I've "corrected" it, now it looks even better. :) Hope you like it too, @ventus ;)

Herr Kaleun 2010-10-17 09:43:41

This is the only error I had on the console: Uncaught SyntaxError: Unexpected token }However, that error was resolved (Problem was solved, solution was in first comment by Felix Kling).Also, I wanted to make it so that if you clicked the back button in your browser, you would be taken to the previous page, even if you used ajax. I got it to work after I listened to what Felix Kling said: "Do you get any error on the console? The second to last line should be } instead of }); Maybe that already solves it."

Lobabob 2010-10-17 23:17:28

Even though that did solve the loading and execution problems, I still have one specific problem left. That problem is that all the ' (apostrophes) characters show up weird for some reason....

Lobabob 2010-10-17 23:27:44

why not accept my answer and make me happy?:)

Herr Kaleun 2010-10-21 08:44:31

ansaurus

tags:

views:

answers:

How to get Ajax working with Jquery?

related questions