i,m trying to make a loading tabs with jquery & ajax, I have "page-1.html, page-2.html, page-3.html, page-4.html, page-5.html", the "page-1.html" is the main page that I want to display it first, but i faced a problem that the page stops loading and the tabs content not shown, only the loading class shows <div class=\"loading\"></div> here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function Tabs (getFile)
{
$.ajax({
url: getFile,
beforeSend: function (){
$(".PagesContent").html("<div class=\"loading\"></div>");
},
success: function(data){
$(".PagesContent").html(data);
}
});
}
$(document).ready(function (){
Tabs ("page-1.html")
$(".pages ul > li").click(function (){
$(".pages ul > li").removeAttr("class");
$(this).addClass("active");
return false;
});
});
</script>
<style type="text/css">
.loading{
background-image:url('images/loading.gif');
background-repeat:no-repeat;
height:32px;
width:32px;
margin:15px auto;
}
</style>
<body>
<div class="pages">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Our Partners</a></li>
<li><a href="#">Supplies</a></li>
<li><a href="#">Set Order</a></li>
<li><a href="#">About Us</a></li>
</ul>
<div class="clear"></div>
</div><!--End pages-->
<div class="PagesContent"></div><!--End Pages Contents-->
</body>
</html>
why is that wrong? the page page-1.html is not shown! Only the loading img is shown.
To know for sure that your timing is right, you could do this (you need jQuery 1.5 or newer)
function Tabs (getFile)
{
return $.ajax({
url: getFile,
beforeSend: function (){
$(".PagesContent").html("<div class=\"loading\"></div>");
}
});
}
$(document).ready(function (){
$.when(Tabs("page-1.html"))
.done(function () {
$(".PagesContent").html(data);
})
.fail(function () {
$(".PagesContent").html("<span class='error'>Failed to load tab.</span>");
})
$(".pages ul > li").click(function (){
$(".pages ul > li").removeAttr("class");
$(this).addClass("active");
return false;
});
});
As said before; does your browser return any errors (in the console)?