For the purposes of form submission, for instance when needing to upload files, there is a new transport in the framework that handles this in a pseudo asynchronous manner. The transport creates an IFrame to handle the submission and response of the request, then a callback is used to pass the response back to the application.
The IFrame technique is based on using the
target attribute of a
form HTML element in order to submit it into a hidden IFrame and therefore avoid the reload of the main page. The system can then simply check the
onreadystatechange of the IFrame to know when the reply has been received and can optionally access the content of the IFrame (if on the same domain only).
Create an IFrame and insert into the page (shrink the IFrame to make it invisible to the user):''
Update the target attribute of the form to contain a reference to the IFrame:''
Submit the form to the IFrame via the target attribute:''
IFrame will contain the response of the file upload:''
Copy response content from the hidden IFrame to process the result:''
Remove the IFrame, and reset the target attribute of the form:''
A method is available to use the new IFrame transport,
The user will need to use these parameters:
- Either a
formId, id of the HTML form, or
form, the HTML form object containing the inputs to be used in the form submission.
url: the URL to post the form to. This parameter is optional and can be specified in the action attribute of the form. However, if this parameter is used, it will then override any action attribute defined within the form.
method: the method to use for the request. This parameter is optional and can be specified in the method attribute of the form. However, if this parameter is used, it will then override any action attribute defined within the form.
callback: the callback to be used when a response has been returned.
Here's an example of form submission:
In this example only the
formId and the
callback are needed. The IFrame transport then extracts the form using the ID and completes the request calling the specific callback after the response has been received:
In this example the file input is invisible to the user, instead there is a link which when clicked will trigger the file input click method to open the system dialog.
When the click event is triggered on the link the following handler is called:
The hidden file input has an ID of "simulateAsyncFileUpload", therefore its click event is triggered which opens the system dialog.
When a user opens a system dialog from the file input, they can browse directories select a file and click on open. The system dialog then disappears and the file input contains the path and filename of the file to be uploaded. To trigger a script when the user selects a file in the system dialog, you need to add a listener to the change event of the file input.
After the user has selected a file and clicked open the
fileChosen method will be executed.