Super easy editable html pages.

As part of an ongoing project to improve the woeful state of Qualitative data analysis software, I've already put together some tools to meet my needs. The tools are very much at the prototype stage, and will remain so for the foreseeable future, but I'm using them to prepare publishable work.

For the data management end of things I use a super-simple SGML format to tag chunks of text that I'm interested in, and use my Text::TranscriptMiner library to retrieve data. I use Git for version control, as a kind of high granularity lab book. I also have a web application which deals with the data visualisation side of things.

One of the things about qualitative analysis software is that there's a lot of post-processing handling of the data, and a need to write summaries (technically called memos) of the raw data. To that end I need to think about improving the visualisation tools in the web application, and that suggests to me editing data directly in the browser. This is super easy with the following javascript function:

document.getElementById("my_id").contentEditable = "true"; .

So here's how to make a crudely editable section of a web page (the content div inside the form), and return it to the back-end web application:


<script type="text/javascript">
$(document).ready(function() {
document.getElementById("content").contentEditable = "true";
$('#data_container').submit(function() {
$('[name=data]').val( $('#content').html() );
});
});
</script>
<form id="data_container" action="doit" method="post">
<div id="content">
<h1>hi there</h1>
</div>
<input type="hidden" name="data" value="default" />
<input type="submit" value="submit" />
</form>

At which point, we have well structured html returned to the web app, with which I can use a tool like Web::Scraper to extract the data and put it somewhere sensible for the back end to retreive at a later date.

Leave a comment

About Holy Zarquon's Singing Fish

user-pic Catalyst hacker, management researcher and health informatician.