tools: what do we need

hello world: in plain java script

  • download CRF A
  • upload it to your local OC
  • choose: View CRF Version Data Entry
  • right-click in the screen and choose "save as"
  • browse to your tomcat\webapps folder
  • choose for name "StaticCRF_A.html", "Webpage, HTML Only"
  • change your browser to "http://localhost:8081/oc341/StaticCRF_A.html"
  • open StaticCRF_A.html in notepad++
  • find "RightItemText" and next to it write 
    <td valign="top">RightItemText
<script>document.write('hello world');</script></td>
  • refresh the page
What if you don't see anything? Then switch on the console by pressing F12.
Warning: you will see an error message: prototype.js (regel 6598, kol 4); this is a bug and will not break your code!

hello world: with jquery

jQuery: it is already there: D:\tomcat\webapps\oc341\includes\jmesa
What is jQuery? The people who contribute to jQuery lovingly say it is "The Write Less, Do More, JavaScript Library". It has a number of built-in functions that make javascripting easier.
To demonstrate how jQuery works, we'll switch to notepad++ and change "document.write('hello world');" to:

<script src="includes/jmesa/jquery.min.js"></script>
<script>$.noConflict();
$.noConflict();
jQuery(document).ready(function($) {
	document.write('hello world');
	})
</script>

When you do this and refresh your screen you will see only hello world, which is a bit too much! JQuery "takes over" your whole HTML-document and we don't want to go that far. Create a so-called div or division in your CRF with the name DivToShowText

<div id='DivToShowText'></div>

Now you can make a reference to this "object" by using the function: $("#DivToShowText") And we not only want to make a reference to it, we want to change it, or rather we want to change the html that is in the div. this we do with:

$("#DivToShowText").html('hello world');

Big steps! We've written script in our page that will be executed, the moment that all objects of the document are present, or in other words, when the document is ready.

You can see this even more clearly when you change 

<div id='DivToShowText'></div>

into

<div id='DivToShowText'>goodbye world</div>

This is a good start, but of course we want to interact with whatever is entered into the CRF. Now, as we saw, our div has an id, and so do all objects of the document. However these id's are not "logical" in any way. For example the input of our item is called "input10".

Now it would be nice to refer to the input directly. This we do with a trick: we start with our div "DivToShowText". This div is in a td and the td is part of a tr, which is part of a table. If you want to see which table, go upwards to around line 815 where it says

<table border="0">
	<tr>
		<td valign="top" class="aka_ques_block"></td>

and then change that to table border="1".
We will walk to the input by taking this "route": first go to the parent of the div ad this is the td. Then go to the parent of the td and this is the tr. Now in this tr, we look for objects of type "input". And the result is

$("#DivToShowText").parent().parent().find("input");

We're almost at the point where we can do something sensible. The score so far: we can read and write and we can refer a bit. Now we must look at the timing. Suppose we don't want to say "hello world", but "you just wrote ..." and then the content of what the user entered in the CRF-item. This means in fact two things:

  1. reading the value of the item and displaying it
  2. updating it when anything changes

As for 1, let's settle that first. We rewrite our jQuery(document).ready function and we give the CRF-item a name, like myItem. We can then read the value of it with the method .val()

var myItem=$("#DivToShowText").parent().parent().find("input");
$("#DivToShowText").html('you just wrote: ' + myItem.val());

If we now reload the page, we just see "you just wrote" and nothing more, even if we write something in the item. We must execute the action again if anyhing is entered in the CRFItem, step 2. This we do by using the function keyup:

myItem.keyup(function(){
	$("#DivToShowText").html('you just wrote: ' + myItem.val());
	})

Now it is obvious that we are repeating ourselves here, so we put the action in a function called "executeMyActions()" and we call this function whenever something is typed in the input and also when the document is ready:

<!-- our code starts here 
********************************************************** -->
	<td valign="top">RightItemText
	<div id='DivToShowText'>goodbye world</div>
	<script src="includes/jmesa/jquery.min.js"></script>
	<script>$.noConflict();
	jQuery(document).ready(function($) {
		//define the CRF item:
		var myItem=$("#DivToShowText").parent().parent().find("input");
		
		//define a function of the actions to be executed:
		function executeMyActions(){
			$("#DivToShowText").html('you just wrote: ' + myItem.val());
			}
		//call the function when something is entered
		myItem.keyup(function(){
			executeMyActions();
			})
		
		// and execute the function also when the document loads
		executeMyActions();
		}
	)
	</script>

<!-- our code ends here   
********************************************************** -->

If you're happy with the script, copy it in notepad++ and paste it in the right_item_text of the item of the CRF. Upload the CRF and check if everything works also in OpenClinica.

Start-page of the workshop.

this page was last reviewed July 2015