This app uses a js file as a database and has several features.
A select element can be interactively populated.
The app can be instantly updated on modifications.
Multiple items can be added at once.
This is the interface with the select exposed:
This is an option selected:
The app consists of a html file:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11″>
<title>HTML Editor</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#t2{width: 700px}
#t1, #t2, #s1 {font:normal normal 600 18px Arial;
</style>
</head>
<body>
<select id=”s1″></select> <input type=”text” id=”t1″ name=”t1″ value=”Add Option” /> <input type=”text” id=”t2″ name=”t2″ value=”Option Value” ondblclick=’addItems();’ /> <input type=”button” id=”b1″ name=”b1″ value=”Recall”onclick=’rcall();’ /> <input type=”button” id=”b2″ name=”b2″ value=”Save”onclick=’sve();’ />
http://tst1.js
<script type=”text/javascript”>
var oldURL = “tst1.js”; var textToSave = “”; var indx; var itemStr = “”; var cnt = -1;
for (var i = 1; i < dbindx; i ++) {
document.getElementById(“s1”).innerHTML += ‘<option>’ + selArr[i].join() + ‘</option>’;
}
function addItems() {
cnt ++;
document.getElementById(“s1”).innerHTML += ‘<option>’ + document.getElementById(“t1”).value + ‘</option>’;
document.getElementById(“s1”).value = document.getElementById(“t1″).value;
itemStr += ‘dbArr[‘ + (dbindx + cnt) + ‘] = [\” + document.getElementById(“t2″).value + ‘\’];\n’;
itemStr += ‘selArr[‘ + (dbindx + cnt) + ‘] = [\” + document.getElementById(“s1”).value + ‘\’];\n’;
}
function rcall() {
indx = document.getElementById(“s1”).selectedIndex + 1;
document.getElementById(“t2″).value = dbArr[indx].join();
}
function sve() {
if (dbindx == 1) {
textToSave += ‘dbArr[1] = [\” + document.getElementById(“t2″).value + ‘\’];\n’;
textToSave += ‘selArr[1] = [\” + document.getElementById(“s1”).value + ‘\’];\n’;
}
if (dbindx > 1 || dbindx + cnt > 1) {
textToSave = “”;
for (var i = 1; i < dbindx; i ++) {
textToSave += ‘dbArr[‘ + i + ‘] = [\” + dbArr[i].join() + ‘\’];\n’;
textToSave += ‘selArr[‘ + i + ‘] = [\” + selArr[i].join() + ‘\’];\n’;
}
textToSave += itemStr;
}
var textToSaveAsBlob = new Blob([textToSave], {type:”text/plain”});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
fileNameToSaveAs = prompt(“FileName to save as”,oldURL);
oldURL = fileNameToSaveAs;
var downloadLink = document.createElement(“a”);
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = “Download File”;
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = “none”;
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event) {
document.body.removeChild(event.target);
setTimeout(“rload()”, 12000);
}
function rload() {
location.reload();
}
</script>
</body></html>
and a js file, which is used only as a database:
var dbindx = 4; selArr = new Array(); dbArr = new Array();
dbArr[1] = [‘this is a test’];
selArr[1] = [‘Option 1’];
dbArr[2] = [‘This is a second test’];
selArr[2] = [‘Option 2’];
dbArr[3] = [‘This is a third test’];
selArr[3] = [‘Option 3’];
dbindx is always set one greater than the highest array index, so the next array element will be incremented.
There are two arrays, one for the select options and one for the corresponding string.
On loading, the select element is populated from the array:
for (var i = 1; i < dbindx; i ++) {
document.getElementById(“s1”).innerHTML += ‘<option>’ + selArr[i].join() + ‘</option>’;
}
There are two text inputs. The first creates options to be added to the select:
The second both adds the select options and creates the associated strings:
function addItems() {
cnt ++;
document.getElementById(“s1”).innerHTML += ‘<option>’ + document.getElementById(“t1”).value + ‘</option>’;
document.getElementById(“s1”).value = document.getElementById(“t1″).value;
itemStr += ‘dbArr[‘ + (dbindx + cnt) + ‘] = [\” + document.getElementById(“t2″).value + ‘\’];\n’;
itemStr += ‘selArr[‘ + (dbindx + cnt) + ‘] = [\” + document.getElementById(“s1″).value + ‘\’];\n’;
}
Instead of adding the new array e;ements to the js file with each addition, they can be stored in a variable and be added at once, saving time.
The general method of saving has been discussed before, but I will go over some unique modifications.
if (dbindx == 1) {
textToSave += ‘dbArr[1] = [\” + document.getElementById(“t2″).value + ‘\’];\n’;
textToSave += ‘selArr[1] = [\” + document.getElementById(“s1”).value + ‘\’];\n’;
}
if (dbindx > 1 || dbindx + cnt > 1) {
textToSave = “”;
for (var i = 1; i < dbindx; i ++) {
textToSave += ‘dbArr[‘ + i + ‘] = [\” + dbArr[i].join() + ‘\’];\n’;
textToSave += ‘selArr[‘ + i + ‘] = [\” + selArr[i].join() + ‘\’];\n’;
}
textToSave += itemStr;
}
dbindx += cnt + 1;
textToSave = ‘var dbindx = ‘ + dbindx + ‘; selArr = new Array(); dbArr = new Array();\n’ + textToSave;
Since the js file must be replaced with each saving, the textToSave string must contain all previous content.
if (dbindx == 1) {
textToSave += ‘dbArr[1] = [\” + document.getElementById(“t2″).value + ‘\’];\n’;
textToSave += ‘selArr[1] = [\” + document.getElementById(“s1”).value + ‘\’];\n’;
}
if (dbindx > 1 || dbindx + cnt > 1) {
textToSave = “”;
for (var i = 1; i < dbindx; i ++) {
textToSave += ‘dbArr[‘ + i + ‘] = [\” + dbArr[i].join() + ‘\’];\n’;
textToSave += ‘selArr[‘ + i + ‘] = [\” + selArr[i].join() + ‘\’];\n’;
}
The new data is then appended:
textToSave += itemStr;
I said before that dbindx must 1 greater than the highest index.
Therefore, the headings are created after the arrays, with an incremented dbindx, and then placed before:
dbindx += cnt + 1;
textToSave = ‘var dbindx = ‘ + dbindx + ‘; selArr = new Array(); dbArr = new Array();\n’ + textToSave;
The last unique thing with the save is the aytomatic update.
A timer is started and calls a function to reload the page:
setTimeout(“rload()”, 12000);
function rload() {
location.reload();
}
The timer is set for twelve seconds to allow time to save the js file, before the page is reloaded.
The result is the page is automatically updated in twelve seconds, with all new data retrieved from the js file.
Finally, selecting an option and clicking Recall displays the string associated with that option:
function rcall() {
indx = document.getElementById(“s1”).selectedIndex + 1;
document.getElementById(“t2”).value = dbArr[indx].join();
}
This is a fairly simple example, but the same concept can be used for any arrays that can be set up.
Tips & Tricks 