Allow user to select one of 5 different bible versions to view references in. What's the best way to make this happen? Hiding css classes? AJAX?

I'll be referencing bible verses on the website i'm making. When a user clicks the bible verse, it expands to show the verse.

So Genesis 1:1 when clicked, turns into Genesis 1:1 In the beginning God created the heavens and the earth etc.

At the top of a page in the settings panel I want to allow them to pick 1 of 5 different versions. So when they click the verse, it will show it in 1 of those 5 versions for all the verse references on the website.

What's the best way to do this? I've thought about having 5 different SPANs for each reference, but I could make as many as 10 or more references on a page, that would be 40 extra hidden spa开发者_开发问答ns... Would ajax be better? What method would you suggest for something like this?

You could store the verses in an XML file and use Ajax to return a specific verse based on the title. Your code could look something like this...

HTML...

<ul>
    <li class="verse"><a href="#">Deuteronomy 31:6</a></li>
    <li class="verse"><a href="#">Joshua 1:9</a></li>
</ul>

jQuery...

        $(".verse a").click(function (event) {
            event.preventDefault();
            $link = $(this).parent();
            $title = $(this).text();
            $.ajax({
                type: "GET",
                url: "verses.xml",
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('verse').each(function () {
                        var title = $(this).find('title').text();
                        // match titles
                        if ($title == title) {
                            var text = $(this).find('text').text();
                            $link.empty().text(title + ': ' + text);
                        }
                    });
                }
            });
        }); // end

XML file...

<?xml version="1.0" encoding="utf-8"?>
<verses>
  <verse>
    <title>Deuteronomy 31:6</title>
    <text>Be strong and courageous. Do not be afraid or terrified because of them, for the LORD your God goes with you; he will never leave you nor forsake you.</text>
  </verse>
  <verse>
    <title>Joshua 1:9</title>
    <text>The LORD gave this command to Joshua son of Nun: "Be strong and courageous, for you will bring the Israelites into the land I promised them on oath, and I myself will be with you.</text>
  </verse>
</verses>

I would use a JSONP kind of approach. Create a request handler that writes JavaScript containing the verses you need for a given version. If the variable was written to the global scope, you wouldn't even need to bother with a callback – the script should be loaded by the time the user clicks to expand the verse.

Your handler would write something like:

verses = {
    Genesis: {
        1: { 
            1: "In the beginning God created ...",
            5: "And God called the light Day ..."
        },
        6: { 19: "And of every living thing of all flesh, two of every sort ..." }
    },
    John: {
        1: { 1: "In the beginning was the Word ..." }
    }
};

Then you would load the verses by injecting the script after a version was chosen.

function loadBibleVerses(references, version)
{
    var script = document.body.appendChild(document.createElement("script"));
    script.src = "/bibleVerses.ashx?version=" + version + "&references=" + references;
}
loadBibleVerses("Genesis:1:1,Genesis:1:5,Genesis:6:19,John:1:1", "KJV");

If you want you the upside to use some script to set CSS classes that show and hide the content is that its superfast on the client. The downside is that it means you send down a lot of content that may never be seen by the user (aka they never click on it). The upside to using AJAX calls is that it creates a small payload on first load. The downside is that it means there are a lot of web calls and on a machine with slow internet that can be a pain.

Personally the length of any verse in the bible isn't long enough to worry about the extra size being tacked on to the response so i would use some simple script to hide and show the content with CSS and just always send all version to the client.

Because of the size of the bible, I dunno if I would want to load all text at once and then hide them with CSS/jQuery. I would probably use some kind of AJAX. For example:

index.php:

<h2><a href="genesis.php" class="loadlink">Genesis 1:1</a></h2>
<p class="genesis"></div>

loader.js:

$(".loadlink").click(function(){
   var href = $(this).attr("href");
   $("p.genesis").load(href);
   return false;
});

Now, if you for example would have each bible-chapter on it's own page, then I would probable use some kind of expander.

Sure, there are many downsides to AJAX, but if you are having some massive amounts of text, and perhaps images on a page - I find it rather unnecessary to load in everything at once.