Design Disclosure – Portfolio & Personal Blog of Alistair Stead

I’m sure the problems with multi-part data that I have been working through this morning is very simple but there are a number of forum posts about this, so I will share my findings. When using YUI Connection Manager in conjunction with multi-part form data I have experienced problems creating the asynchronous request and canceling the form submission. Even after setting up the request and callback object and checking the YUI API repeatedly the problem resides elsewhere.

YAHOO.util.Event.addListener(forms, 'submit', this._onFormSubmit, this);

_onFormSubmit: function(e, o)
{
  YAHOO>util.Event.preventDefault(e);
  // Set the form
  YAHOO.util.Connect.setForm(e.currentTarget);
  // Configure the callback object
  callBackObj = {
    success: o._loadRemoteFormSubmissionTemplateComplete,
    failure: o._loadRemoteFormSubmissionTemplateFailed,
    argument: {
      objType: objType, 
      region: regionObj,  
      mode: submitbutton.value}
  }
  // Make the request
  YAHOO.util.Connect.asyncRequest('POST', e.currentTarget.action, callBackObj);
}

With non multi-part forms you can hijack the submit event of the form and create an asynchronous request. However once you try with multi-part data no matter how you set this up and attempt to cancel the form submit action the form will still make an HTTP request in the main window.

The YUI Multi-Part Data Solution

The solution is very simple once you find it but it is easy to overlook! In order to use YUI connect to create an asynchronous request you must remove the ‘submit’ button and replace it with a ‘button’ then assign it an eventListener that will create the asyncRequest.

var alternateButton = document.getElementById('alternateButtonId')
YAHOO.util.Event.addListener(alternateButton, 'click', this._onFormSubmit, this);

_onFormSubmit: function(e, o)
{
  YAHOO.util.Event.preventDefault(e);
  // Set the form
  YAHOO.util.Connect.setForm(e.currentTarget);
  // Configure the callback object
  callBackObj = {
    success: o._loadRemoteFormSubmissionTemplateComplete,
    failure: o._loadRemoteFormSubmissionTemplateFailed,
    argument: {
      objType: objType, 
      region: regionObj,  
      mode: submitbutton.value}
  }
  // Make the request
  YAHOO.util.Connect.asyncRequest('POST', e.currentTarget.action, callBackObj);
}

When trying to use multi-part data YUI Connection Manager will create an iframe in the document that your form will submit the data to. If you try and use the submit handler YUI currently does not change the target value of the submit event.

The YUI examples do all show the use of alternate buttons rather than a standard submit button however it can be easily overlooked. I hope this helps someone!

I'm sure the problems with multi-part data that I have been working through this morning is very simple but there are a number of forum posts about this, so I will share my findings. When using YUI Connection Manager in conjunction with multi-part form data I have experienced problems creating the asynchronous request and ...

The sfPokaYokePlugin (pronounced with the ‘e’ on the end e.g. poka-yoki). Simply put it is the use of simple mechanisms that stop mistakes being made. sfPokaYoke provides client-side form validation based on existing action.yml validation files. This validator will provide fully configurable inline errors on blur events and listed errors once the form is submitted.

This plugin was built after reading “Designing the Obvious” by Robert Hoekman, jr. and working with a number of unsatisfactory validation libraries. It is intended that this plugin will allow you to configure the validation and feedback to make your forms poka yoke devices i.e. impossible for users to make any errors while entering data.

Thanks to Alon Noy for a starting point for the validators! The following symfony validators have been ported to JavaScript implemented in the plugin:

• sfStringValidator
• sfNumberValidator
• sfRegexValidator
• sfEmailValidator
• sfCompareValidator

I also plan to implement a client side callback validator that will allow you to call your own client side validators or even call ajax function to run server side validation in real time. Read More…

The sfPokaYokePlugin (pronounced with the 'e' on the end e.g. poka-yoki). Simply put it is the use of simple mechanisms that stop mistakes being made. sfPokaYoke provides client-side form validation based on existing action.yml validation files. This validator will provide fully configurable inline errors on blur events and listed errors ...