Populating a JavaScript array from a database for fast client side rendering.
JUST FOR FUN
Click an arrow to visit the application.
ALL THE STUFF THAT'S LEFT HANDED
PLAY OUR SLOT MACHINE, WIN NOTHING
GET RID OF THE DOUBLE CLICK SUBMIT
FIX THAT JAVASCRIPT NUMBER
KEEP TABS ON THE HEALTH OF YOUR COLDFUSION SERVER
CREATE A DYNAMIC BAR CHART
THINK OF ALL THE LEFT HANDED STUFF
If you were born left handed prior to the 1940's in the United States, the chances are
that you had to learn to write with your right hand. We don't do that any more, but there
is still plenty of stuff being made today that is exclusively, or mostly, only available for
right handed people. Some of it isn't as obvious as a can opener. Our favorite is men's
underwear ....don't ask! View the current list and add your own favorites.
GIVE IT A TRY
HELP BUILD THE LIST
Please make a contribution. Use your ImagineNation :-)
Enter an item, a very brief explanation if needed, and create an alias for yourself so
that when you return you can see what you have already entered. Note that we use
javascript to check if your entry is a duplicate, but you can run a search first if you want.
Remember this is a family page. We reserve the right to delete entries.
Name of Item Explanation if needed Create an alias for yourself
HERE IS SOME OF THE CODE
First, create a JavaScript array in the head of the document
and populate it from a database query.
line = new Array();
line[0] = new LH('ID','ITEM','DESCRIPTION','ALIAS');
<CFOUTPUT>
<CFSET n = 1>
<CFLOOP QUERY="leftstuff">
line[#n#] = new LH('#leftstuff.ID#', '#Replace(leftstuff.ITEM,"'","\'",'all')#', '#Replace(leftstuff.DESCRIPTION,"'","\'",'all')#', '#Replace(leftstuff.ALIAS,"'","\'",'all')#');
<CFSET n = n + 1>
</CFLOOP>
</CFOUTPUT>
Note that the line[#n#] = .... entry is actually on a single line and that
the CF "Replace" operator is used to replace all instances of a single quote
with a backslash and quote. This backslash addition escapes any apostrophy
that might be used in the entries and screw up the JavaScript.
Next, assign names to the elements of the array for easy access.
function LH(id,item,des,alias){
this.id=id;this.item=item;this.des=des;this.alias=alias;
}
Now comes the script to read the array and enter the
results to the textarea. The first "if" conditional returns all of the results
when the document loads. The second "if" returns just those records where
an alias is specified by making an entry to the "alias" text box. The
third "if" returns results of a search on the
array "item" entry. This search selects only those items where the beginning
characters match the characters entered in the text box for the search.
function showLeftStuff(key,term){
var copy = '';
if(key == 'item'){
copy = 'TOTAL RECORDS = ' +eval(line.length -1)+ '\n'
for(i=1; i<line.length; i++){
copy += line[i].item.toUpperCase() + '\n';
}}
if(key == 'alias'){
var num = 0;
copy = term.toUpperCase()+ ' has made the following entries.\n';
copy += 'ITEM EXPLAINATION\n';
for(i=1; i<line.length; i++){
if(line[i].alias.toLowerCase() == term.toLowerCase()){
num++;
copy += line[i].item.toUpperCase() + ' ' +line[i].des+ '\n';
}}
copy += '\t' +num+ ' TOTAL ENTRIES';
}
if(key == 'anitem'){
var num = 0;
copy = term.toUpperCase()+ ' returns the following entries.\n';
copy += 'ITEM EXPLAINATION\n';
for(i=1; i<line.length; i++){
// keep the next two lines on one line
if(line[i].item.toLowerCase().substring(0,term.length).
indexOf(term.toLowerCase()) != -1){
num++;
copy += line[i].item.toUpperCase() + ' ' +line[i].des+ '\n';
}}
copy += '\t' +num+ ' TOTAL ENTRIES';
}
document.postit.auth.value = 'yes';
document.postit.results.value = copy;
}
Note the use of "\n" and white space above. This is a JavaScript
method of formatting text with a new line and spaces.
Depending on your screen resolution, some of the above may be unreadable.
Just copy right from this page and paste to a text editor to get a better view.
HOW IT WORKS
Call us frugal, call us stingy, but we hate to waste bandwidth. All of the searching
on the JavaScript array is done in the client machine without once going back to
the server for a new query. That is, once the array is populated from a query
of the server database, any amount of searching can be performed rapidly,
easily, and locally. The above examples are fairly simple; very complex searches can be
executed just as well. This array search and print technique is the basis of
operation of the MyStore and webPeddle storefront products.
Naturally, to enter a new item to the database, a return to the server is required.
This technique would no doubt bog down if your query returns 10,000 records.
We've had good results trying up to 1000 records, but would recommend limiting
the number of records returned for very large databases. Maybe you'll think of
10,000 left handed items so we can give it a try:-)
Above, we've assumed a query, "leftstuff" exists. ColdFusion is used to
write the query results into JavaScript array lines using a CFLOOP command
with an index on "n" to provide new lines. The "LH" function is just a trick
to name the elements of an array line, making them easier to reference. You could
also refer to them as item[x][2] for instance, but if you're like us this
would quickly get confusing.
The search function is pretty standard, albeit not always obvious.
The line, document.postit.auth.value = 'yes';
just writes to a hidden field in the form for use if a new entry is to be posted.
The line, document.postit.results.value = copy;
writes the search results to the textarea.
Writing code is like wrestling alligators:
The more you thrash around, the more gators join the fray!
