Developing AHAH Submit Functionality

This post is intended to pull together my thinking and some of the discussions that took place in Boston around how to get a solid framework in place for real next-generation javascript into core for Drupal 7. My specific interest is in taking the promise of Nedjo Rodgers ajaxsubmit.module (part of the jstools project) and overhaul it to work in harmony with the amazing new AHAH features in Drupal 6.

My objective is to release a solid contrib module for Druapl 6.0 which provides a good framework for developers interested in this functionality, and implements some useful default behavior that will give it some purpose and life "out of the box." Assuming I can make decent progress on this in the next six weeks, this is a good way to figure out what's needed, and define functionality and code which can be engineered into Drupal core for the 7.0 release.

The full post here contains my initial spec, thinking on how to accomplish all this, and first experiments with extending the existing ajaxsubmit module.

Overall Objective

The overall objective here is to create a module called ahahsubmit, which makes it nearly as easy to add AHAH/AJAX form submissions to your drupal site (or module) as the core AHAH drag'n'drop and #ahah FormAPI enhancements have implemented in core. Additionally, I would like to propose extensions to those existing features which make them more "hookable" for developers.

The basic theory is that forms which ahahsubmit will recieve a JSON array back with a few common elements, such as status, update data, etc, following the model of the core ahah functionality. They will ideally submit using the same form action, with the different return value prompted by there being a #ahahsubmit element in the $form (maybe do this w/request headers?).

Here's the core functionality I want to develop:

• Allow developers to add a #ahahsubmit to any $form array, and have useful default functionality kick in.
• Useful default options: hide the form on successful submission, update a specific div with returned data (follow ahah framework model)
• An AHAHsubmit API:
  • Allow developers to specify an additional drupal callback to add/alter data in the JSON array before it is returned to the browser
  • Allow developers to additionally specify alternate/custom javascript handlers for returned JSON array
  • All useful default functions implemented via API, providing examples for community to generate additional contributed behaviors

There are also some really interesting potentials along the same lines with regard to client-side form validation. For instance, I feel it's a no-brainer to actually check that all required fields have values before a form submit is attempted. There could also be an FormAPI/javascript architecture which allowed other field-types to specify more advanced validation (e.g. email address verification). This is cool stuff, but I'm feeling more like it's out of scope for what I want to attempt in the near term.

Initial Progress

Currently I have a hacked-up version of the old ajaxsubmit module which implements some of the functionality I want, but not very cleanly. What I am doing is the following:

• Using a $_SESSION variable to store the $form array for use by the JSON-returning ajaxsubmit_dispatch() function. That shouldn't really be necessary.
• Looking in $form['#ajaxsubmit_callback'] for a javascript function name and if present adding that as the value to "callback" in the returned JSON array.
• In ajaxsubmit.js, the Drupal.ajaxsubmit.prototype.oncomplete() function has been altered to look for this "callback" value, and if present invoke that function, passing the whole JSON array as well as the JS this object to whatever function was specified.
• In my example implementation, I have a JS function which accepts two vars, data and that, and which performs some custom action with the results of a form submit. I have successfully used these methods to give different form-submits different behaviors.

Obviously there's a lot of room for improvement. The use of a $_SESSION variable should really not be necessary, and I also think my current means of routing to the custom JS function to handle the returned JSON data is kludgy. I'm literally saying:

Next Steps

I'm going to continue working on this to build out the Drupal callback part, which should be as simple as looking for another specified element in the $form array, and letting it alter the array which will be returned as JSON. I would also like to improve my handling of callbacks on the JS side, but I'm still learning there and since I have something that works (if inelegantly) I'm inclined to not focus on that initially.

I will then begin working this towards 6.0 so that I can take advantage of the improvements to FormAPI and more closely follow the core AHAH examples. This should let me remove the use of a $_SESSION variable.

Finally, I will need to build out some useful default behaviors, following again on the core AHAH examples and adding the "hide submitting form" option.

Any suggestions or contributions are most welcome. I will also start a d.o project for this in the next week or so just in case I'm super-lucky any anyone wants to submit some code. :)