[ajaxform] Form submit stops working in IE7 after initial ajax file upload
jQuery 1.4.2
jQuery Form Plugin 2.43
Internet Explorer 7.0.6001.18000
I am working on a web application to handle ajax file uploads via ajax using the jquery ajaxform plugin.
The workflow:
1 - User Uploads Image via form
2 - If successful, the form for the next step is returned and replaces the initial form. (This works fine)
- If there is an error, the same initial form is returned with additional error messages.
The problem I am experiencing occurs when the initial form upload has an error and has to be redisplayed so the user can re-upload an image. In ff2 and chrome, this works fine but in IE7, the form is properly re-displayed but the form submit button no longer works. When clicked or submitted by pressing enter on a text field, the form does nothing. No ajax submit or the default submit.
My form markup looks like:
<form enctype="multipart/form-data" class="uploadCompanyLogo" id="uploadCompanyLogo" method="post" action="/uploadcompanylogo">
<label for="company_logo_file" tag="" class="required">Select a file</label>
<input name="MAX_FILE_SIZE" value="104857600" id="MAX_FILE_SIZE" type="hidden">
<input name="UPLOAD_IDENTIFIER" value="4bedc66305ed4" id="progress_key" type="hidden">
<input name="company_logo_file" id="company_logo_file" type="file"><input value="Click to Upload" type="submit">
<span id="uploadCompanyLogoFormAjaxLoading" style="display: none;">
<img src="/static/images/ajax-loader_00000_FFFFF.gif">
</span>
</form>
My two jquery snippets I have tried look like:
- function initUploadCompanyLogo() {
- $("#accordion").find("div:first").find("form").ajaxForm({
data: {format: "html"},
beforeSubmit: function(formData, jqForm, options) {
$("#uploadCompanyLogoFormAjaxLoading").show();
return true;
},
success: function(responseText) {
$("#accordion").find("div:first").html(responseText);
- initUploadCompanyLogo();
},
error: function(){
alert("error");
}
});
- }
and
- $(".uploadCompanyLogo").live("submit", function(){
$(this).ajaxSubmit({
data: {format: "html"},
beforeSubmit: function(formData, jqForm, options) {
$("#uploadCompanyLogoFormAjaxLoading").show();
return true;
},
success: function(responseText) {
$("#accordion").find("div:first").html(responseText);
},
error: function(){
alert("error");
}
});
return false;
});
Has anyone experienced this problem?