8

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>
2
  • 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, 2013 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, 2013 at 15:42

1 Answer 1

8

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');
});       
2
  • 1
    This is a good thought. Each browser has their own Javascript engine so anything could happen to the different browsers. Feb 17, 2013 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, 2013 at 17:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .