Ajax Form Save-Reload

[MC]

Hi,

I am googling for a script and can't seem to find code to do this. I can
probably write code to save but reloading is an issue.

I want to, using ajax, send all form data back to a server and store. A
concise function to cycle through the fields and create a [element
name,value][element name,value] string would be great. I can give the user
the button to call this "Save Form Data" and store in on the server.

I want to give the user a button, and using ajax call to the server and get
the data. This I can do. Given a string of data, reload the fields in the
form. Cycling through the data, finding the matching element name, and
reload the value given the appropriate element type, text, checkbox, radio,
select.

I know this exists but have been unable to find.
Thanks,
Mica

 

[MC]

I have created the first part to get the form data:

function getFormData(oForm) {
var data = "";
var el, i = 0;
while (el = oForm.elements[i++]) {
if (el.type == 'checkbox') data += "[" + el.type + "|" + el.name +
"|" + el.value + "|" + el.checked + "]";
if (el.type == 'text') data += "[" + el.type + "|" + el.name +
"|" + el.value + "|" + "]";
if (el.type == 'radio') data += "[" + el.type + "|" + el.name +
"|" + el.value + "|" + el.checked + "]";
if (el.type == 'password') data += "[" + el.type + "|" + el.name +
"|" + el.value + "|" + "]";
if (el.type == 'hidden') data += "[" + el.type + "|" + el.name +
"|" + el.value + "|" + "]";
}
return data;
}

Now the second part, given a string of saved form data, to reload these
fields. Any ideas?

 

[dhtml]

Hi,

I am googling for a script and can't seem to find code to do this. I can
probably write code to save but reloading is an issue.

I want to, using ajax, send all form data back to a server and store. A
concise function to cycle through the fields and create a [element
name,value][element name,value] string would be great. I can give the user
the button to call this "Save Form Data" and store in on the server.

I want to give the user a button, and using ajax call to the server and get
the data. This I can do. Given a string of data, reload the fields in the
form. Cycling through the data, finding the matching element name, and
reload the value given the appropriate element type, text, checkbox, radio,
select.

There are several parts to this.

1) Gather successful form controls
2) build an encoded string from those controls
3) send result of (2) to server

The mistake is combining this into one function.

YUI makes the mistake in Connection Manager and I'm sure a lot of
people have copied this design.

The problems with the combined approach are (1) that a form can't be
serialized without sending it, and (2) it gives the Transport
mechanism, e.g. "Ajax" a burden it shouldn't have. This complication
makes testing the Ajax transport more difficult.

A good start would be to write a FormSerializer to gather successful
controls, as defined in HTML 4
Taking a look at it - http://www.w3.org/TR/html4/interact/forms.html#h-17.13.3
-

"Step one: Identify the successful controls
Step two: Build a form data set

A form data set is a sequence of control-name/current-value pairs
constructed from successful controls
Step three: Encode the form data set

The form data set is then encoded according to the content type
specified by the enctype attribute of the FORM element.
Step four: Submit the encoded form data set "
-

The problem is that HTML doesn't allow scripts access to the result.
HTML 5 has stumbled upon this problem.

I think this was discussed not too long ago on this group.

 

[MC]

I separated getting the form data and serializing it from the ajax send.
I have a server side mechanism built to store and retrieve the data.
I am currently working on a reload function. Its pretty close to done
although its taken about 12 hours.

I also would not use the YUI as it is much heavier code than I like.

MC

 

[dhtml]

I separated getting the form data and serializing it from the ajax send.
I have a server side mechanism built to store and retrieve the data.
I am currently working on a reload function. Its pretty close to done
although its taken about 12 hours.

That's not bad at all - 12 hours. These things are not as easy as they
might seem.

Do you have unit tests for it? If not, it would help when it comes
time to change things.

There might be cases like checkbox, select-multiple, or BUTTON
elements (IE has problems here), that require patches.

Unit tests make continual improvement easier. You can make a change
and get either a "green" or a "red".

I like YUI Test. I think it is easier to use than JSUnit. The author
is committed to it and fixed the bugs I filed pretty quickly.

 

[MC]

Ok,
Got it all working...now at 20 hours. Ran into an issue with the javascript
tho. The returned data to populate into the form looks like

"\n\n\n\n\n\n\nMyDataIsHere\n"

Any ideas? I had to delete the \n out to get it to parse correctly. Code is
below.
MC

var FormData = "";
function handleResponse() {
if(http.readyState == 4){
formData = http.responseText;
formData = formData.replace(/\r|\n|\r\n/g, "");
}
}

 

[dhtml]

Ok,
Got it all working...now at 20 hours. Ran into an issue with the javascript
tho. The returned data to populate into the form looks like

"\n\n\n\n\n\n\nMyDataIsHere\n"

Any ideas? I had to delete the \n out to get it to parse correctly. Code is
below.

The server is apparently sending some \r\n back in the response.

It appears that this function will not work quite right with a
TEXTAREA, which can contain newlines.

Check the data before it goes to the server and see if it has
newlines. You could write a roundtrip() function to verify garbageIn
== garbageOut. If it doesn't, the newlines are being added on the
server.

 

[MC]

The data hitting the server is correct.
The data coming out of the database is correct.
The data leaving the app server is correct.
I am using Apache 2.0.59 for testing. I have no idea inside or after it
leaves Apache.