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.EventaddListenerforms'submit'this_onFormSubmitthis;
YAHOO>util.EventpreventDefaulte;
// Set the form
YAHOOutilConnectsetFormecurrentTarget;
// Configure the callback object
callBackObj =
success: o_loadRemoteFormSubmissionTemplateComplete
failure: o_loadRemoteFormSubmissionTemplateFailed
argument:
objType: objType
region: regionObj
mode: submitbuttonvalue
// Make the request
YAHOOutilConnectasyncRequest'POST'ecurrentTargetactioncallBackObj;
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 = documentgetElementById'alternateButtonId'
YAHOO.util.EventaddListeneralternateButton'click'this_onFormSubmitthis;
YAHOO.util.EventpreventDefaulte;
// Set the form
YAHOOutilConnectsetFormecurrentTarget;
// Configure the callback object
callBackObj =
success: o_loadRemoteFormSubmissionTemplateComplete
failure: o_loadRemoteFormSubmissionTemplateFailed
argument:
objType: objType
region: regionObj
mode: submitbuttonvalue
// Make the request
YAHOOutilConnectasyncRequest'POST'ecurrentTargetactioncallBackObj;
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!
2 Comments
thanks for charing this info, really kool !!!!!..
i just have a question, when the yui send the request for upload files, in the server side
i can’t use this:
//php code
ob_start();
require(VIEWS.’someFile.php’);
echo json_encode(ob_get_clean());
//in the client side just
var response = YAHOO.lang.JSON.parse(o.responseText);
this work good with the other’s request like $_GET or $_POST, but
when i try use that for uploading files, the javascript said:
illegal character with native eval(‘(‘+o.responseTex+’)')
and using yui said “SyntaxError”,
So i google the solution like for two day and nothing, so my solution
was returned one little json object like:
$response = array(‘type’=>’ERR_VALID’, ‘errors’=>$valid['errors']);
echo json_encode($response);
And in the client side write a lot off javascript.
If you know how parse the entire view in this kind off request,
i would be very grateful
thanks.
Hi Alejo,
I’m not too sure from the code you have provided what it is you are trying to do but I think I can possibly provide some insight?
When you submit multi-part data the form is not submitted as an XML-HTTP request but rather it is submitted to a hidden iFrame as a standard HTTP request. If you are attempting to change your view and response based the type of request it will not function as expected when submitting files. If you are then trying to parse your responseText as JSON this will likely lead to problems. Unless you have a specific requirement to return JSON I normally return a simple HTML response and use innerHTML to place it in the page to show errors and success message.
If you would like me to look further please post the code online and I will happily take a look for you.
Alistair