Read XML > Append to Div (works in one case, not the othe
I have a page that is intended to read multiple XML files, parse them appropriately and load the content into specified content areas. The page is set up with in tabs that onclick hide the current div and display the requested div.
On page load home.xml is got, parsed and loaded into the appropriate divs. This works fine; here is the code:
-
$.ajax({
type: "GET",
url: "data/home.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('section').each(function(){
var region = $(this).attr('region');
var edited = $(this).attr('edited');
var title = $(this).find('title').text();
var content = $(this).find('content').text();
if (region == 'main') {
$('<div class="displayed"></div>').html('<h3>'+title+' [edited:'+ edited +']</h3><p>'+content+'</p>').appendTo('#first #main');
}
if (region == 'sub') {
$('<div class="displayed"></div>').html('<h3>'+title+' [edited:'+ edited +']</h3><p>'+content+'</p>').appendTo('#first #sub');
}
if (region == 'extended') {
$('<div class="displayed"></div>').html('<h3>'+title+' [edited:'+ edited +']</h3><p>'+content+'</p>').appendTo('#first #extended');
}
});
}
});
I then have a function that is supposed to fire when the user clicks another tab. This works fine if I set it up to act upon the same DIV as the original function ( .appendTo('#first #main')... ETC) but gives no results when I try to have it act upon the second section (.appendTo('#second #main')... ETC). The code is as such:
-
$('a.update_about').click(function() {
$.get("data/about.xml", function(xml) {
$(xml).find('section').each(function(){
var region = $(this).attr('region');
var edited = $(this).attr('edited');
var title = $(this).find('title').text();
var content = $(this).find('content').text();
if (region == 'main') {
$('<div class="displayed"></div>').html('<h3>'+title+' [edited:'+ edited +']</h3><p>'+content+'</p>').appendTo('#second #main');
}
if (region == 'sub') {
$('<div class="displayed"></div>').html('<h3>'+title+' [edited:'+ edited +']</h3><p>'+content+'</p>').appendTo('#second #sub');
}
if (region == 'extended') {
$('<div class="displayed"></div>').html('<h3>'+title+' [edited:'+ edited +']</h3><p>'+content+'</p>').appendTo('#second #extended');
}
});
});
});
Both of these functions are within $(document).ready(function(){}. Here is the page structure:
-
<div id="first" class="tab">
<h1>Home</h1>
<h2>Top Section</h2>
<div id="main"></div>
<h2>Topic of the Month</h2>
<div id="sub"></div>
<h2>Extended</h2>
<div id="extended"></div>
</div>
<div id="second" class="tab">
<h1>Home</h1>
<h2>Top Section</h2>
<div id="main"></div>
<h2>Topic of the Month</h2>
<div id="sub"></div>
<h2>Extended</h2>
<div id="extended"></div>
</div>
Here is the code that initiates the tabbing. I'm including this only to give the full scope of the page's functioning.
-
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
I'm completely stumped. Like I said, I can append the second XML file to #first but not to #second. Any help would be greatly appreciated.
- Joe