[jQuery] Re: Form plugin ajax file upload works in Firefox but not IE
I am having difficulty tracking this down - there is no apparent error...just nothing happens. Nothing is sent to the server, so this is not a problem with display the response - there is no response because the form never submits. Does anyone know about problems with IE7 or IE8 using the form plugin? FYI - this system requires a login to get to it, so if someone wants to take a look I can give you access. I'm not aware of any outstanding issues with the Form Plugin. Send me a link.
[jQuery] Re: Form plugin ajax file upload works in Firefox but not IE
I was on v2.18 (still the latest rev listed on the jquery.com site). I downloaded v2.24 and the problem is gone. Thanks for the quick response though! John - Original Message - From: Mike Alsup mal...@gmail.com To: jQuery (English) jquery-en@googlegroups.com Sent: Saturday, March 14, 2009 7:18 PM Subject: [jQuery] Re: Form plugin ajax file upload works in Firefox but not IE I am having difficulty tracking this down - there is no apparent error...just nothing happens. Nothing is sent to the server, so this is not a problem with display the response - there is no response because the form never submits. Does anyone know about problems with IE7 or IE8 using the form plugin? FYI - this system requires a login to get to it, so if someone wants to take a look I can give you access. I'm not aware of any outstanding issues with the Form Plugin. Send me a link. No virus found in this incoming message. Checked by AVG - www.avg.com Version: 8.0.237 / Virus Database: 270.11.13/2001 - Release Date: 03/14/09 06:54:00 No virus found in this outgoing message. Checked by AVG - www.avg.com Version: 8.0.237 / Virus Database: 270.11.13/2001 - Release Date: 03/14/09 06:54:00
[jQuery] Re: Form plugin ajax file upload works in Firefox but not IE
I was on v2.18 (still the latest rev listed on the jquery.com site). I downloaded v2.24 and the problem is gone. Thanks for the quick response though! Glad to hear it. Thanks for letting me know.
[jQuery] Re: form plugin and file upload size
I seem to be capped at 7mb or so in file size. Nothing seems to really happen if I try and upload a file larger (smaller files work flawlessly) and ideas? The form plugin does not impose any file size limitations. However, your server might.
[jQuery] Re: Form Plugin with file upload
Thank you Mike for taking the time to trouble shoot this with me. I really appreciate it. Susie BogusRed Sahim http://www.PaperDemon.com On Thu, Feb 19, 2009 at 3:58 AM, Mike Alsup mal...@gmail.com wrote: Hooray! I'm so happy its fixed!!! Excellent, Susie. So glad to hear it!
[jQuery] Re: Form Plugin with file upload
Hooray! I'm so happy its fixed!!! Excellent, Susie. So glad to hear it!
[jQuery] Re: Form Plugin with file upload
Hi Mike, I took out the duplicate binding that was at the bottom of the page. but the file upload still doesn't work and no part of the submit goes through. Susie BogusRed Sahim http://www.PaperDemon.com On Mon, Feb 9, 2009 at 4:46 PM, Mike Alsup mal...@gmail.com wrote: Thank you again for working with me on this! I really appreciate it. Hopefully we'll get to the bottom of this. Susie BogusRed Sahimhttp://www.PaperDemon.com One thing to do right away is to get rid of the duplicate submit binding code. You test page has an inline script block which calls ajaxForm.
[jQuery] Re: Form Plugin with file upload
I FIXED IT I FIXED IT I FIXED IT I FIXED IT I FIXED IT
*jumps up and down for joy*
Ok there were two problems.
FIRST problem: In my beforeSubmit option I was actually getting rid of the
form before the plugin had a chance to create the iframe and submit it
properly:
beforeSubmit:function(formData, jqForm){
*$('#postcomment').html('div
class=loadingLoading.../div');*
return true;
},
Since my form is inside #postcomment, it was getting rid of the form. For
some reason, the form submits fine if its just plain text. Probably because
the submit action of text is quicker than a jquery.html() function.
SECOND problem: The second problem was that I needed to change my input
button from a type=submit to a type=button. This is because after I
removed the line mentioned in problem 1, the form actually goes through the
regular non-ajax submition phase.
Hooray! I'm so happy its fixed!!!
Susie BogusRed Sahim
http://www.PaperDemon.com
On Wed, Feb 18, 2009 at 7:51 PM, Susie Sahim bogus...@paperdemon.comwrote:
Hi Mike,
I took out the duplicate binding that was at the bottom of the page. but
the file upload still doesn't work and no part of the submit goes through.
Susie BogusRed Sahim
http://www.PaperDemon.com
On Mon, Feb 9, 2009 at 4:46 PM, Mike Alsup mal...@gmail.com wrote:
Thank you again for working with me on this! I really appreciate it.
Hopefully we'll get to the bottom of this.
Susie BogusRed Sahimhttp://www.PaperDemon.com
One thing to do right away is to get rid of the duplicate submit
binding code. You test page has an inline script block which calls
ajaxForm.
[jQuery] Re: Form Plugin with file upload
Thank you Mike for the quick response. I uploaded your latest version and am experiencing the same problem I had with v. 2.16 text only works just fine. using image attachment the form data does not get saved on the php end. the ajaxSubmit() makes it to the success call back even though it wasn't successful and my div ends up empty instead of containing the text sent back from my php script. Thank you again for working with me on this! I really appreciate it. Hopefully we'll get to the bottom of this. Susie BogusRed Sahim http://www.PaperDemon.com On Sun, Feb 8, 2009 at 7:12 PM, Mike Alsup mal...@gmail.com wrote: I just upgraded the plain page to the latest version of jquery and the form plugin. And I noticed that with the new version, it does not make it to the success callback and you'll see this when you submit the form it gets stuck on the loading... text This was likely a bug fix of some kind. But still my file uploads are not working in ajax. What should my next steps be? Susie BogusRed Sahimhttp://www.PaperDemon.com Hi Susie, Looks like I had a bug in that latest version of the plugin. Could you grab v2.21 and upload it to your test location? I can't do much debugging with the current one. http://www.malsup.com/jquery/form/jquery.form.js Thanks. Mike
[jQuery] Re: Form Plugin with file upload
Thank you again for working with me on this! I really appreciate it. Hopefully we'll get to the bottom of this. Susie BogusRed Sahimhttp://www.PaperDemon.com One thing to do right away is to get rid of the duplicate submit binding code. You test page has an inline script block which calls ajaxForm.
[jQuery] Re: Form Plugin with file upload
Mike, thank you so much for your patience with me on this one. I've created a simplified version of this page taking out all of the css and unnecessary javascript. all that is there is jquery, form plugin, and the few functions used for the page: http://www.paperdemon.com/tests/comments_plain.php I still get the same behavior. File upload works fine in non-AJAX. Plain text comments work fine in AJAX. As soon as you add the file upload, it has a cow and doesn't properly submit in the AJAX environment. I just upgraded the plain page to the latest version of jquery and the form plugin. And I noticed that with the new version, it does not make it to the success callback and you'll see this when you submit the form it gets stuck on the loading... text This was likely a bug fix of some kind. But still my file uploads are not working in ajax. What should my next steps be? Susie BogusRed Sahim http://www.PaperDemon.com On Mon, Feb 2, 2009 at 8:14 AM, phicarre gam...@bluewin.ch wrote: If I resume the situation : text fields file field $_POST $_FILES Remark -- filledfilled empty filled abnormal - filled empty filled normal filled- filled empty normal - - empty empty normal On 30 jan, 19:06, phicarre gam...@bluewin.ch wrote: Hi Mike, This thread seems to be similar to my problem submitted by email (subjet: about url) On 30 jan, 18:37, Mike Alsup mal...@gmail.com wrote: No, you are not supposed to do anything at all with the iframe. The plugin handles all of that for you. I'll try to take a look at your page tomorrow. Well, I have to admit that I'm not sure why your page isn't working. However, I did create a very simple test case here: http://jquery.malsup.com/form/file-test3.html This page has a file input and a text input and the form is submitted to http://jquery.malsup.com/form/test-xml.php which you can see returns the exact same response as your server (I think). Could you create a simple test case like this and run it on your server? Mike
[jQuery] Re: Form Plugin with file upload
I just upgraded the plain page to the latest version of jquery and the form plugin. And I noticed that with the new version, it does not make it to the success callback and you'll see this when you submit the form it gets stuck on the loading... text This was likely a bug fix of some kind. But still my file uploads are not working in ajax. What should my next steps be? Susie BogusRed Sahimhttp://www.PaperDemon.com Hi Susie, Looks like I had a bug in that latest version of the plugin. Could you grab v2.21 and upload it to your test location? I can't do much debugging with the current one. http://www.malsup.com/jquery/form/jquery.form.js Thanks. Mike
[jQuery] Re: Form Plugin with file upload
If I resume the situation : text fields file field $_POST $_FILES Remark -- filledfilled empty filled abnormal - filled empty filled normal filled- filled empty normal - - empty empty normal On 30 jan, 19:06, phicarre gam...@bluewin.ch wrote: Hi Mike, This thread seems to be similar to my problem submitted by email (subjet: about url) On 30 jan, 18:37, Mike Alsup mal...@gmail.com wrote: No, you are not supposed to do anything at all with the iframe. The plugin handles all of that for you. I'll try to take a look at your page tomorrow. Well, I have to admit that I'm not sure why your page isn't working. However, I did create a very simple test case here: http://jquery.malsup.com/form/file-test3.html This page has a file input and a text input and the form is submitted to http://jquery.malsup.com/form/test-xml.php which you can see returns the exact same response as your server (I think). Could you create a simple test case like this and run it on your server? Mike
[jQuery] Re: Form Plugin with file upload
No, you are not supposed to do anything at all with the iframe. The plugin handles all of that for you. I'll try to take a look at your page tomorrow. Well, I have to admit that I'm not sure why your page isn't working. However, I did create a very simple test case here: http://jquery.malsup.com/form/file-test3.html This page has a file input and a text input and the form is submitted to http://jquery.malsup.com/form/test-xml.php which you can see returns the exact same response as your server (I think). Could you create a simple test case like this and run it on your server? Mike
[jQuery] Re: Form Plugin with file upload
Hi Mike, This thread seems to be similar to my problem submitted by email (subjet: about url) On 30 jan, 18:37, Mike Alsup mal...@gmail.com wrote: No, you are not supposed to do anything at all with the iframe. The plugin handles all of that for you. I'll try to take a look at your page tomorrow. Well, I have to admit that I'm not sure why your page isn't working. However, I did create a very simple test case here: http://jquery.malsup.com/form/file-test3.html This page has a file input and a text input and the form is submitted to http://jquery.malsup.com/form/test-xml.php which you can see returns the exact same response as your server (I think). Could you create a simple test case like this and run it on your server? Mike
[jQuery] Re: Form Plugin with file upload
BB san wrote: hey, you are right, the key point should be iFrame. I guess your file has successful uploaded. The problem is your server responses to your iframe, not to your original page. that is why you don't see the POST action does not appear in Firebugs Net XHR panel that is also why your success callback function get no data. (data passed to iFrame) my English is bad, you can see the jquery form plug-in official side's description as below: 【The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML[1], but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup. 】 see http://malsup.com/jquery/form/#code-samples One more thing to say is, if your server response script code to iFrame, and the responsed script need some js lib (i.e. jquery), your will have to include all needed js file again, because iFrame includes no script lib at all by defaule. this issue bother me as well. :-( I am looking for solution for dealing this issue. BB Thanks for the response BB. But this is the exact part of the documentation that I don't understand. Am I supposed to place an iframe somewhere? How does jquery know which iframe in the page is the correct one? How do I tell it which php file to send the file to so I can process the file upload? This is what I don't understand. Am I supposed to put the entire form (including the text field) within an iframe? The documentation is clear with examples for everything except file uploads so I have no clue what I'm supposed to do :'( -- View this message in context: http://www.nabble.com/Form-Plugin-with-file-upload-tp21181087s27240p21740403.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Form Plugin with file upload
But this is the exact part of the documentation that I don't understand. Am I supposed to place an iframe somewhere? How does jquery know which iframe in the page is the correct one? How do I tell it which php file to send the file to so I can process the file upload? This is what I don't understand. Am I supposed to put the entire form (including the text field) within an iframe? The documentation is clear with examples for everything except file uploads so I have no clue what I'm supposed to do :'( No, you are not supposed to do anything at all with the iframe. The plugin handles all of that for you. I'll try to take a look at your page tomorrow. Mike
[jQuery] Re: Form Plugin with file upload
I've set up a page here: http://www.paperdemon.com/tests/commentsclass.php log in with the following info: login: t...@yahoo.com password: p455w0rd After Logging in, click on Post a Comment and type a message and select a jpg image to upload. Then hit submit. In Firefox, when a file is attached, the beforeSubmit AND success handler are called. However, the POST action does not appear in Firebugs Net XHR panel so it seems that the post is not sent. I figured out that the reason why my form is suddenly disappearing is because in my success callback it is trying to grab message from the responseXML but since the POST isn't really being sent, there is a blank response. What I meant by this is since the POST didn't really get sent, responseXML has nothing in it. When I do alert(message); it does not say 'null' (which i think js would do if a var was null, right?). instead its just blank. File uploads do not use ajax, so you will not see an entry in the xhr panel. Not sure what you mean by the 'blank response'. Is the responseXML null? Is the returned XML valid? Well, the form plugin says it supports file uploads. I'm not sure how its supposed to work. The documentation mentions something about an iframe but I don't completely understand what it is I have to do in my code to get the upload action to work. (click on file uploads tab) http://malsup.com/jquery/form/#code-samples Thank you very much for your help! -- View this message in context: http://www.nabble.com/Form-Plugin-with-file-upload-tp21181087s27240p21659989.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Form Plugin with file upload
Sorry for the delayed response. I tried taking a break from it and coming back to it with a fresh mind. It's not easy for me to set up a page for you to test because the app requires a log in. It is always helpful if you can simplify the problem down to a small test page. 90% of the time this is how people find the root of the problem. I realize it's not always easy to do this, but I encourage you to try if you get the time. In Firefox, when a file is attached, the beforeSubmit AND success handler are called. However, the POST action does not appear in Firebugs Net XHR panel so it seems that the post is not sent. I figured out that the reason why my form is suddenly disappearing is because in my success callback it is trying to grab message from the responseXML but since the POST isn't really being sent, there is a blank response. File uploads do not use ajax, so you will not see an entry in the xhr panel. Not sure what you mean by the 'blank response'. Is the responseXML null? Is the returned XML valid? In Internet Explorer 6 however, the beforeSubmit is called but it does not make it to the success handler. And since it doesn't make it that far, my form does not disappear. Instead it is stuck in Loading as noted in the comments of my JS below. The data is not saved. Any help you could give would be really helpful. I can't figure out why the POST is not successful. Perhaps there is something wrong in my JS? Nothing obvious in your JS jumps out at me. Mike
[jQuery] Re: Form Plugin with file upload
Hi Mike,
Sorry for the delayed response. I tried taking a break from it and
coming back to it with a fresh mind. It's not easy for me to set up a
page for you to test because the app requires a log in. But lets see
how far we can get without it.
I tried submitting the form in a non-ajax environment and the browser
POSTS the data correctly to my php file and the form data is saved
along with the uploaded file. So it doesn't appear to be a problem on
the PHP end of accepting and processing/saving data.
What happens in IE and FF differ.
In Firefox, when a file is attached, the beforeSubmit AND success
handler are called. However, the POST action does not appear in
Firebugs Net XHR panel so it seems that the post is not sent. I
figured out that the reason why my form is suddenly disappearing is
because in my success callback it is trying to grab message from the
responseXML but since the POST isn't really being sent, there is a
blank response.
In Internet Explorer 6 however, the beforeSubmit is called but it does
not make it to the success handler. And since it doesn't make it that
far, my form does not disappear. Instead it is stuck in Loading as
noted in the comments of my JS below. The data is not saved.
Any help you could give would be really helpful. I can't figure out
why the POST is not successful. Perhaps there is something wrong in my
JS?
Here's my JS
function submit_comment_form(divid,form){
target = '#'+divid;
xmlFile = http://www.paperdemon.com/comments/ajax_comments.php;;
form ='#'+form;
jquery_ajax_form_submit(xmlFile, target, form);
}
function jquery_ajax_form_submit(xmlFile, target, form){
loadingTarget = loading;
var options = {
target: target,
beforeSubmit: function(formData, jqForm){
alert('in jquery form (beforesubmit)');
$(target).html('div
class=loadingLoading.../div');//my
output gets stuck on this in IE
return true;
},
success:function(responseXML, statusText){
// IE does not make
it to this but FF does
alert('in jquery form (success callback)');
var message = $('message', responseXML).text();
$(target).html(message); // form goes
blank in FF because
responsexml is empty
},
dataType: 'xml',
url:xmlFile,
type: 'post',
resetForm: true
};
$(form).ajaxSubmit(options);
}
On Dec 29 2008, 4:37 pm, Mike Alsup mal...@gmail.com wrote:
I am working on an ajax app that uses jquery'sformpluginand it works just
fine until I add afileuploadinput into myform:
input type=hidden name=MAX_FILE_SIZE value=2097152 /
input name=viscritfile type=file maxlength=300 /
If I take these input fields out, myformworks fine and submits and saves
no problem. But once I added these parts to myformhtml, the jqueryform
pluginhiccups. I don't get any sort of error. Instead, myformjust
disappears without any data getting submitted. It's like jquery started the
submit process but didn't finish.
I read something about theformpluginusing an iframe for uploads but I'm
not sure I understand if I am supposed to do anything special to get the
submit to work. I'm sure I'm missing something here.
HTML:
div id=postcomment-75057div class=commentform
formid=commentform-75057 name=commentform-75057
enctype=multipart/form-data method=post
action=/comments/ajax_comments.php
textarea rows=6 cols=55 name=post/
!-- Myfileinput --
input type=hidden value=2097152 name=MAX_FILE_SIZE/
input type=file maxlength=300 name=viscritfile/
input type=hidden value=75057 name=r_parent/
input type=hidden value=post name=action/
input type=hidden value=art name=medium/
input type=hidden value=21148 name=mediumid/
input type=submit
onclick=javascript:submit_comment_form('postcomment-75057','commentform-75057')
value=Submit/
/form
/div
/div
-
jquery
function submit_comment_form(divid,form){
target = '#'+divid;
xmlFile = http://www.paperdemon.com/comments/ajax_comments.php;;
form='#'+form;
jquery_ajax_form_submit(xmlFile, target,form);
}
function jquery_ajax_form_submit(xmlFile, target,form){
loadingTarget = loading;
var options = {
target: target,
beforeSubmit: function(formData, jqForm){
$(target).html('div
class=loadingLoading.../div');
return true;
},
success: function(responseXML,
[jQuery] Re: Form Plugin with file upload
I am working on an ajax app that uses jquery's form plugin and it works just
fine until I add a file upload input into my form:
input type=hidden name=MAX_FILE_SIZE value=2097152 /
input name=viscritfile type=file maxlength=300 /
If I take these input fields out, my form works fine and submits and saves
no problem. But once I added these parts to my form html, the jquery form
plugin hiccups. I don't get any sort of error. Instead, my form just
disappears without any data getting submitted. It's like jquery started the
submit process but didn't finish.
I read something about the form plugin using an iframe for uploads but I'm
not sure I understand if I am supposed to do anything special to get the
submit to work. I'm sure I'm missing something here.
HTML:
div id=postcomment-75057div class=commentform
form id=commentform-75057 name=commentform-75057
enctype=multipart/form-data method=post
action=/comments/ajax_comments.php
textarea rows=6 cols=55 name=post/
!-- My file input --
input type=hidden value=2097152 name=MAX_FILE_SIZE/
input type=file maxlength=300 name=viscritfile/
input type=hidden value=75057 name=r_parent/
input type=hidden value=post name=action/
input type=hidden value=art name=medium/
input type=hidden value=21148 name=mediumid/
input type=submit
onclick=javascript:submit_comment_form('postcomment-75057','commentform-75057')
value=Submit/
/form
/div
/div
-
jquery
function submit_comment_form(divid,form){
target = '#'+divid;
xmlFile = http://www.paperdemon.com/comments/ajax_comments.php;;
form ='#'+form;
jquery_ajax_form_submit(xmlFile, target, form);
}
function jquery_ajax_form_submit(xmlFile, target, form){
loadingTarget = loading;
var options = {
target: target,
beforeSubmit: function(formData, jqForm){
$(target).html('div
class=loadingLoading.../div');
return true;
},
success: function(responseXML, statusText){
var message = $('message',
responseXML).text();
$(target).html(message);
},
dataType: 'xml',
url: xmlFile,
type: 'post',
resetForm: true
};
$(form).ajaxSubmit(options);
}
The form is not submitted or the success handler is not getting
invoked? Does this happen in all browsers? Can you create a small
sample page the demonstrates the problem?
