Dealing with JSON
2 views
Skip to first unread message
Ben Short
Oct 10, 2008, 4:09:53 AM10/10/08
to Prototype & script.aculo.us
Hi,
I have a simple page that submits a form via Ajax. If I leave both
fields blank i get the following response in JSON from the server.
{"errors":{"lastName":"Required","firstName":"Required"}}
I have coded the js to check for errors and then update the page based
on them.
What I would like to do is iterate over the errors returned rather
than have to hard code each error check. So i could use the lastName
and firstName from the JSON, then append '.error' and use the
firstName.error to lookup the span to then set the error message in.
Is this possible?
Below is my html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="/js/prototype-1.6.0.3.js"></
script>
<script type="text/javascript">
function submitTheForm() {
// rest the errors
$('firstName.error').innerHTML='';
$('lastName.error').innerHTML=''
$('example').request({
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
var errors = json.errors;
if ( errors.firstName != null ) {
$
('firstName.error').innerHTML=errors.firstName;
}
if ( errors.lastName != null ) {
$
('lastName.error').innerHTML=errors.lastName;
}
},
onComplete: function(){ alert('Form data
saved!')},
onFailure: function() { alert('Failed!')}
})
return false;
}
</script>
</head>
<body>
<form id="example" method="POST" action="/ws/simple" name="command">
<fieldset>
<legend>User info</legend>
<div><label for="firstname">First Name:</label>
<input type="text" name="firstName" id="firstName"
value=""/><span id="firstName.error" /></div>
<div><label for="lastname">Last Name:</label>
<input type="text" name="lastName" id="lastName" value="" /
><span id="lastName.error" /></div>
<div class="buttonrow" ><input type="submit"
value="serialize!" onclick="return submitTheForm()"/></div>
</fieldset>
</form>
</body>
</html>
I have a simple page that submits a form via Ajax. If I leave both
fields blank i get the following response in JSON from the server.
{"errors":{"lastName":"Required","firstName":"Required"}}
I have coded the js to check for errors and then update the page based
on them.
What I would like to do is iterate over the errors returned rather
than have to hard code each error check. So i could use the lastName
and firstName from the JSON, then append '.error' and use the
firstName.error to lookup the span to then set the error message in.
Is this possible?
Below is my html page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="/js/prototype-1.6.0.3.js"></
script>
<script type="text/javascript">
function submitTheForm() {
// rest the errors
$('firstName.error').innerHTML='';
$('lastName.error').innerHTML=''
$('example').request({
requestHeaders: {Accept: 'application/json'},
onSuccess: function(transport){
var json = transport.responseText.evalJSON();
var errors = json.errors;
if ( errors.firstName != null ) {
$
('firstName.error').innerHTML=errors.firstName;
}
if ( errors.lastName != null ) {
$
('lastName.error').innerHTML=errors.lastName;
}
},
onComplete: function(){ alert('Form data
saved!')},
onFailure: function() { alert('Failed!')}
})
return false;
}
</script>
</head>
<body>
<form id="example" method="POST" action="/ws/simple" name="command">
<fieldset>
<legend>User info</legend>
<div><label for="firstname">First Name:</label>
<input type="text" name="firstName" id="firstName"
value=""/><span id="firstName.error" /></div>
<div><label for="lastname">Last Name:</label>
<input type="text" name="lastName" id="lastName" value="" /
><span id="lastName.error" /></div>
<div class="buttonrow" ><input type="submit"
value="serialize!" onclick="return submitTheForm()"/></div>
</fieldset>
</form>
</body>
</html>
darrinholst
Oct 10, 2008, 8:37:53 AM10/10/08
to Prototype & script.aculo.us
How about something like
$H(errors).each(function(pair) {
$(pair.key + '.error').update(pair.value);
});
$H(errors).each(function(pair) {
$(pair.key + '.error').update(pair.value);
});
lfortin
Oct 10, 2008, 10:03:41 AM10/10/08
to Prototype & script.aculo.us
As to go in the same idea as darrinholst, you can also update a single
span, like this:
var errorString;
$H(errors).each(function(pair) {
errorString += pair.value;
errorString += '<br>';
});
$('mySpan').update(errorString);
T.J. Crowder
Oct 10, 2008, 11:23:53 AM10/10/08
to Prototype & script.aculo.us
@Darrin:
Assuming the OP's 'errors' object only contains entries for fields
with errors (and not for fields that were okay), we'll need to be sure
to clear their 'error' elements to blank just in case they've been set
before.
@Ben:
Just FWIW, I'd shy away from using a dot (.) in your element IDs, so
old people like me don't mistake things for CSS selectors involving a
class name at first glance. :-)
I'd probably change things so that the error spans don't use dots in
their IDs, and do use a class (like, say, 'flderr' for "field
error"). E.g.:
<input type="text" name="firstName" id="firstName" value=""/>
<span id="err_firstName" class="flderr" />
Then I'd use element.select() on the containing form element to find
the error spans, loop through them, and set the message on each either
to blank or to the error:
function displayErrors(errors)
{
$('example').select('.flderr').each(function(span) {
// This ID check is just me being paranoid
if (span.id.substring(0, 4) == 'err_') {
span.innerHTML = errors[span.id.substring(4)] || '';
}
});
}
(Edge case: If there are errors for which there are no error spans,
the above won't show them anywhere.)
Alternately, there's probably a clever way to do this without giving
the error spans IDs at all using Element.previous, but for me that
starts getting awfully finicky about the structure of the HTML. I'd
stick to using IDs for robustness and simplicity.
FWIW,
--
T.J. Crowder
tj / crowder software / com
Assuming the OP's 'errors' object only contains entries for fields
with errors (and not for fields that were okay), we'll need to be sure
to clear their 'error' elements to blank just in case they've been set
before.
@Ben:
Just FWIW, I'd shy away from using a dot (.) in your element IDs, so
old people like me don't mistake things for CSS selectors involving a
class name at first glance. :-)
I'd probably change things so that the error spans don't use dots in
their IDs, and do use a class (like, say, 'flderr' for "field
error"). E.g.:
<input type="text" name="firstName" id="firstName" value=""/>
Then I'd use element.select() on the containing form element to find
the error spans, loop through them, and set the message on each either
to blank or to the error:
function displayErrors(errors)
{
$('example').select('.flderr').each(function(span) {
// This ID check is just me being paranoid
if (span.id.substring(0, 4) == 'err_') {
span.innerHTML = errors[span.id.substring(4)] || '';
}
});
}
(Edge case: If there are errors for which there are no error spans,
the above won't show them anywhere.)
Alternately, there's probably a clever way to do this without giving
the error spans IDs at all using Element.previous, but for me that
starts getting awfully finicky about the structure of the HTML. I'd
stick to using IDs for robustness and simplicity.
FWIW,
--
T.J. Crowder
tj / crowder software / com
Reply all
Reply to author
Forward
0 new messages