long lists

Let's do some acknowledging first: everything of this part and in fact many other things of this workshop were invented by Sander de Ridder! And also: groundbreaking work was done by Robert Meester.

An example of a long list is the CTC list of Adverse Events. For this workshop we created a short version of it, but that still has an impressive amunt of hundreds of item. You can download the list here and please store it in a folder which is part of your OpenClinica-installation and use as a foldername "extrafiles": for example D:\tomcat\webapps\oc341\extrafiles\ctc.xml. If you open the file in your browser you can see the contents: there are AETerms and they are grouped by SystemOrganClass. We will focus on just two aspects: the term and the code.
Download here the CRF we will use to populate a select with all these codes. Then we will write script to assign the selection of one AE-term to the OpenClinica-item. When you've uploaded the CRF, open it in preview mode and save it as, you guessed it, StstaicCRF_E.html and open that in notepad++

In jQuery we can attempt to read an xml-file and when we are succesfull we can do something with. This way of working is called ajax: Asynchronous JavaScript and XML. The syntax to read the xml-file is:

	$.ajax({
		type: "GET",
		url: "extrafiles/ctc.xml",
		dataType: "xml",
		success: parseXML
		});

This is just for getting the xml-file, but now we must define a function for analysing it. Look again at the xml-file in your browser. We are interesed in the AETerms and of each AETerm we want to use the MedDRACode12 and the AETermName. Let's start our function parseXML with looping through these AETerms:

	function parseXML(xml){
		$(xml).find("AETerm").each(function(){
			});
		console.log("parse finished")
		}

As you can see we just loop through the terms and then when it is finished, we display a message in the console. Let's add a counter to that, so we can see how many terms there are:

	function parseXML(xml){
		var i=0;
		$(xml).find("AETerm").each(function(){
			i++;
			});
		console.log("parse finished: " + i + " terms")
		}

We're getting really close now: we can loop through the terms. The way to for example refer to the attribute "MedDRACode12" of the terms is $(this).attr("MedDRACode12") and this may seem a bit confusing: what is this $(this)? That is the current object of our loop, so the AETerm at hand. And we make store the code of the term with termCode = $(this).attr("MedDRACode12") and likewise the name of the term with termText = $(this).attr("AETermName").
Now we can expand our select ctcSelect with extra entries by using $("#ctcSelect").append($("<option />").val([new_code]).text([new_text])) and this results in:

	function parseXML(xml){
		var termCode;
		var termText;
		$(xml).find("AETerm").each(function(){
			termCode = $(this).attr("MedDRACode12");
			termText = $(this).attr("AETermName");
			$("#ctcSelect").append($("<option />").val(termCode).text(termText));
			});
		}

quick, write that down!

One more step to take: we must store this selected value in the CRF-item and for this we need a reference to that item. We choose as a starting point our select so we add var crfItem = $("#ctcSelect").parent().parent().find("input");. We want to update this CRF-item everytime the select changes, so:

	$("#ctcSelect").change(function(){
		crfItem.val($("#ctcSelect").val());
		});

Yes, that's what we want! And set the status to "changed" and yes, also make the item read-only. And please: when the CRF is loaded then give the select the value of the CRF-item.

<select ID="ctcSelect">
<option value="">--please select--</option>
</select>
<script src="includes/jmesa/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($) { 
	var crfItem = $("#ctcSelect").parent().parent().find("input");
	//read xml-file
	$.ajax({
		type: "GET",
		url: "extrafiles/ctc.xml",
		dataType: "xml",
		success: parseXML
		});
	//construct the select
	function parseXML(xml){
		var termCode;
		var termText;
		$(xml).find("AETerm").each(function(){
			termCode = $(this).attr("MedDRACode12");
			termText = termCode + " - " + $(this).attr("AETermName");
			$("#ctcSelect").append($("<option />").val(termCode).text(termText));
			});
		}
	//when the select changes, write the vaue to the CRF
	$("#ctcSelect").change(function(){
		crfItem.val($("#ctcSelect").val());
		crfItem.change();
		crfItem.prop("readonly", true);
		});
	//when the CRF is loaded, set the select the correct value
	$("#ctcSelect").val(crfItem.val());
	})
</script>

Start-page of the workshop.

this page was last reviewed July 2015