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="loading">Loading...</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-75057"><div 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="loading">Loading...</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);
>
> > }
>
> Theformis 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?
