opening a new page and passing a parameter to it with Javascript

Question

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!

Answer 1

What about something like:

...
...
tdElem.innerHTML = "<a href=javascript:showServiceInfo.html?serivceId=" + serviceID + ">" + $(this).find("name").text() + "</a>"; 
...
...

Then the showServiceInfo.html page uses the service ID passed in as part of the QueryString and retrieves the data itself.