Hi,
> How can I make this to DO NOT submit the form before ajax response
> will come?
There are a couple of ways you can do this.
1. Don't let them submit until the field is validated.
When the user changes the field, as soon as they leave it (or even as
soon as they change it) disable the submit button and fire off the
validation check; enable the submit button when the check comes back
showing it's okay, or show an error unobtrusively next to the field if
the value is a duplicate. You've probably seen password strength
indicators that worked in a similar way. That way, when the user
submits the form, the field has already been checked (not that race
conditions don't still apply, and you always validate user input on
the server anyway).
2. Do the submit via XHR rather than letting the browser do it.
A more significant change would be to not submit the form via the
usual browser mechanism at all. Instead, intercept the form submit,
cancel it, disable the submit button and show some "in progress"
indicator, gather together the form field values (perhaps using
Form#serialize[1]), and submit the form via an Ajax.Request where the
server returns a JSON-formatted response saying either "yes, all is
fine" or "no, there was a problem" and listing the fields with
problems. E.g., success might look like this:
{"success": true}
...where failure might look like this:
{"success": false, "fieldErrors": [
"myNiftyField": "There is already an entry with this value",
"myOtherField": "Please supply a value, this field can't be
blank"
]}
Your submission code handles the failure by highlighting the fields
and showing the errors next to them, that sort of thing.
One nice thing about this is that you can do most of your validation
code just once (on the server), rather than having to have it both on
the server (because you *always* have to validate user input on the
server) and on the client (for your users' convenience).
You'll want to submit the form to a different resource than the
location the browser would send it to, or add a parameter telling the
server that it's an XHR submission rather than a standard submission,
so the server can send back the appropriate response -- the JSON data
if submitted via XHR, or a page if submitted the old-fashioned way.
Unless you don't support browsers with JavaScript disabled.
One issue to be aware of is that Form#serialize has a couple of bugs
in it. Specifically, it doesn't preserve the order of the fields
(which forms are supposed to do) and it doesn't allow for multiple
fields with the same name. Those are being addressed in an upcoming
release, I think 1.6.1 (not 1.6.0.4).
The unofficial wiki[2] could use a really thoroughly-written, clear
example of form submission and error handling. I won't have time for
the next three weeks or so, but if no one else has done it by then,
I'll look at doing it...
[1] http://prototypejs.org/api/form/serialize
[2] http://proto-scripty.wikidot.com
Last but not least, the other thing that's happening latey -- which
I've seen both good and bad examples of -- is people moving away from
the concept of "submitting" forms entirely. Instead, when a user
edits a field, they validate and commit that edit (or say why they
can't) immediately when the user leaves the field (while the user is
doing something else on that page). That way, the user doesn't change
something and forget to save the change, and things are more
interactive. Still lots of places where you *don't* want to do that,
but something to keep in mind...
I'm sure there are a bunch of other options as well.
FWIW,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Mar 1, 9:35 am, Quleczka <qulec...@gazeta.pl> wrote:
> Hi,
>
> > It does mean that if you have code further down the list of things to
> > do which is reliant on the result of the request, then it will have to
> > wait as well.
>
> > So, that code would have to be part of the onSuccess too.
> > Hope this is understandable.
>
> I'm new to Ajax as well but I understand how this is working.Still I
> have problem with situation described in my post above - how to take
> care about this things "that have to wait as well" in this case? Can
> you help me with this?
>
> I have Event.observe to the form submit action with function which
> should check if the value typed in the on of input fields is already
> in the database or not. This function use Ajax.request to check this
> and have true/false response.
>
> How can I make this to DO NOT submit the form before ajax response
> will come? ... I have all necessary processing in onSuccess but there
> is no chance to execute it cause form is submitted earlier.
>
> What is standard way to deal with this kind of things?
>
> This is only example I have problem with. I understand basic rule of
> working with Ajax and it asynchronous nature :)
>
> Quleczka
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
