16th May 2012getting key/value pair based upon parent table
Ok, I have a need to access a json key/value pair from a prior dataTable build. But I am at a loss of how to get ahold of it.
I have a site that contains a page that builds a all encompassing course 'directory'. Clicking on one of the items causes the appropriate individual course page to be displayed (including its specific course schedule). I need to get access to a key/value pair that was recovered in the course 'directory'. The json file that I pull in is a static file (not developed by an active database).
Online example is at http://www.serco-hrc.com/crseCatalog/index.html
When a user clicks on Course Catalog out of my example, its page is displayed and the main course listing (this function is called 'mainCrseList) is displayed. The a user would select a specific course to get the particulars about it and its scheduled dates and locations (this function is called 'brickNmortar'). So 'mainCrseList' is building the table (html code) for the 'brickNmortar' to properly display. I need to get access to the json key of sked.contactRegistar. But everything I try, firefox says my aData is not valid. How do I get my brickNmortar function to access a json key that was parsed by the mainCrseList function???
Here is the user sequence: click on Course Catalog on the main page. On the resulting page, click the next button (lower right corner) to get to the second page of courses. Click on the FIRST Ammo-29 course. On this resulting page is where I need to be able to click on the hyperlinked "Available" within the table which would allow me access to the json file's sked.contactRegistar key value.
Tony
Here is my two functions:
[code]// Controls how the main course list in crseCat.html
var mainCrseList = function() {
$('.catalogs #catalog #catList').html("Course TitleRow 1 Data 1Row 1 Data 2Row 1 Data 3Row 1 Data 4Row 1 Data 5");
oTable = $('#content .catalogs #catalog #catList').dataTable({
"sAjaxSource": 'catalog/catalog.json',
"sAjaxDataProp": "DACcourses",
"bJQueryUI": true,
"bProcessing": true,
"bSort": false,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bInfo": true,
"bAutoWidth": false,
"aoColumnDefs": [ {"sTitle": "Course Title", "bVisible": true, "mDataProp": "longTitle", "aTargets": [0] } ],
"fnInitComplete": function () {
$('#content').on("click", "#catList tbody tr", function() {
var aData = oTable.fnGetData( this );
//console.log( aData );
var scheduleData = aData.sked;
var catLink = 'catalog/' + aData.longDescript;
var signUp = aData.atrrsLink;
var locAvail = aData.sked;
console.log ( locAvail );
//alert ("I clicked on " + catLink + " in IE8");
$('#fullDescript').load(catLink, function() {
if ( aData.delMeth == "standard" ) {
$('.enrollBTN').hide();
} else {
$('.enrollBTN').attr('href', signUp).attr('target', '_blank').button();
}; // full closure of aData.delMeth if statement
if ( aData.ceu != "" ) {
$('#fullDescript p#crseDescript').prepend("");
}; // CEU closure
if ( aData.ace != "" ) {
$('#fullDescript p#crseDescript').prepend("");
}; // ACE closure
if ( aData.sked != "" ) {
$('#fullDescript #crseAvail').append("
");
for (var i = 0; i < scheduleData.length; i++) {
var item = scheduleData[i];
var html = "";
html += "" + item.classNumb + "";
html += "" + item.startDate + "";
/html += "" + item.endDate + "";/
html += "" + item.location + "";
/html += "" + item.status + "";/
html += "" + item.emptySeats + "";
html += "";
$('#schedule tbody').append($(html));
}; // building the scheduleData table
}; // closure of aData.sked
brickNmortar();
if ($('#fullDescript #schedule').length) {
$('#offerings').prepend("
Classes are normally taught in a Monday through Friday workday schedule. Courses will end on the specified course length (given in number of work days) from the course start date (Saturday and Sunday excluded).
");
}; // removing the offerings skedule closure
}); // Loading individual pages into #fullDescript (catLink) closure
$('#content').hide();
$('#fullDescript').show();
});
}
});
};
[/code]
[code]
// Controls how the brick and mortar class skeds act within individual course pages
var brickNmortar = function() {
$('#fullDescript #schedule').dataTable({
"bSort": true,
"bJQueryUI": true,
"bPaginate": true,
"bLengthChange": true,
"bFilter": false,
"bInfo": true,
"bAutoWidth": true,
"aoColumnDefs": [
{"sTitle": "Class Number", "bVisible": true, "mDataProp": "classNumb", "aTargets": [0] },
{"sTitle": "Start Date", "bVisible": true, "mDataProp": "startDate", "aTargets": [1] },
/{"sTitle": "End Date", "bVisible": true, "mDataProp": "endDate", "aTargets": [2] },/
{"sTitle": "Location", "bVisible": true, "mDataProp": "location", "aTargets": [2] },
/{"sTitle": "Status", "bVisible": true, "mDataProp": "status", "aTargets": [4] },/
{"sTitle": "Availability", "bVisible": true, "mDataProp": "emptySeats", "sClass": "openSeats", "aTargets": [3] }
],
"fnInitComplete": function () {
//console.log( aData );
$('td.openSeats').filter(function() {
return $.text([this]) == 'Available'; })
.addClass('avail');
/.on('click', function() {
alert ("I have clicked an availability");
});/
}
});
};
[/code]
$('#fullDescript').show();
}); // on click of the #catList tBody tr closure
} // initFNComplete closure
}); // catList datatable closure
};