Written by

Article Gevorg Arutiunian · Mar 7, 2019 2m read

CSP: Dynamically Generated Table

#Caché #Code Snippet #CSP

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-->
<HTML>
<HEAD>
<TITLE>   Cache Server Page To Demo Table Re-Render</TITLE>
</HEAD>
<BODY>
<TABLE ID=TEST border="1">
  <tr>
    <td>SSN</td><td>Name</td>
  </tr>
</TABLE>
<hr>
<input type="Button" name="render" value="Create Table"
    OnClick="#server(..renderTable())#;">
 
<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)
</script>
         
</BODY>
</HTML>

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

Discussion (2)3

Add reply

Comments

Arto Alatalo · Mar 7, 2019

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

0 0

Jochen Roese · Mar 8, 2019

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-->
<html>
<head>
<title>   Cache Server Page To Demo Table Re-Render</title>
</head>
<body>
<table id="TEST" border="1">
  <thead>
    <tr>
        <td>SSN</td><td>Name</td>
    </tr>
  </thead>
  <tbody id="tablebody">
  </tbody>
</table>
<hr>
<!-- changed to call bc asynchronous -->
<input type="Button" name="render" value="Create Table"
    OnClick="#call(..renderTable())#;">
 
<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
    &js<
        function cb(data) {
            var tableBody = document.getElementById("tablebody");
            // clear tablebody
            var html = [];
            tableBody.innerHTML = html.join('');
            for (var i in data) {
                html.push('<tr><td>'+data[i].SNN+'</td><td>'+data[i].Name+'</td></tr>');
            }
            // 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()_")"
</script>
         
</body>
</html>

0 0