Error handler not called when file is loaded via Ajax using jQuery form plugin
Here is my test case. If the form is submitted, 500 error responses are submitted. If not, the form is submitted.
If the file input tag is commented out, the error handler is called. If a file input tag is present, no error handler is invoked. I think it might have something to do with the fact that jQuery needs to use an iframe to handle loading and iframes don't seem to respond to an error handler .
Edit: If I add iframe: true
to the parameters passed to ajaxSubmit
to force the iframe, it also doesn't work with the file-load, so it definitely has to do with the iframe.
Edit2: I am using jQuery form plugin .
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
header('HTTP/1.1 500 Internal Server Error');
die;
} else {?>
<html><head>
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=2.9.2'></script>
<script type='text/javascript'
src='http://github.com/malsup/form/raw/master/jquery.form.js?v2.43'></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('a').click(function() {jQuery('form').ajaxSubmit({error: function(){alert('error handler called');}})});
});
</script>
</head><body>
<form method="POST">
<input type="text" name="mytext" />
<input type="file" name="myfile" /><!-- comment this element out -->
<input type="hidden" name="blah" value="blah" />
<a>submit</a>
</form>
</body></html>
<?php }
Is there a way to get the error handler to be called in both situations?
a source to share
As far as I can tell from looking at the code .ajaxSubmit
, no attempt is made to detect or handle errors in the event that you posted to <iframe>
. I suspect that because there is simply no way to find out about the error code that was returned from the server in the HTTP response targeting <iframe>
. It calls "successful" and "complete" plugins and tries to combine a fake xhr object using what it finds in the DOM <iframe>
.
a source to share
It seems to me that you are using the wrong Form Submission plugin ajaxSubmit()
. If the code ajaxSubmit
matches the code at http://be.twixt.us/jquery/formSubmission.php , parameters such as {error: ..,} will be ignored by ajaxSubmit()
.
ajaxSubmit()
use $ .post to create the ajax request, so you can define the callback error
at jQuery.ajaxSetup()
(see http://api.jquery.com/jQuery.ajaxSetup/ and http://api.jquery.com/jQuery.ajax/ )
UPDATED: how can I see from the source of the plugin you are using (see http://github.com/malsup/form/raw/master/jquery.form.js?v2.43 ) $ .ajax (options); will only be used in the next part of the if statement:
if (files.length && options.iframe !== false) || options.iframe || found || multipart) {
if (options.closeKeepAlive)
$.get(options.closeKeepAlive, fileUpload);
else
fileUpload();
} else
$.ajax(options);
so in all other cases you cannot use error
as a parameter ajaxSubmit()
. Thus, you can set jQuery.ajaxSetup () `as an error {closeKeepAlive: true}
parameter as I described earlier.ajaxSubmit() and don't forget to set before
callback by
a source to share
LTTP, but to get this to work without using the jquery.form forked module, set the parameter dataType
to 'json'
:
form.ajaxSubmit ({datatype: 'json', ...
then force the server to return a trivial success response (which is interpreted as valid JSON) instead of a bare response 200 OK
. Can be as simple as:
header ('HTTP / 1.1 200 OK');
echo (0);
This convinces the plugin to handle the 5XX error response.
a source to share