[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
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
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('Loading...');//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 wrote:
> > I am working on an ajax app that uses jquery'sformpluginand it works just
> > fine until I add afileuploadinput into myform:
> >
> >
>
> > 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:
> >
> > > enctype="multipart/form-data" method="post"
> > action="/comments/ajax_comments.php">
> >
>
> >
> >
> >
>
> >
> >
> >
> >
> > > onclick="javascript:submit_comment_form('postcomment-75057','commentform-75057')"
> > value="Submit"/>
> >
> >
> >
>
> > -
> > 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(' > class="loading">Loading...');
> > 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);
>
> > }
>
> Theformis not submitted or the success handler is not getting
> invok
[jQuery] 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:
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:
-
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('Loading...');
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);
}
--
View this message in context:
http://www.nabble.com/Form-Plugin-with-file-upload-tp21181087s27240p21181087.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
