jQuery XML AJAX looping through nested XML document and updating page elements dynamically with XML data
I have created two onClick events that i need to combine into one with jQuery. I am not sure how to do this.
I have an unordered list:
- <ul id="coverTabs">
<li class="currentTab"><a href="#">Individual</a></li>
<li><a href="#">Couple</a></li>
<li><a href="#">Family</a></li>
<li><a href="#">Single parent family</a></li>
</ul>
So the active tab is set in the HTML to Individual by default.
The following jQuery sets the active depending on which one is clicked.
$('ul#coverTabs > li').live('click', function() {
// Clickable tabs
// Removes default class applied in HTML and onClick adds 'currentTab' class
$(".currentTab").removeClass("currentTab");
$(this).addClass("currentTab");
// Find number of li
var $tabIndex = $(this).parent().children().index ($(this));
var $tabIndex = $tabIndex + 1;
// Get table data
$.get('/cash-plan-quote/table.xml', function(data){
$(data).find('tab').each(function() {
var $tab = $(this);
var $tabID = $tab.attr('id');
if ($tabIndex == $tabID) {
var labelTxt = '<h3 class="benefitHead">' + $tab.find('name').text() + '</h3>';
$('h3.benefitHead').replaceWith($(labelTxt));
};
});
});
return false;
});
It also retrieves the appropriate header from this XML document and replaces the current header on the page:
- <?xml version="1.0" encoding="UTF-8"?>
<cover>
<tab id="1">
<name>Individual</name>
<level level_id="1">
<month>20</month>
<week>5</week>
</level>
<level level_id="2">
<month>40</month>
<week>10</week>
</level>
<level level_id="3">
<month>80</month>
<week>20</week>
</level>
</tab>
<tab id="2">
<name>Couple</name>
<level level_id="1">
<month>40</month>
<week>10</week>
</level>
<level level_id="2">
<month>80</month>
<week>20</week>
</level>
<level level_id="3">
<month>160</month>
<week>40</week>
</level>
</tab>
<tab id="3">
<name>Family</name>
<level level_id="1">
<month>80</month>
<week>20</week>
</level>
<level level_id="2">
<month>160</month>
<week>40</week>
</level>
<level level_id="3">
<month>320</month>
<week>80</week>
</level>
</tab>
<tab id="4">
<name>Single parent family</name>
<level level_id="1">
<month>40</month>
<week>10</week>
</level>
<level level_id="2">
<month>80</month>
<week>20</week>
</level>
<level level_id="3">
<month>160</month>
<week>40</week>
</level>
</tab>
</cover>
This is working fine but i have another onClick event which updates costs on the page depending on which level column is clicked in the following table:
Table HTML:
- <h3 class="benefitHead">Table of benefits</h3>
<table id="benefit" class="portletTable benefitsTable" summary="This table displays the level of of benefit you would receive.">
<caption>Table of benefits</caption>
<thead>
<tr>
<th width="33%" scope="row" class="firstHead">
Select your level of cover
</th>
<th scope="col">
<a href="#">Level 1</a>
</th>
<th scope="col">
<a href="#">Level 2</a>
</th>
<th scope="col">
<a href="#">Level 3</a>
</th>
</tr>
</thead>
<tbody>
<tr class="price">
<th scope="row">
Price
</th>
<td>
£10
</td>
<td>
£20
</td>
<td>
£30
</td>
</tr>
<tr class="benefit">
<th scope="row">
<div>
<h4><a href="/cash-plan-quote/jsp/popUp.jsp" class="pop pop-console" target="_blank" title="Opens in a new window" rel="800, 600">Dental</a></h4>
<p>Full cost of treatment, up to 100%</p>
<a href="/cash-plan-quote/jsp/popUp.jsp" class="info pop pop-console" target="_blank" title="Opens in a new window" rel="800, 600">More information on this benefit</a>
</div>
</th>
<td>
<h4>£50</h4>
<p>per year</p>
</td>
<td>
<h4>£100</h4>
<p>per year</p>
</td>
<td>
<h4>£150</h4>
<p>per year</p>
</td>
</tr>
</tbody>
</table>
jQuery that updates values on page with XML:
- // Retrieve XML price info on column click
$('table#benefit > thead > tr > th, table#benefit > thead > tr > th > a, table#benefit > tbody > tr > td').click(function(){
// Find columns
var colIndex = $(this).parent().children().index ($(this));
// Find the active tab
var tabPosition = $('ul#coverTabs > li').index ($('.currentTab'));
var tabPosition = tabPosition + 1
// Don;t retrieve data on the first column
if (colIndex != 0) {
// Get table.xml
$.get('/cash-plan-quote/table.xml', function(data){
$(data).find('level').each(function() {
var $level = $(this);
var $levelID = $level.attr('level_id');
if (colIndex == $levelID) {
var coverLevel = '<span>Level ' + $levelID + ' benefits</span>';
var monthCost = '<h5>£' + $level.find('month').text() + '</h5>';
var weekCost = '<h6>£' + $level.find('week').text() + '</h6>';
$('div.costPanel > h2 > span').replaceWith($(coverLevel));
$('div.costPanel > div.costs > h5').replaceWith($(monthCost));
$('div.costPanel > div.costs > h6').replaceWith($(weekCost));
};
});
});
return false;
};
});
So what i want to achieve is when a user clicks a tab we call the XML document. The appropriate tab name is fetched and subsequently when a user clicks on a column under that tab the appropriate level cost data is displayed on the page.