Chaining on Forms?

[Eric]

As I didn't notice the ability to do something like:

$('form').on('submit',
Ojay.stopEvent).GET(it().getAttribute('action'), { one: 'more-
variable'}, { onSuccess: function() {} });
// OR
Ojay.HTTP.GET('/new-location.php', $('form'), { onSuccess: function()
{} });

IMO, the 2nd makes more sense, as you're really simply stating that
you want to use a particular form for the data.

I saw how YUI can package up form data when instantiating connections
(http://developer.yahoo.com/yui/connection/#forms), so would it be
okay for me to make some modifications and submit a patch/feature?

[James Coglan]

The way I tend to do this is to use the Forms package like so:

$('#theForm').on('submit', function(form, evnt) {

    evnt.stopDefault();

    $.HTTP.GET('/new-location.php', $.Forms.getData(form), {

        onSuccess: function(response) {

            // ...

        }

    });

});

Or, for some situations:

$('#theForm').on('submit', function(form, evnt) {

    evnt.stopDefault();

    $.HTTP.GET('/new-location.php', $.Forms.getData(form))

        .insertInto('#someDiv');

});

You need to use a callback for these situations as the form must be serialized when it is submitted, rather than when you set up the event handler. I've tried to keep form serialization separate from HTTP stuff as it bothers me how they're tied together so tightly in YUI. For more information see:

http://ojay.othermedia.org/articles/forms.html

If you've got an elegant way of doing this with chains rather than a callback function then by all means share it!

James

[James Coglan]

$('form').on('submit',
Ojay.stopEvent).GET(it().getAttribute('action'), { one: 'more-
variable'}, { onSuccess: function() {} });

Just realised I missed this one out of my examples:

$('form').on('submit', function(form, evnt) {

    evnt.stopDefault();

    var data = $.Forms.getData(form);

    data.one = 'more-variable';

    $.HTTP.GET(form.node.action, data, { /* ... */ });

});

Or you could do it a slightly more abstract way, without dealing with events or the DOM directly:

$.Forms(function() { with(this) {

    form('myForm').submitsUsingAjax();

    when('myForm').responseArrives(displayResponseIn('#myDiv'));

    before('myForm').isValidated(function(data) {

        data.one = 'more-variable';

    });

}});

Hope that helps!

[Eric]

This helps out a lot! I glanced over the Forms article earlier, but
somehow missed the utility methods. It's kinda funny...with YUI,
there's about 40 cheat sheets needed to get the job done, but you can
practically sum up Ojay on 1 sheet.

Its amazing to see how quickly I can put in rich interactions with
Ojay, actually faster than I could put things in with Mootools. The
difference being, the chained methods don't care if there's 1 element
or an array of elements, it just works. :)

Thanks for the help and support!