NIH | National Cancer Institute | NCI Wiki  

  • Created by Unknown User (endlecm), last modified on Aug 09, 2017
Contents of this Page

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 Exit Disclaimer logo and Bootstrap 3.0.x Exit Disclaimer logo
  • 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)

JavaScript REST Client 
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

HTML 
<!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.

  • No labels