CSP: Dynamically Generated Table

This code snippet is an example of a CSP page that has a dynamically reloading table:

<!--Demo of (re-)loading a table dynamically in a page-->
<TITLE>   Cache Server Page To Demo Table Re-Render</TITLE>
<TABLE ID=TEST border="1">
<input type="Button" name="render" value="Create Table"
<script language = Cache method = renderTable arguments = "">
    // Get everyone's SSN and Name from the sample database
    &sql(declare TEST cursor for select SSN,Name from Sample.Person)
    &sql(open TEST)
    // Output the javascript that will delete all except the first row from the table
    write "var rLen = TEST.rows.length;",!
    write "for (i=1; i<rLen; i++)",!
    write "{",!
    write " TEST.deleteRow(1);",!
    write "}",!
    // Now insert each row
    for i=1:1 {
        &sql(fetch TEST into :ssn,:name)
        if SQLCODE'=0 quit
        write "var x = TEST.insertRow();",!
        // Now insert each cell into this row
        write "var y = x.insertCell();",!
        // We are using simple 'innerText' whereas more sophisticated techniques
        //   would use similar 'innerHTML'
        // For example: 'innerHTML="<input type=Text name=SSN value=",ssn,">"'
        write "y.innerText=",..QuoteJS(ssn),";",!
        write "var y = x.insertCell();",!
        write "y.innerText=",..QuoteJS(name),";",!
    &sql(close TEST)

Here's a link to the code on GitHub: https://github.com/intersystems-community/code-snippets/blob/master/src/...


JavaScript as raw text strings? In my opinion, can not be really used in any serious project.

I think that should work much better. Didn't test but that is how I would do it with CSP-Method #call / #server

It's also asynch so you browser still reacts while getting the data. 

I'm using innerHTML instead of the table-functions. innerHTML is the fastest way to render HTML actually. It's faster than jQueries $('query').html('htmlcontent');

<!--Demo of (re-)loading a table dynamically in a page-->
<title>   Cache Server Page To Demo Table Re-Render</title>
<table id="TEST" border="1">
  <tbody id="tablebody">
<!-- changed to call bc asynchronous -->
<input type="Button" name="render" value="Create Table"
<script language = Cache method = renderTable arguments = "">
    #dim data = []
    #dim sql = "SELECT SSN,Name FROM Sample.Person"
    #dim rset AS %SQL.StatmentResult = ##class(%SQL.Statement).%ExecDirect(, sql)
    while (rset.%Next()) {
        d data.%Push({
            "SSN": (rset.%GetData(1)),
            "Name": (rset.%GetData(2))
    // create callback-function for rendering
        function cb(data) {
            var tableBody = document.getElementById("tablebody");
            // clear tablebody
            var html = [];
            tableBody.innerHTML = html.join('');
            for (var i in data) {
            // innerHTML is way faster than using the functions from table or creating javascript objects like HTMLTableRow or innerText
            tableBody.innerHTML = html.join('');
    // calling the cb with data
    w !,"cb("_data.%ToJSON()_")"