I'm trying to load only certain elements of a page using the load() funcion, loading both the content on the right side of the page and the menu elements.
$(document).ready(function() {
$('#navigation li a').click(function(){
var toLoad = $(this).attr('href')+' #rightblock';
var toLoadnav = $(this).attr('href')+' #leftblock';
$('#rightblock').hide('fast',loadContent);
$('#load').remove();
$('#header').append('<span id="load">Loading</span>');
$('#load').fadeIn('normal');
function loadContent() {
$('#main').remove();
$('#rightblock').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#rightblock').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
$('#leftblock').load(toLoadnav);
return false;
});
});
#leftblock is the menu div, and #rightblock is the content div.
The annoyance is that it only works the first time I click on a menu item. The second time it'll ignore the function and load the whole page, and then obviously it'll work again... rinse, repeat :wacko: apparently the click method is no longer assigned to the #navigation div (which resides inside #leftblock) once it reloads, although on the other hand, launching the .load() from an onclick event fails exactly the same way :unsure:
Question
ichi
I'm trying to load only certain elements of a page using the load() funcion, loading both the content on the right side of the page and the menu elements.
$(document).ready(function() { $('#navigation li a').click(function(){ var toLoad = $(this).attr('href')+' #rightblock'; var toLoadnav = $(this).attr('href')+' #leftblock'; $('#rightblock').hide('fast',loadContent); $('#load').remove(); $('#header').append('<span id="load">Loading</span>'); $('#load').fadeIn('normal'); function loadContent() { $('#main').remove(); $('#rightblock').load(toLoad,'',showNewContent()) } function showNewContent() { $('#rightblock').show('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } $('#leftblock').load(toLoadnav); return false; }); });#leftblock is the menu div, and #rightblock is the content div.
The annoyance is that it only works the first time I click on a menu item. The second time it'll ignore the function and load the whole page, and then obviously it'll work again... rinse, repeat :wacko: apparently the click method is no longer assigned to the #navigation div (which resides inside #leftblock) once it reloads, although on the other hand, launching the .load() from an onclick event fails exactly the same way :unsure:
Any ideas?
Link to comment
Share on other sites
3 answers to this question
Recommended Posts