Home/ Questions/Q 3240182
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T18:03:22+00:00

this is my first time really using this site. I’m relatively new to using

  • 0

this is my first time really using this site. I’m relatively new to using ajax with my sites and I ran into a problem a little while ago. The thing is, I’m not sure what my problem is exactly because every time I went over my script, it made sense to me (and it fit with everything I looked up on Google and the jQuery website). Basically, my script doesn’t work at all and I need to get it working somehow. If any of you could please help me, I would greatly appreciate it. Here’s the code:

$(document).ready(function(){  
    $().ajaxSetup({cache: false});
    setInterval("checkAnchor()", 300);  
});  

//Function which check if there are anchor changes, if there are, sends the ajax petition 
var currentAnchor = null;  

function checkAnchor() {  
    //Check if it has changed
    if(currentAnchor != window.location.hash){  
        currentAnchor = window.location.hash;
        var hash = window.location.hash.substr(1);
        var newLink=$('a[href='+hash+']');
        var toLoad = hash+'.html #content';

        $('.current').removeClass('current');
        newLink.addClass('current');

        $('.box').slideUp(1500,function(){
            //Send the petition
            $('.box').load(toLoad,'');
        }); 
        $('#nav').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        $('.box').slideDown(1500,function(){
            $('#load').fadeOut('normal');
            $('#load').remove();
        });
    });
}

And the html file:

<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 class="current" href="#home">Home</a> | </li>
    <li><a href="#upcomingevents">Upcoming Events</a> | </li>
    <li><a href="#attractions">Attractions</a> | </li>
    <li><a href="#facts">Facts</a> | </li>
    <li><a href="#placestostay">Places to Stay</a> | </li>
    <li><a href="#workscited">Works Cited</a></li>
   </ul>
  </div>


  <!--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"></script>
 <script type="text/javascript" src="scripts/ajax2.js"></script>
 </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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"></script>
    <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!

    • 0