Donnerstag, Dezember 29, 2005

An AJAX enabled bible reader


This is a small documentation for the online available Bible Reader at

The reader can be started just by opening a window with the given URL. The page loads completely and starts with one of the available versions (of course) on the first book, first chapter, first verse: "In the beginning...".

You can select one of the server-side installed bibles by using the first select box:

sf_kjv_strongs_rev1b:A English version of the bible.
en_gb_KJV2000_1:A more modern English version of the bible.
luther1912:A German version of the bible.
biblehebr:a Hebrew version of the bible.

Yes, it's right to left - Does it look right?
I see some differences between FireFox and IE.
Maybe anyone can help on that topic !

In the second select box you can choose one of the available book. Some bibles provide names for the books, others don't and you have to use the given numbers. The New Testament starts with book 40.

In the third select box you can choose the chapter you want to read and in the forth select box you can finally choose the verse.

As you change the values of these select boxes you will see that the select lists will be updated automatically so that only valid entries are available. If you choose a book, the list of chapters will be updated, If you choose a chapter, the list of verses will be updated...

In the big text box below the text of the selected verse will be shown.

It is possible to change the version without changing the selected book, chapter and verse so you can easily switch between German and English or different English versions.

Below the text boxes are 2 buttons that enables the forward and backward navigation cross all book and chapter boundaries in a given version.

You navigate across multiple 5 MByte sized books. Fast !


The published web page available at is already a AJAX application and more than just a small technology driven demo page that shows how to use a specific control or piece of code.

I started working on this application to show how it all works together and to see where we need common functionality and what features we need within the controls.

Cascading Select Elements

The 4 select boxes at the top of the page are dynamically linked together by raising and listening to some page-level data connections. Together they form the cascading 4-level specification of the available verses.

Here, the AJAX Select box control is used together with a AJAX action and some JavaScript code. The chapter select box is defined by

<ajax:Select id="ChapterSelect" runat="server" pageproperty="chapter" style="width: 120px">

and the JavaScript code just below it reacts on changes of the version or the book. The AJAX Action is used to fetch all the Chapters from the server by using the BibleData WebService and the ListChapters method.

<script defer="defer" type="text/javascript">
  var obj = document.getElementById("ChapterSelect");
  obj.GetValue = function(prop, value) {
    if (((prop == "version") || (prop == "book")) && (jcl.DataConnections.GetPropValue(prop) != value)) {
      ajax.Start(this.ChapterAction, this);
  }; // GetValue
  jcl.DataConnections.RegisterConsumer(obj, "*");

  obj.ChapterAction = {
    delay: 10,
    prepare: function(obj) {
      key = jcl.DataConnections.GetPropValue("version")
       + ";" + jcl.DataConnections.GetPropValue("book");
       return (key); },
    call: proxies.BibleData.ListChapters,
    finish: function (value, obj) {
      if (obj.selLast == true)
        obj.options[obj.options.length-1].selected = true; 
      obj.selLast = false;
    onException: proxies.alertException
  }; // ChapterAction

Very similar scripts can be found for the other 2 cascaded select boxes.

Retrieving the Vers Text

To fetch the vers text, another AJAX action, named VersTextAction is used. The 4 properties version, book, chapter and vers are retrieved and passed to the BibleData WebService and the GetVers function. The returned text is then written into the text area.

obj.VersTextAction = {
  delay: 10,
    function(obj) {
      key = jcl.DataConnections.GetPropValue("version")
       + ";" + jcl.DataConnections.GetPropValue("book")
       + ";" + jcl.DataConnections.GetPropValue("chapter")
       + ";" + jcl.DataConnections.GetPropValue("vers");
      return (key);
    }, // prepare
    function (value, obj) { = ((jcl.DataConnections.GetPropValue("version") == "biblehebr") ? "rtl" : "ltr");
      obj.innerHTML = value;
}; // VersTextAction

A very similar AJAX Action is used to look for a Prolog Text that might be describing the current book. The rest of JavaScript programming is for the sequential navigation through the verses, chapters and books.

On the Server a ASP.NET WebService, written in C# with 5 methods is used to deliver all the data that is needed by the Bible Reader Web page. see:

That's all. All the source you need for this application has only about 15 kByte of text. You might not get any application of this functionality with less coding.

Programming AJAX Web Applications can be easy and without a lot of source code if you choose the right technology and level of programming.

Keine Kommentare: