Opened 10 years ago
Closed 10 years ago
#8110 closed defect (invalid)
dojo.io.iframe.send in one form with a submit button
| Reported by: | Zebulon | Owned by: | anonymous |
|---|---|---|---|
| Priority: | high | Milestone: | tbd |
| Component: | General | Version: | 1.2.0 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description
- Imagine you want to upload a file via "browse" button.
When 'onchange' event is triggered, sendForm function is called and upload the file by triggering this action "/funala-web/ajax/imageUpload.action"
Upload successfully work, i got a response from my servlet in a textarea like this: <textarea> { "id" : "27620", "name" : "js3250.dll", "mimetype" : "application/octet-stream", "size" : "681 Ko" } </textarea>
So ok, the file is uploaded on the server. Now you want, by clicking on "submit" button target : "redirectToHome.action" This action aims at redirect the user away.
When i click on submit, the browser attempt to redirect the user away but fail. It seems that a Javascript error block the redirection. You can see a screenshot of the failure with httpfox : http://zaibe.ath.cx/dojo.jpg
Here is the code u can quickly reproduce the bug.
<script type="text/javascript" src="/funala-web/js/dojo-release-1.2.0/dojo/dojo.js"></script>
<form method="post" id="testAjaxId" enctype="multipart/form-data" action="redirectToHome.action" validate="false">
<input type="file" name="upload" id="upload_1" onchange="sendForm()"/> <input type="submit"/>
</form>
<script type="text/javascript">
function sendForm() {
dojo.require("dojo.io.iframe"); dojo.addOnLoad(function() {
dojo.io.iframe.send({
url: "/funala-web/ajax/imageUpload.action", method: "post", handleAs: "text", form: dojo.byId("testAjaxId"), handle: function(data){
console.debug("Uploaded")
}, error: function (error) {
alert ("Uknown error has occurred:\n" +error);
}
});
});
} </script>
If i use two forms, upload and redirection work like a charm. Here is the code with two forms.
<form id="uploadForm" method="post" enctype="multipart/form-data" > <input type="file" name="upload" id="upload_1" onchange="sendForm()"/> </form>
<form id="submitForm" method="post" action="redirectToHome.action" validate="false"> <input type="submit"/> </form>
<script type="text/javascript" src="/funala-web/js/dojo-release-1.2.0/dojo/dojo.js"></script>
<script type="text/javascript">
function sendForm() {
console.debug("sendFormTriggered");
dojo.require("dojo.io.iframe"); dojo.addOnLoad(function() {
dojo.io.iframe.send({
url: "/funala-web/ajax/imageUpload.action", method: "post", handleAs: "text", form: dojo.byId("uploadForm"), handle: function(data){
console.debug("Uploaded");
}, error: function (error) {
alert ("Uknown error has occurred:\n" +error);
}
});
});
} </script>
do you have any idea why its not working with one form ? is it really a bug ?
Florent Valdelievre
Attachments (5)
Change History (9)
Changed 10 years ago by
| Attachment: | upload.html added |
|---|
Changed 10 years ago by
| Attachment: | ajaxUpload.php added |
|---|
Changed 10 years ago by
| Attachment: | redirection.php added |
|---|
Changed 10 years ago by
| Attachment: | httpFox.JPG added |
|---|
comment:1 Changed 10 years ago by
comment:3 Changed 10 years ago by
wonfix I think.
The html provided isn't correct (without <html>, <head>, <body>...).
Why only one form? Dojo uses an hidden iframe as target to do asynchronous uploads, so you can use the same form but you have to change the form target (imho it's better to use two forms).
I'll attach a working example.
Nicola
Changed 10 years ago by
| Attachment: | fixed_upload.html added |
|---|
comment:4 Changed 10 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
Ok i investigated in order to have the straightforward example for testing. I bundled an example ( for slacker ;) here on a server ready to use : http://zaibe.ath.cx/dojoBug/upload.html This example is split into 3 parts.
upload.html; which is composed with a form including :
ajaxUpload.php; which is composed with an echo of a textarea composed of a JSON string like my examples above
redirection.php; which is composed of a server side redirection using 'header()' function to www.example.com
upload.html <html> <form method="post" id="testAjaxId" enctype="multipart/form-data" action="/dojoBug/redirection.php">
<input type="file" name="upload" id="upload_1" onchange="sendForm()"/>
</form>
function sendForm() {
}
</html>
ajaxUpload.php <html>
<?php
?> </html>
redirection.php <html> <?php
?> </html>