text not showing up in table

energetic_pixels

Ok, I have a datatable that is working (I think), but I am using the .fnGetData function to build a supplimental table from the data in the .fnGetData (collected on the table row). But I can not figure out why no data is showing up.
testing site is http://www.serco-hrc.com/crseCatalog/index.html

Here is the datatable as I have it set --
[code]
oTable = $('#catList').dataTable({
"sAjaxSource": 'catalog/catalog.json',
"sAjaxDataProp": "DACcourses", // aaData
"bProcessing": true,
"bSort": false,
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bInfo": true,
"bAutoWidth": false,
"aoColumnDefs": [
{"sTitle": "Course Title", "bVisible": true, "mDataProp": "longTitle", "aTargets": [0] },
{"sTitle": "Long Description Link", "bVisible": true, "mDataProp": "longDescript", "aTargets": [1] },
{"sTitle": "ATRRS Link", "bVisible": false, "mDataProp": "atrrsLink", "aTargets": [2] },
{"sTitle": "Delivery Method", "bVisible": false, "mDataProp": "delMeth", "aTargets": [3] },
{"sTitle": "Classroom Offerings", "bVisible": false, "mDataProp": "sked", "aTargets": [4] }
],
"fnInitComplete": function () {
$('#content').on("click", "#catList tbody tr", function() {
var aData = oTable.fnGetData( this );
console.log( aData );
var catLink = 'catalog/' + aData.longDescript;
var scheduleData = aData.sked;
$('#fullDescript').load(catLink, function() {
var startDate = $( scheduleData.startDate ).text();
var endDate = $( scheduleData.endDate ).text();
var location = $( scheduleData.location ).text();
var classNumb = $( scheduleData.classNumb).text();
var status = $( scheduleData.status ).text();
var emptySeats = $( scheduleData.emptySeats).text();
if (!$('#fullDescript #offerings')) {
$('.enrollBTN').hide();
};

if ($(scheduleData).length > 0) {
$(scheduleData).each(function() {
/*var html = "";
html += " should be start DAte <\/td>";
html += " should be end date <\/td>";
html += " should be something <\/td>";
html += " should be class number <\/td>";
html += " should be somthing else <\/td>";
html += " shold be me <\/td>";
html += "<\/tr>";*/
var html = "";
html += "" + classNumb + "<\/td>";
/*html += "" + scheduleData.endDate + "<\/td>";
html += "" + scheduleData.location + "<\/td>";
html += "" + scheduleData.classNumb + "<\/td>";
html += "" + scheduleData.status + "<\/td>";
html += "" + scheduleData.emptySeats + "<\/td>";*/
html += "<\/tr>"
$('#schedule tbody').append($(html));
});
};
});
//$('#content').hide();
//$('#fullDescript').show();
});
}

});
[/code]

I know the .each function is working, becuz when I uncomment the first "html" var and run the project, I get three table rows built each with the selected text in the s. In "Ammo-29" of the course catalog of my project, there are 3 "skeds", hince datatable rendering the appropriate 3 table rows.

But when i try and display the real "database" values, firebug just has empty s. Am I doing something fundamentally wrong??

I purposely have the resulting page from any click of a table row on Course Catalog not displaying. Using firebug to verify data.

Here is my portion of the .json:
[code]
{
"longTitle": "Ammo-29 Electrical Explosives Safety for Naval Facilities",
"longDescript": "ammo-29.html",
"atrrsLink": "Win 95+",
"delMeth": "standard",
"sked": [
{
"classNumb": "926",
"startDate": "4/16/2012",
"endDate": "4/20/2012",
"location": "NMC Fort Worth, TX",
"status": "scheduled",
"emptySeats": "Availability"
},
{
"classNumb": "001",
"startDate": "6/4/2012",
"endDate": "6/8/2012",
"location": "McAlester, OK",
"status": "scheduled",
"emptySeats": "Availability"
},
{
"classNumb": "920",
"startDate": "6/18/2012",
"endDate": "6/22/2012",
"location": "Belle Chasse, LA",
"status": "scheduled",
"emptySeats": "Class Full"
}
]
},
[/code]

I have left out other portions of that .json file as there are 80+ courses listings in it. Any help or just a 'frying pan hit" would greatly be appreciated.

Tony

allan

Is the #schedule table a DataTable as well? If so then this FAQ applies: http://datatables.net/faqs#append

Beyond that, is your Ajax request getting the data you expect back from the server? Which page is it on the site you linked to that shows the tables?

Allan

energetic_pixels

Allan,

Ok, this project is not working with an 'active' application server i.e., ASP/PHP. All I have is a .json file stored on the web server.
Yes, #schedule is a DataTable too. But I am calling that after I have added my table rows to the DOM through a jQuery .append function.
The user route (click functions) would be from the main web page. Click on any of the Course Catalog menu items -> Click 'next' to get to second page of table data -> Select "Ammo-29 Electrical Explosives Safety for Naval Facilities" row. On that resulting page, I am trying to display the scheduling data to a site user (#schedule).
According to the FAQs/DOCs, I should not have to mess with any fnAddData or fnUpdate since I am building the DOM before the #schedule datatable is initialized. Should I??

I have uploaded a fresh copy to my testing site that has some console.log installed in it. From that log, I know that datatable() is selecting the right data as far as row data goes.

Since my testing site location is not the final resting place for the application, you can take a peek at my two files in question (besides the exerpt from the .json listed above):
http://www.serco-hrc.com/crseCatalog/crseCatalog.html -- this has the .datatable for the course catalog listing and also manipulation for the follow-on table in Ammo-29.
http://www.serco-hrc.com/crseCatalog/catalog/ammo-29.html -- this is where the #schedule datatable is.


Tony

allan

> According to the FAQs/DOCs, I should not have to mess with any fnAddData or fnUpdate since I am building the DOM before the #schedule datatable is initialized. Should I??

You are absolutely correct - if you are initialising your DataTable after you've set up the HTML, then this method is fine.

> http://www.serco-hrc.com/crseCatalog/crseCatalog.html

404 I'm afraid :-)

So the crseCatalog.html page should have two tables on it - is that correct? One which is dynamically created? Or is it building the second page?

Allan

energetic_pixels

no. ('#catList').dataTable() is the only table on the crseCatalog.html page. The .dataTable() function on this page is also used to build the table rows (via adding to the dom) on the second page (ammo-29.html).

Once a user clicks on a row from #catList, it .loads in the appropriate html fragment into a hidden div within index.html (main site wrapper). Then, I add table rows to this loaded html fragment via the .load's callback function. If I change the tr build callback function so that it has static td information [code]"This is dummy information<\/td>This is dummy information<\/td>This is dummy information<\/td><\/tr>"[/code], I get the appropriate display when the table is shown to the user. My problem comes in when I try to use data contained in the .fnGetData function to . My format would look like [code]"" + startDate + "<\/td>" + endDate + "<\/td><\/tr>"[/code]

It looks to me as if I am not referencing/targeting the data correctly. Any pointers or NCIS "Denozo slaps" would greatly be appreciated.

Tony

energetic_pixels

Allan,

Think I hit on something. I believe that it is a jQuery targeting problem. I changed my code a little and actually got text back in the console.log. I changed it to read "console.log( aData.sked[0].classNumb );". I actually got '926' being reported back to the console. The change is the "[0]" added to sked. But how do I get the script to loop through the object children of aData.sked??

Please excuse my noobie dumbness, I am usually a flash/away3d animator. I got swindled into this current project due manpower shortages in my day job. I picked your .dataTable application cuz it has lots of options and is themeroller capable (right out of the box). I can see a lot of future implementations, if I can just get my head wrapped around it.

Tony

allan

Hi Tony,

> I am usually a flash/away3d animator

Ah! AS3 by any chance? :-). I think that explains why you expected your code to work - it would do in AS3, but not in Javascript. In AS3 functions execute using something like "with(this)", so you can access the properties of the scope without using the this keyword. For example:

[code]
// JS
this.hello

// AS3
hello
[/code]

Assuming I'm right - what to do is to adjust the code so that it works in Javascript land:

[code]
$(scheduleData).each(function(i) {
var html = "";
html += "" + scheduleData[i].classNumb + "<\/td>";
html += "<\/tr>"
$('#schedule tbody').append($(html));
});
[/code]

I've added 'i' to the each anon function parameters list to get the index and an array index in for scheduleData.

This would also be the same and is a bit more AS3 like:

[code]
$(scheduleData).each(function() {
var html = "";
html += "" + this.classNumb + "<\/td>";
html += "<\/tr>"
$('#schedule tbody').append($(html));
});
[/code]

I really love a lot about AS3, but with(this) is one thing I'm not too sure about... :-)

Allan