actionFunction is not getting called in Firefox

Question

I came across a strange issue. My actionFunction is not working in Firefox. But it is working smoothly in IE n Google Chrome.

VF code:

                 <apex:outputPanel layout="block" id="uploadblockid" styleClass="uploadfile_row">
                  <div class="choosefile_part"><apex:inputFile id="inputFileId" fileName="{!strAttachName}" title="Task Attachmnet"  value="{!taskAttachmentBlob}" /></div> 
                  <div class="uploadbtnfile_part">
                      <apex:actionRegion >
                        <apex:commandButton id="uploadfile" value="Upload" onclick="if (!checkSize()) {return false;} else{ disableButton(this);  } " styleClass="upload_btn">
                        <apex:actionFunction name="SubmitUploadOnClick" id="SubmitUploadOnClick" action="{!upload}" /> 
                        </apex:commandButton>
                      </apex:actionRegion>
                  </div>   
                </apex:outputPanel>

JS snippet:

    function checkSize()
    {
        var length = j$("[id$='inputFileId']")[0].files.length;
        alert('length:'+length);

        if(length==0){
            alert('Please select an attachment to upload.');    
            return false;       
        }
        else{
            var size = j$("[id$='inputFileId']")[0].files[0].size;
            if(size<10485760){

                alert('size:'+size);
                return true;
            }
            else{
                alert('Your attachment was not uploaded as attachment upto 10 MB is allowed.');
                //j$("[id$='inputFileId']").focus();
                return false;
            }

        }
    }

    function disableButton(ButtonObj)
    {
        //ButtonObj.style.display="none";
        alert('disabling button');
        ButtonObj.disabled="true";
        alert('callling controller...');
        SubmitUploadOnClick();
    }

Apex Controller snippet:

public void upload() {
        System.debug('in upload..!');
}

I am not getting, that debug statement in debug logs. Did anyone come across this issue?

Answer 1

Your apex:commandButton has no action, which means it's not doing anything different than a normal HTML button.

Try this instead of the apex:commandButton :

<input type="button" id="uploadfile" value="Upload" onclick="if (!checkSize()) {return false;} else{ disableButton(this);  } " styleClass="upload_btn">

Also, there's no need for the apex:actionFunction to be nested inside the button element.

Edit:

Actually, just return false from your apex:commandButton's onclick.

<apex:commandButton id="uploadfile" value="Upload" onclick="if (!checkSize()) {return false;} else{ disableButton(this); return false;  } " styleClass="upload_btn">

See Calling apex:actionFunction on apex:commandButton's onclick event for more info.

Answer 2

Change this line -

<apex:actionFunction name="SubmitUploadOnClick" id="SubmitUploadOnClick" action="{!upload}" />

to

<apex:actionFunction name="SubmitUploadOnClick" id="SubmitUploadOnClick" action="{!upload}" rerender="uploadblockid"/>

Let me know if it works. Thanks