Jquery/Ajax Content Loading Refresh Problem
I am currently building an application for a client, and have run into an issue. I am currently utilizing a script to load content from another file within the current file itself, but the content does not stay present when I refresh, it also does not save when I tab back and forth. Here is the code:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#accordionWrapper a').each(function(){
开发者_开发问答var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.jsp #content';
$('#content').load(toLoad);
}
});
$('#accordionWrapper a').live('click', function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#bodyWrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
I'm attaching my other js file in case there could be conflicts:
// Accordion Menu Function
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('a.accordionButton').live('click', function() {
// Closes the current open ul.
$('ul.accordionContent').slideUp('normal');
// opens the selected link's ul.
$(this).next().slideDown('normal');
// removes the active class from all links.
$('a.accordionButton').each(function(){
$(this).removeClass('selected');
});
// adds the active class to the selected link.
$(this).addClass('selected');
});
//ACCORDION BUTTON HOVER EFFECT
$(".accordionButton").hover(
function () {
$("span", this).stop().animate({ paddingRight: "30px" }, 200);
},
function () {
$("span", this).stop().animate({ paddingRight: "0px" });
}
);
//SIDEBAR MENU HIDE TOGGLE
$('.hideSideBar').live('click', function() {
$('#sidebar').toggle("slide", function() {
});
});
$('.showSideBar').click(function() {
$('#sidebar').toggle('slide', function() {
});
});
//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();
});
//REFRESH PAGE FIX
function getCurrentPage() {
//Defines the Path Variable to be the url's # tag
var path = window.location.hash;
//Tries every a class named accordionButton
$('a.accordionButton').each(function(){
//Loops whether the path is equal to the attributes id tag
if ( path == $(this).attr('id') ) {
//Adds class 'selected' to matching element.
$(this).addClass('selected');
//Opens the selected link's ul.
$(this).next().slideDown('normal');
/*
//Tries every a within an li child of accordionContent.
$('.accordionContent li a').each(function(){
//Loops to find an element that's id equals the path variable.
if ( path == $(this).attr('id') ) {
//Adds class 'active' to matching element.
$(this).addClass('active');
}
});
*/
}
});
}
and finally the html:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/contentLoader.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.js"></script>
<script type="text/javascript" src="js/accordionMenu.js"></script>
<link type="text/css" rel="stylesheet" href="css/accordionMenu.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body onload="getCurrentPage()">
<div id="bodyWrapper">
<div class="showSideBar" style="display:none;">Show Navigation [+]</div>
<div id="sidebar">
<a class="logo" href="dashboard.jsp"></a>
<div id="loginWelcome">
<span>Welcome back</span>
<span class="username">John Doe</span>
<span class="logout"><a href="">Logout</a></span>
</div>
<div id="accordionWrapper">
<a class="accordionButton" href="dashboard.jsp" id="#dashboar"><span>Dashboard</span></a>
<ul class="accordionContent">
<li><a href="dashboard.jsp" class="active">Edit My Profile</a></li>
</ul>
<a class="accordionButton" href="workorders.jsp" id="#workorder"><span>Work Orders</span></a>
<ul class="accordionContent">
<li><a href="">Create New Work Order</a></li>
<li><a href="workorders.jsp" class="active">Manage Work Orders</a></li>
</ul>
<a class="accordionButton" href="workitems.jsp" id="#workitem"><span>Work Items</span></a>
<ul class="accordionContent">
<li><a href="">Create New Work Item</a></li>
<li><a href="workitems.jsp" class="active">Manage Work Items</a></li>
</ul>
<a class="accordionButton" href="users.jsp" id="#user"><span>Users</span></a>
<ul class="accordionContent">
<li><a href="">Add New User</a></li>
<li><a href="users.jsp" class="active">Manage Users</a></li>
</ul>
<a class="accordionButton" href="airplanes.jsp" id="#airplane"><span>Airplanes</span></a>
<ul class="accordionContent">
<li><a href="">Add New Airplane</a></li>
<li><a href="airplanes.jsp" class="active">Manage Airplanes</a></li>
</ul>
<a class="accordionButton" href="support.jsp" id="#suppor"><span>Support</span></a>
</div>
<a class="hideSideBar" href="#">Hide Navigation [-]</a>
</div>
<div id="contentWrapper">
<div id="content">
</div>
</div>
So what you want to happen is to have the content loaded to stay visible even after the page reloads?
If this is the case you would have to use cookies (or some sort of storage system) to keep track of what the last thing loaded was since the content is being loaded dynamically
加载中,请稍侯......
精彩评论