Ways to load large amount saved data into an HTML page? - html

Question

I have a timesheet that several of my employees use and fill out daily. I'd like to add the feature for them to be able hit 'Save' and then later on they can load what they saved back into the time sheet.
I have the save part working just fine. It just saves the data in the sheet to some tables in a database. The real issue/question I have is what is the best way to get this loaded back into the database? I've done some very simple save/load stuff before but only with a single field. I used an ajax call like this:
function grabTransportNum(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById('tandt1').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("POST", strURL, true);
req.send(null);
}
}
All this does is pull out a single number and sets the value of 'tandt1' to whatever number is returned. Doing this for every field sounds easy enough, but depending on how much is saved, I may need to load data into 100+ fields. Having a function like this for every single field sounds absolutely awful, so I figure there must be a better way to go about this. Could I get some suggestions?

Answer 1

What you could do is instead of sending a single field from the server, send a JSON that has multiple fields, like:
{
"fields": [
{ "id": "tandt1", "value": "persisted value"},
//in here you'd have the rest of the fields in the same format
]
}
then change your function to something more like this:
function reloadFields(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function () {
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
var data = JSON.parse(req.responseText);
if (data && data.fields && data.fields.length > 0) {
for (var field,i=0;i<data.fields.length;i++) {
field = data.fields;
document.getElementById(field.id).innerHTML = field.value;
}
}
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("POST", strURL, true);
req.send(null);
}
}

Answer 2

A tidy way to do it would be for the javascript on the page to set a flag for any field that is changed. Then when the employee submits the data, the only data which is actually sent is the change(s) made. So if you're using ajax, here's what I would suggest: for each edit the user makes, add the changes to an object which you will send via ajax when the user hits submit.