Source Code

for file /AJAXEngine/S03_AJAXControls/BiblePage.aspx

<%@ Page Language="C#" EnableViewState="false" %>

<%@ Import Namespace="System.IO" %>
<%
  // BiblePage.aspx
  // Sample showing the integration of AJAX Actions and the Select Control.
  // Copyright (c) by Matthias Hertel, http://www.mathertel.de
  // This work is licensed under a BSD style license. See http://www.mathertel.de/License.aspx
  // -----
  // 21.08.2005 created by Matthias Hertel.
  // 25.12.2005 bible subdirectory added.
%>
<script runat="server">
  string BibleList()
  {
    string[] files = System.IO.Directory.GetFiles(Server.MapPath("./bibles"), "*.xml");
    StringBuilder ret = new StringBuilder();
    foreach (string f in files)
    {
      FileInfo fi = new FileInfo(f);
      if (ret.Length > 0) ret.Append(';');
      ret.AppendFormat("{0}:{0}", fi.Name.Remove(fi.Name.Length - 4));
    }

    return (ret.ToString());
  }
</script>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>A Bible reader application using AJAX</title>
  <link href="/mathertel.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="/ajaxcore/ajax.js"></script>
  <script type="text/javascript" src="/ajaxcore/GetJavaScriptProxy.aspx?service=/AJAXEngine/S03_AJAXControls/BibleData.asmx"></script>
  <style>
    .CE {
      margin-top: 4px;
      width: 600px;
      background-color: #cccccc;
      padding: 4px;
    }
  </style>
  <meta name="description" content="A Bible reader application using AJAX" />
</head>
<body>
  <mh:Banner ID="Banner1" runat="server" />
  <mh:Title ID="Title" runat="server" />
  <a style="position: absolute; right: 32px; top: 10px" href="../ViewSrc.aspx">View Source</a>

  <ajax:PersistHistory ID="PersistHistory1" runat="server" eventnames="version;book;chapter" stateeventnames="version;book;chapter" />
  <hr />
  <div style="width: 160px; height: 460px; float: right">
    <h3>testing hyperninks:</h3>
    <a href="#chapter=3&vers=16">3-16</a> <a href="#chapter=5&vers=10">5-10</a> <a href="#chapter=6&vers=12">6-12</a>
  </div>
  <div class="CE" eventnamespace="jcl">
    <table>
      <thead>
        <tr>
          <th>1. Select a version:</th>
          <th>2. Select a book:</th>
          <th>3. Select a chapter:</th>
          <th>4. Select a vers:</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <ajax:Select ID="VersionSelect" runat="server" eventname="version" style="width: 140px">
            </ajax:Select>
          </td>
          <td>
            <ajax:Select ID="BookSelect" runat="server" eventname="book" style="width: 140px">
            </ajax:Select>
            <script type="text/javascript">
              var cascadebook = {
                _handleEvent: function (name, data) {
                  ajax.Start(this._action, this);
                }, // _handleEvent

                _action: {
                  delay: 10,
                  prepare: function (obj) { return (window.state.version); },
                  call: proxies.BibleData.ListBooks,
                  finish: function (value, obj) { document.getElementById("BookSelect").CreateOptions(value, window.state.book); },
                  onException: proxies.alertException
                } // _action
              }
              OpenAjax.hub.subscribe("jcl.version", cascadebook._handleEvent, cascadebook);
            </script>
          </td>
          <td>
            <ajax:Select ID="ChapterSelect" runat="server" eventname="chapter" style="width: 120px">
            </ajax:Select>
            <script defer="defer" type="text/javascript">
              var cascadechapter = {
                _handleEvent: function (name, data) {
                  ajax.Start(this._action, this);
                }, // _handleEvent

                _action: {
                  delay: 10,
                  prepare: function (obj) { return (window.state.version + ";" + window.state.book); },
                  call: proxies.BibleData.ListChapters,
                  finish: function (value, obj) { document.getElementById("ChapterSelect").CreateOptions(value, window.state.chapter); },
                  onException: proxies.alertException
                } // _action
              }
              OpenAjax.hub.subscribe("jcl.version", cascadechapter._handleEvent, cascadechapter);
              OpenAjax.hub.subscribe("jcl.book", cascadechapter._handleEvent, cascadechapter);
            </script>
          </td>
          <td>
            <ajax:Select ID="VersSelect" runat="server" eventname="vers" style="width: 120px" value="1">
            </ajax:Select>
            <script defer="defer" type="text/javascript">
              var cascadevers = {
                _handleEvent: function (name, data) {
                  ajax.Start(this._action, this);
                }, // _handleEvent

                _action: {
                  delay: 10,
                  prepare: function (obj) { return (window.state.version + ";" + window.state.book + ";" + window.state.chapter); },
                  call: proxies.BibleData.ListVerses,
                  finish: function (value, obj) { document.getElementById("VersSelect").CreateOptions(value, window.state.vers); },
                  onException: proxies.alertException
                } // _action
              }
              OpenAjax.hub.subscribe("jcl.version", cascadevers._handleEvent, cascadevers);
              OpenAjax.hub.subscribe("jcl.book", cascadevers._handleEvent, cascadevers);
              OpenAjax.hub.subscribe("jcl.chapter", cascadevers._handleEvent, cascadevers);
            </script>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="CE">
    <div id="PrologText" style="border: solid 1px #203050; padding: 2px; height: 60px; overflow-y: auto;">
    </div>
  </div>
  <div class="CE">
    <div id="VersText" style="border: solid 1px #203050; padding: 2px; height: 160px; direction: rtl">
    </div>
  </div>
  <div class="CE" style="text-align: right">
    <button onclick="PrevVerse()">&lt;&lt; Prev</button>&nbsp;
    <button onclick="NextVerse()">Next &gt;&gt;</button>
  </div>
  <ajax:OpenAjaxEventLog runat="server" />

  <script defer="defer" type="text/javascript">
    var cascadetexts = {
      _handleEvent: function (name, data) {
        var en = jcl.LocalEventName(name);
        if (en == "version" || en == "book")
          ajax.Start(this._actionprolog, this);
        ajax.Start(this._actiontext, this);

      }, // _handleEvent

      _actionprolog: {
        delay: 10,
        prepare: function (obj) { return (window.state.version + ";" + window.state.book); },
        call: proxies.BibleData.GetProlog,
        finish: function (value, obj) { document.getElementById("PrologText").innerHTML = value; },
        onException: proxies.alertException
      }, // _actionprolog

      _actiontext: {
        delay: 10,
        prepare: function (obj) { return (window.state.version + ";" + window.state.book + ";" + window.state.chapter + ";" + window.state.vers); },
        call: proxies.BibleData.GetVers,
        finish: function (value, obj) {
          var field = document.getElementById("VersText");
          field.style.direction = ((window.state.version == "biblehebr") ? "rtl" : "ltr");
          document.getElementById("VersText").innerHTML = value;
        },
        onException: proxies.alertException
      } // _actionprolog

    }
    OpenAjax.hub.subscribe("jcl.version", cascadetexts._handleEvent, cascadetexts);
    OpenAjax.hub.subscribe("jcl.book", cascadetexts._handleEvent, cascadetexts);
    OpenAjax.hub.subscribe("jcl.chapter", cascadetexts._handleEvent, cascadetexts);
    OpenAjax.hub.subscribe("jcl.vers", cascadetexts._handleEvent, cascadetexts);


    // Set the values of the select boxes to the next verse.
    function NextVerse() {
      vsel = document.getElementById("VersSelect");
      csel = document.getElementById("ChapterSelect");
      bsel = document.getElementById("BookSelect");

      if (vsel.selectedIndex < vsel.options.length - 1) {
        vsel.selectedIndex += 1;
        OpenAjax.hub.publish("jcl.vers", vsel.value);
      } else if (csel.selectedIndex < csel.options.length - 1) {
        csel.selectedIndex += 1;
        vsel.selectedIndex = 0;
        OpenAjax.hub.publish("jcl.chapter", csel.value);
      } else if (bsel.selectedIndex < bsel.options.length - 1) {
        bsel.selectedIndex += 1;
        csel.selectedIndex = 0;
        vsel.selectedIndex = 0;
        OpenAjax.hub.publish("jcl.book", bsel.value);
      } // if
    } // NextVerse


    // Set the values of the select boxes to the previous verse.
    function PrevVerse() {
      vsel = document.getElementById("VersSelect");
      csel = document.getElementById("ChapterSelect");
      bsel = document.getElementById("BookSelect");

      if (vsel.selectedIndex > 0) {
        vsel.selectedIndex -= 1;
        OpenAjax.hub.publish("jcl.vers", vsel.value);
      } else if (csel.selectedIndex > 0) {
        csel.selectedIndex -= 1;
        vsel.selLast = true;
        OpenAjax.hub.publish("jcl.chapter", csel.value);
      } else if (bsel.selectedIndex > 0) {
        bsel.selectedIndex -= 1;
        csel.selLast = true;
        vsel.selLast = true;
        OpenAjax.hub.publish("jcl.book", bsel.value);
      } // if
    } // PrevVerse


    // save all event values
    window.state = {
      _handleEvent: function (eventName, eventData) {
        var en = jcl.LocalEventName(eventName);
        this[en] = eventData;
        //      inspectObj(this);
      }
    } // window.state
    OpenAjax.hub.subscribe("jcl.*", window.state._handleEvent, window.state);

    var obj = document.getElementById("PersistHistory1");
    // set default values;
    obj.setDefaultValue("jcl.version", "luther1912");
    obj.setDefaultValue("jcl.book", "1");
    obj.setDefaultValue("jcl.chapter", "1");
    obj.setDefaultValue("jcl.vers", "1");

    // initial load the list of available versions.
    var obj = document.getElementById("VersionSelect");
    obj.CreateOptions("<%=BibleList() %>", window.state.version);

  </script>
  <hr />
  <p>This application can use any bible or even the koran that is formatted using the Zefania XML Bible Markup
    Language.</p>
  <p>Various bible packages using this XML format can be found at: <a href="http://sourceforge.net/projects/zefania-sharp/">
    http://sourceforge.net/projects/zefania-sharp/</a> </p>
  <p>The texts for this demo page are not deployed within the AJAX.zip files to avoid binding my software to
    GNU license.</p>
  <p>In this case it would not be possible to use this software in commercial applications without again putting
    this software under the GNU license. I want to share my ideas and source code with everyone and without
    the restrictions of the GNU license.</p>
  <mh:Footer ID="foot" runat="server" />
</body>
</html>


This page is part of the http://www.mathertel.de/ web site.

For updates and discussions see http://ajaxaspects.blogspot.com/.