Multiple container loading with ajax/ Json
Posted: Tue Jan 26, 2010 9:24 pm
I was wondering if you could be so kind to help me with a small coding problem.
I have implemented external content loading using Ajax. And now I would like to add multiple container loading functionality using a Json object code I have.
Could you please help me incorporate the json object code into the Ajax code. My knowledge in coding is very limited
Here is the detailed info:
Here is the json object:
var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content', 'wrapper': '__content-wrapper'}]
$.each(json, function(i, itm) {
$('#'+itm.id).wrap('<div id="' + itm.wrapper + '"></div>');
pageload(itm.id, itm.wrapper);
}
function pageload (id, wrapper) {
}
Here is the Ajax code:
$(document).ready(function() {
var contentWrapID = '___content-wrapper';
$('#content').wrap('<div id="' + contentWrapID + '"></div>');
function showNewContent() {
$("#" + contentWrapID).slideDown();
$('#load').fadeOut();
}
function pageload(hash) {
if(hash) {
$("#" + contentWrapID).load(hash + " #content",'',function(){
if($('img:last',this).get(0)) {
$('img:last',this).load(function(){
showNewContent();
});
} else {
showNewContent();
}
});
} else {
$("#" + contentWrapID).load("index.html #content");
}
}
$.historyInit(pageload);
$('#topnav li a').click(function(){
var hash = $(this).attr('href');
hash = hash.replace(/^.*#/, '');
$("#" + contentWrapID).slideUp(300,function(){
$.historyLoad(hash);
});
if(!$('#load').get(0)) {
$('#container').append('<span id="load">LOADING...</span>');
}
$('#load').fadeIn('normal');
$('#topnav li a').removeClass('current');
$(this).addClass('current');
return false;
});
});
........................
As far as I understand I have to replace this line:
var contentWrapID = '___content-wrapper';
with the json object:
var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content2', 'wrapper': '__content-wrapper2'}];
But I also have to change the pageload function so that it works with the new variables that are passed:
function pageload (id, wrapper) {
}
I'd be very grateful for any help
Best regards
Paul
I have implemented external content loading using Ajax. And now I would like to add multiple container loading functionality using a Json object code I have.
Could you please help me incorporate the json object code into the Ajax code. My knowledge in coding is very limited
Here is the detailed info:
Here is the json object:
var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content', 'wrapper': '__content-wrapper'}]
$.each(json, function(i, itm) {
$('#'+itm.id).wrap('<div id="' + itm.wrapper + '"></div>');
pageload(itm.id, itm.wrapper);
}
function pageload (id, wrapper) {
}
Here is the Ajax code:
$(document).ready(function() {
var contentWrapID = '___content-wrapper';
$('#content').wrap('<div id="' + contentWrapID + '"></div>');
function showNewContent() {
$("#" + contentWrapID).slideDown();
$('#load').fadeOut();
}
function pageload(hash) {
if(hash) {
$("#" + contentWrapID).load(hash + " #content",'',function(){
if($('img:last',this).get(0)) {
$('img:last',this).load(function(){
showNewContent();
});
} else {
showNewContent();
}
});
} else {
$("#" + contentWrapID).load("index.html #content");
}
}
$.historyInit(pageload);
$('#topnav li a').click(function(){
var hash = $(this).attr('href');
hash = hash.replace(/^.*#/, '');
$("#" + contentWrapID).slideUp(300,function(){
$.historyLoad(hash);
});
if(!$('#load').get(0)) {
$('#container').append('<span id="load">LOADING...</span>');
}
$('#load').fadeIn('normal');
$('#topnav li a').removeClass('current');
$(this).addClass('current');
return false;
});
});
........................
As far as I understand I have to replace this line:
var contentWrapID = '___content-wrapper';
with the json object:
var json = [{'id': 'content', 'wrapper': '__content-wrapper'},{'id': 'content2', 'wrapper': '__content-wrapper2'}];
But I also have to change the pageload function so that it works with the new variables that are passed:
function pageload (id, wrapper) {
}
I'd be very grateful for any help
Best regards
Paul