Smart chained select boxes

[ReverendBoltron]

I have been working a bit in PHP and JavaScript and AJAX lately. I am very new at it all, so any help would be greatly appreciated.

Here is the question:
What is the best way to make sure keep data from an AJAX call, and cut back on duplicate requests and downloads from the MySQL server?

Here is the background:
What I am working on is a page that has four chained select boxes with dynamic content. The first select box is the User, which in turn populates the next box, Book. Book, populates Chapter, and Chapter populates Verse. When a value in Verse is selected, it uses some simple AJAX to go off to a MySQL database and get the verse that was selected to display it on the page in a span.

Originally I had the page set up with only three chained boxes, Book, Chapter, and Verse. They all worked perfectly, and I found a nice library that had some great functions for dynamic select boxes. There were no errors with the boxes repopulating and all that was happening behind the scenes was transparent to the user.

The purpose of the select boxes is to make it easier to navigate through verses that are highlighted in a bible and display them (currently one at a time).

I originally had just my own list of verses, which totaled 1,344. That is quite a lot, but it didn't affect the time for loading too much on the average computer. The size was about 66k, which isn't tiny, but it was acceptable to me. When I decided to add more people to the list, I realized how many verses there could end up being. If each person had even 500 verses, and there were 5 people, the time to download would no longer be acceptable. So now I am currently working on a solution.

I ended up scrapping the JS library and going with AJAX. The problem I encountered here was that when I would change a box, there would be a noticeable delay and errors in the box repopulation. Sometimes the boxes wouldn't update quick enough, and if you chose a verse while the chapter was in another place, you would get a different verse than you intended, or no verse at all if it wasn't there!

So the idea that I am working on is using the JS library, and making the boxes "smart", as in, not downloading the same information twice, but storing all information in an array or a file for reference.

What I would like to do is have the page set up with, say 3 users.

<select name="User" onchange="popBoxes(this.value)">
<option selected value="Titus">Titus</option>
<option value="Justin">Justin</option>
<option value="Jeff">Jeff</option>
</select>

when the user is changed, the popBoxes function called..

function popBoxes(user)
{
    //if this is true, do a MySQL query to get the data for the user
    getdata=1;

    //test to see if the user has been downloaded already
    for(i=0;i<UsersGrabbed.length; i++)
    {
        if(user==UsersGrabbed[i])
        {
            //this is false, so we don't do MySQL query, use existing data
            getdata=0;
            //now we find the user data and populate
            //the object which holds the select options
            //of the JS Library for dynamic chained boxes
        }
    }

    if(getdata)
    {
        //add the new user to the list of downloaded users
        UsersGrabbed.push(User)
        //here we do a mysql query to get all of the data
        //for the dynamic boxes object 
    }
}

As of right now, I am currently stuck for finding out how to populate the array properly. I also don't know if this will work well, or if there is another, better way of doing this.

If I can get this working, then what I would eventually like to do is update the list while there aren't any other requests going on, but I don't know if that is smart.

The whole point of this is to make this as transparent as possible. Again, any ideas are more than welcomed.

As for the database, I already have a table which has the whole bible stored in it. It has two fields, one which has an 8 digit number which has the book 'XX' the chapter 'XXX' and the verse 'XXX', the other field has the formatted text for the verse.

The value for the Verse select box is the 8 digit number, which when selected, goes off and retrieves that verse from the MySQL database.

[ReverendBoltron]

I ended up not using AJAX to control the information that was being downloaded. I just dynamically created new script tags which point to the files that contain the users data.

Then I added the name to an array which was for testing to see if the data had been downloaded already.

var UsersGrabbed = new Array();
UsersGrabbed[0] = "Titus"

function popBoxes(user)
{
	//if this is true, add new script tag to get the data for the user
	var getdata=1;
	
	//test to see if the user has been downloaded already
	for(i=0;i<UsersGrabbed.length; i++)
		if(user==UsersGrabbed[i])
		{
			//this is false, so we don't add a new tag, use existing data
			getdata=0;
		}

	if(getdata)
	{
		//add the new user to the list of downloaded users
		UsersGrabbed.push(user);
		//here we add a new script tag to get all of the data for the dynamic boxes object 
		addScript(user)
	}

}	

function addScript(user)
{
	var script = document.createElement('script');
	//assign the users data to the source file
	script.src = user+'.txt';
	script.type = 'text/javascript';
	script.defer = true;

	//place it on the form
	var form = document.getElementsByTagName('form').item(0);
	form.appendChild(script);
}

The popBoxes function is called every time the absolute parent boxes value is changed.