Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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>
share|improve this question
1  
Any reason you're using jQuery to call an ActionFunction when clicking a CommandButton? This is seems quite complicated. Let me know what your goal is, perhaps we can simplify your code. –  Wes Nolte Feb 17 '13 at 21:39
    
As a general practice, you might consider targeting your rerender="" to at least some valid Id, unless you specifically want a full page refresh on click. And as Wes suggested, this seems like a complicated route if all you're doing is invoking Apex from a command button. If the code being invoked is JavaScript, then I'd consider using a standard HTML button instead of having JQuery issue a preventDefault to stop Visualforce from doing what it does naturally. –  Adam Feb 18 '13 at 15:42

1 Answer 1

up vote 7 down vote accepted

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');
});       
share|improve this answer
1  
This is a good thought. Each browser has their own Javascript engine so anything could happen to the different browsers. –  Jesse Altman Feb 17 '13 at 2:19
    
The reason this is occurring is exactly what @Peter notes, the actionFunction script is being called by the click which posts the form and then that JS function returns control to the button which then fires its default action, which is also posting the form. Your command button's onclick attribute (sans jQuery and the button disabling script) could be implemented like this onclick="afsave(); return false;" in order to prevent the button from executing its normal behavior and posting the form a second time after the afsave() function returns. –  Mark Pond Feb 19 '13 at 17:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.