View Source

JavaScript (JQuery and Bootstrap.js)

A complete example using JQuery and Bootstrap that makes CTS2 REST calls to populate HTML/JS widgets.

This script example features JSON parsing. The JSON structure in CTS2 1.0 was non-standard and will not be compatible with the standardized JSON in CTS2 1.1. CTS2 XML is standard. CTS2 associated with LexEVS 6.2 will contain the standard version of JSON for CTS 1.1.

Download JQuery 1.10.x and Bootstrap 3.0.x
Create a CTSRest directory for your files
Add directories bootstrap and cts2 to this root
Add subdirectories js and css to both directories you've just created
Add bootstrap.js to the bootstrap/js directory
Add bootstrap.min.css to the bootstrap/css directory
Add jquery-1.10.2.js to the cts2/js library
Create a codeSystem.js text file and add the following text (adjust the serviceUrl to point to a convenient CTS2 service)

var CodeSystemListConfig = {
    serviceUrl: "http://<base url>/codesystemversions?format=json"
};

function init() {

    $(document).ready(
        function() {
            var url = CodeSystemListConfig.serviceUrl;
            $.getJSON(url + "&callback=?", function (data) {

                for (var i in data.codeSystemVersionCatalogEntryDirectory.entryList) {
                    var entry = data.codeSystemVersionCatalogEntryDirectory.entryList[i];
                    var key = entry.formalName;
                    var designation = entry.documentURI;
                    var uri = entry.href;
                    $("ul").append("<li><a href=\"" + uri +"\">" + key + "</a></li>");
                }
            });
        });
}

when complete add codesystem.js to the cts2/js directory
Create a new html file containing the following html and add it to the root CTSRest folder

<!DOCTYPE html>
<html>
<head>
    <title>Code System</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="cts2/js/codeSystem.js"></script>
    <script src="cts2/js/jquery-1.10.2.js"></script>
</head>
<body>
<h1>Code Systems</h1>
<script>init()</script>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">Home</a></li>
</ul>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

Open the new HTML file in a browser and you should see code systems displayed on a browser page.

Troubleshooting

If this page shows errors in your browser's debugging tools, you may have extraneous characters in your text file. Try removing all indentations, save and run again.