I have a JS function that processes XML I GET from a server to dynamically create a table as below
// Generate table of services by parsing the returned XML
service list.
function convertServiceXmlDataToTable(xml) {
var tbodyElem = document.getElementById("myTbody");
var trElem, tdElem;
var j = 0;
$(xml).find("
Service").each(function() {
trElem = tbodyElem.insertRow(tbodyElem.rows.length);
trElem.className = "tr" + (j % 2);
// first column ->
service ID
var serviceID = $(this).attr("service__id");
tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col0";
tdElem.innerHTML = serviceID;
// second column ->
service name
tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col1";
tdElem.innerHTML = "<a href=javascript:showServiceInfo(" + serviceID + ")>" + $(this).find("name").text() + "</a>";
j++;
}); // each
service
}
where showServiceInfo retrieves more detailed information about each
service from the server based on the serviceID and displays it in the same page as the services table.
So far so good. But, it turns out that I have to display the detailed
service information in another page rather than the same page as the table. I have creates a generic service_info.html with an empty layout template, but I don't understand how to pass serviceID to this new page so that it gets customized with the detailed
service info.
How can I do this? Or, is there a better way to handle these situations?
Thanks!
