This article is printer friendly.
ESV Bible Text via AJAX
- Date Stamp:
- 19 August 2006
- Topic(s):
- How to, Tutorial
- Permanent Link
- Comments?
In response to the Toongabbie Anglican Church site being linked from the ESV Bible Blog, I received several requests to explain how the Bible Talk pages loaded the ESV text using “AJAX”.
The following is a brief summary. I am no expert in this, and simply share what I have done.
I cannot provide support for the following, requests for support may be ignored. Sorry.
In this article:
- Demo
- Retrieving text
- Load Javascript
- Javascript
- Place the Bible text
- Trigger the text to load
- Links
- History
- Comments
Demo
Show: 1 John 1
Retrieving text
Using code from the ESV API page, the “bibletext.php” file takes the Bible reference passed to it and retrieves the ESV text.
<?php
$passage = urlencode($_GET['passage']);
$key = "IP";
$options = "audio-format=flash";
$url ="http://www.esvapi.org/v2/rest/passageQuery?key=$key&$options&passage=$passage";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$response = curl_exec($ch);
curl_close($ch);
print $response;
?>Note: I’ve left in “$options”, however, it is not required here because the default audio-format is flash.
Load Javascript
In the head of the HTML document, load the javascript.
<script type="text/javascript" src="http://www.example.com/directory/btajax.js"></script>
Javascript
I named the javascript btajax.js. I cannot quote a source for this code, but from a quick Google search it seems pretty standard.
var ajax=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
@end @*/
if (!ajax && typeof XMLHttpRequest!='undefined') { ajax = new
XMLHttpRequest(); }
function getMyHTML(serverPage, objID) {
if((serverPage.indexOf("http://www.example.com/")!=0)) return;
var obj = document.getElementById(objID);
obj.innerHTML = "<div style='background: #FFFFCC;'><h2>Bible
Passage</h2><p>Loading...</p></div>";
ajax.open("GET", serverPage);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
obj.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}
Place the Bible text
Put this in your HTML page where you want the text to appear.
<div id="bibletext"></div>
Make sure you grab the CSS provided on the ESV API page, and copy it to your CSS file (or better create a separate CSS file and link to it in addition to your normal CSS file). This CSS file provides some basic formatting to the ESV text, e.g. superscript for verse numbers.
Trigger the text to load
A link that triggers the text to appear. This link includes the address of the bibletext.php file created earlier. You would replace <?php print $passage;?> with the output of your CMS.
On this page, for the demo, I have set the variable $passage to 1 John 1.
The link also includes the id of the div we created earlier, “bibletext”.
<p>Bible Passage: <a href="javascript://" onclick="getMyHTML('http://www.example.com/directory/bibletext.php?passage=<?php print $passage;?>','bibletext');">John 3:16</a></p>
For users who have Javascript turned off, this link will do nothing. So, change the href in the above to point to an actual page that will show the text (e.g. the ESV page, or your own Bible search page). You also need to add “return false;” to the “onclick”. For example, this code takes the user to the ESV site directly if Javascript is turned off:
<p>Bible Passage: <a href="http://www.gnpcb.org/esv/search/?q=<?php print $passage;?>" onclick="getMyHTML('http://www.example.com/directory/bibletext.php?passage=<?php print $passage;?>','bibletext');return false;">John 3:16</a></p>
On the Toongabbie Anglican Church web-site, if Javascript is turned off, the link will take them to the Bible search result on our web-site for the reference.
Links
- More about the ESV Bible Web Service
- On the Toongabbie Anglican Church site, I use the Fade Anything Technique to highlight the text that appears in yellow, then fade to the normal background colour.
- Ajaxload is an online tool to make an animated loading icon.
History
- 14 Oct 07 – updated to use the new domain for the ESV Web Service.
- 9 Sep 06 – updated “Trigger the text to load” to consider case where user has Javascript turned off.
Comments
Andy, thanks for pointing that out – it’s fixed now.
It looks like it’s got something to do with the transfer of the site from textpattern to ExpressionEngine or with the way ExpressionEngine is handling the double-equals.
Whatever it is, also seems to have removed the == in your comment as well, which I fixed.
Small bug in btajax.js
if (ajax.readyState 4 && ajax.status 200) {
should be
if (ajax.readyState == 4 && ajax.status == 200) {