jquery ajax form plugin submit multiple times to the server only when using IE6

Question

I all. I have the following form used to temporarily upload a photo on a j2ee server and then crop it with imageAreaSelect plugin :

<form name="formAvatarName" id="formAvatar" method="post" 
action="../admin/admin-avatar-upload" 
enctype="multipart/form-data">
<label>Upload a Picture of Yourself</label>
<input type="file" name="upload" id="upload" size="20" />
<input type="button" id="formAvatarSubmit" value="formAvatar" onclick="invia()"/> 
</form>

I am using jquery form plugin to do ajax submission, this is my last :) attempt :

var options = { 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse,  // post-submit callback 
    dataType:  'text/html' 
}; 

   $('#formAvatar').unbind('submit').bind('submit', function() {
     alert('aho');
        $(this).ajaxSubmit(options);
        return false;
   }); 

Here below the javascript functions used as submit event handlers:

    function showRequest(formData, jqForm, options) { 
        var queryString = $.param(formData); 
        log.debug('About to submit: \n\n' + queryString); 
        return true; 
    } 

    function showResponse(responseText, statusText, xhr, $form)  { 
        myRes=responseText; 
        log.debug('status: ' + statusText + '\n\nresponseText: \n' + responseText); 


        //box uploaded
        $('div#avatar-upl > img').replaceWith(myRes);
        var origWidth = $('div#avatar-upl > img').width();
        var origHeight = $('div#avatar-upl > img').height();
        log.debug('AjaxUpload onComplete(): orig size w,h : ' + origWidth + ', ' + origHeight);

        //scaling uploaded
        $('div#avatar-upl > img').jScale(
                {ls:'300px'}, 
        function(){
                var scaleWidth = $(this).width();
                var scaleHeight = $(this).height();
                log.debug('AjaxUpload onComplete(): scaled size w,h : ' + scaleWidth + ', ' + scaleHeight);
                //put scaled sizes on img custom attribute, to be retrieved from preview() method
            $('div#avatar-upl > img').attr('scaleWidth', scaleWidth);
                $('div#avatar-upl > img').attr('scaleHeight', scaleHeight);
            }
        );

        //box thumbnail
        $('div#avatar-thumb > img').replaceWith(myRes);
        $('div#avatar-thumb > img').css({
        width: 100,
        height: 100
    });

    //setup of imgAreaSelect
    $('div#avatar-upl > img').imgAreaSelect({ 
        handles: true, 
        onSelectEnd: avatarPreview
    }); 
} 

This is the html :

<div id="avatar-mng">
    <div id="avatar-upl">
        <img id="img-upl" style="margin: 0 0.3em;" src="../res/img/spacer.gif" />
    </div>  

    <div id="avatar-thumb" style="width: 100px; height: 100px; overflow: hidden; float:right;">
        <img id="img-thumb" src="../res/img/spacer.gif" style="width: 100px; height: 100px;" />
    </div>
    <form name="formAvatarName" id="formAvatar" method="post" action="../admin/admin-avatar-upload" enctype="multipart/form-data">
        <label>Upload a Picture of Yourself</label>
        <input type="file" name="upload" id="upload" size="20" />
        <input type="button" id="formAvatarSubmit" value="formAvatar" onclick="invia()"/> 
    </form>
</div>

Only when tested with IE6 I can see that the sumbission to the server is done multiple times (first time I got the uploaded file, the other times the sumbmission seems empty and I got error). With IE7, IE8, FFOX, CHROME is working fine.

Any Ideas? Many thank in advance!

Answer 1

It seems very likely that you're not getting as far as return false -- thus IE goes ahead and submits the form in the "natural" way, as well as by ajaxSubmit(). Your options specify a success callback. What does showResponse() look like? Perhaps something in showResponse() is tripping up IE so that it fails to run return false. I'd start by trying your code without the success callback, and going from there.