Awesome explanation Klaus and what you're saying makes total sense! You
should definitely speak with Yehuda about doing a writeup on this. This
is great info.
Rey...
> Rey, sure.
>
> To make forms accessible with and without Ajax, I start with building
> the form as if I were building a standard form with its traditional
> submit and refresh the page behavior. Think of JavaScript being disabled.
>
> This handling goes all into the else block of my example because there
> will be no "X-REQUESTED-WITH" header in the http request (I come to that
> later). You are simply sending back a complete page as response to the
> form submit.
>
> In the next step I so called "hijax" that form to enhance the user
> experience a little bit. This is also refered to as "Progressive
> Enhancement".
>
> That means:
>
> 1. I will pick up the form and switch off the default submit action by
> adding my own event handler.
>
> $('#hijax-me').submit({
> return false;
> });
>
> 2. Then add some logic to gather all the form values and transmit it via
> Ajax in the background, while you are pickinq up the form‘s action as well:
>
> $('#hijax-me').submit({
>
> // stupid IE returns an object for the forms action
> var url = this.attributes[action] &&
> this.attributes[action].nodeValue || this.getAttribute('action');
>
> // works fine with very simple forms, just as an example
> var data = $('input', this).serialize();
>
> $.ajax({
> type: 'POST',
> url: url,
> data: data,
> dataType: 'json',
> success: function(response) {
> // show message for example
> }
> });
>
> return false;
>
> });
>
> $.ajax calls the same page as if you were submitting the page in the
> traditional way. But because jQuery's $.ajax also adds a custom header
> to the request, of the form "X-Requested-With: XmlHttpRequest" (same as
> Prototype if I remember correctly) you know in your page how the page
> was requested and can handle the request according to that.
>
> This happens in the if block in my example. You can now decide to only
> send back a part of the page (like only the markuped confirmation
> message to replace the form, or maybe sendback JSON or XML to be further
> processed on client-side).
>
> As a result you still can have all your backend logic in one place and
> have a 100% accessible form with enhanced user experience if JavaScript
> is enabled. And in the end this means only a little more work to do, if
> at all.
>
> jQuery's form plugin makes it even easier to do that, I think there is
> an $.ajaxSubmit function, that does all the stuff for you...
>
> Hope that made it clearer...
>
>
> -- Klaus
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
