[SalesForce] jQuery in Visualforce does not work in Firefox

For some reason jQuery that calls into a save actionFuction does not work in Firefox (but works in Chrome/IE). All it does is refresh and reload the same VF page, instead of creating a new oppty. Anyone know why this is happening only for firefox?

<apex:page standardController="Opportunity" extensions="OpportunityRenewalControllerExtension" title="Create Renewal Opportunity">
    <apex:sectionHeader title="{!IF(OR(isAddOn, currencyUpdate), 'Update', 'Create')} Renewal Opportunity"  subtitle="{!Opportunity.Name}" id="header"/>
    <apex:pageMessages escape="false" id="msgs"/>
    <apex:form id="form">
        <apex:pageBlock mode="edit" rendered="{!passesCheck}" id="mainBlock">
            <apex:actionFunction name="afsave" action="{!save}"/>

            <apex:pageBlockButtons >
                <apex:actionStatus id="saving">
                    <apex:facet name="start" ><apex:image url="{!$Resource.loading}" /></apex:facet>
                    <apex:facet name="stop" >
                        <apex:commandButton id="sbutton" status="saving" disabled="{!stopSave}" 
                                            value="{!IF(OR(isAddOn, currencyUpdate), 'Update', 'Create')} Renewal" />
                    </apex:facet>
                </apex:actionStatus>
                <apex:commandButton value="Cancel" action="{!cancel}" />
            </apex:pageBlockButtons> 
            <apex:pageBlockSection columns="1">

                //DOES STUFF

            </apex:pageBlockSection>
        </apex:pageBlock>
        <span style='color:white;'> **** {!strDebugInfo} </span>
    </apex:form>
    <apex:includeScript value="{!URLFOR($Resource.Ticker, 'jquery-1.7.2.min.js')}"/>
    <script type="text/javascript">
        $j = jQuery.noConflict();
        $j(document).ready(function() {       
            $j('input[id$="sbutton"]').click(function() {
                afsave();
                $j('input[id$="sbutton"]').toggleClass('btnDisabled', true).attr('disabled', 'disabled');
            });
        });
    </script>
</apex:page>

Best Answer

Try adding in the event parameter and a call to preventDefault() to your event handler. There might be something going on with the clicking of the command button triggering the form submit while at the same time the action function JS function is also submitting that Firefox is handling differently. I don't think your intention is to have the command button perform its default action of submitting the form anyway. Adding the preventDefault code on the event will prevent it from doing so.

Change:

$j('input[id$="sbutton"]').click(function() {
    afsave();
    $j('input[id$="sbutton"]').toggleClass('btnDisabled', true).attr('disabled', 'disabled');
});

To have the function take an event parameter and then call preventDefault on it.

// add parameter for the event, e.
$j('input[id$="sbutton"]').click(function(e) {
    e.preventDefault(); // add this line
    afsave();
    $j('input[id$="sbutton"]').toggleClass('btnDisabled', true).attr('disabled', 'disabled');
});
Related Topic