How to get Ajax working with Jquery?
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 w开发者_C百科ould 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>
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!
加载中,请稍侯......
精彩评论