3

While testing a page I was working on, I noticed something strange- the apex:actionStatus I had set up to prevent users from clicking save more than once was only working with the button that the user clicked, but not the other button on the page.

This second button is generated by Salesforce by the attribute location="both" in my apex:pageBlockButtons tag.

My assumption is that since my actionStatus is contained inside the apex:pageBlockButtons tag, that the status would be duplicated by the process which creates the second button, allowing both of the buttons to be affected by the same ajax process. The gif below shows that this is not the case.

Two Save Buttons, only one of which displays "working" when clicked, when both should be displayed the same way

What changes could I make to my markup to share this single actionStatus across two buttons?


Example page which replicates this behavior:

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Account Edit" mode="edit" id="accountPanel">
                <apex:pageMessages />
                <apex:pageBlockButtons location="both">
                    <apex:actionStatus id="asyncStatus">
                        <apex:facet name="stop">
                            <apex:outputPanel id="stop_panel">
                                <apex:commandButton action="{!Save}" value="Save" rerender="accountPanel" status="asyncStatus" />
                            </apex:outputPanel>
                        </apex:facet>
                        <apex:facet name="start">
                            <apex:outputPanel id="start_panel">
                                <apex:commandButton value="Working..." disabled="true" />
                            </apex:outputPanel>
                        </apex:facet>
                    </apex:actionStatus>
                </apex:pageblockbuttons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

By changing the generated status value of the event json generated by Salesforce, from 'status':'j_id0:j_id1:accountPanel:j_id28:bottom:asyncStatus' to 'status':'j_id0:j_id1:accountPanel:j_id28:asyncStatus', I am able to get the top and bottoms panels in sync, but only when clicking the bottom button, and these changes are removed once the page rerenders. It looks like I'll need to modify a lot more of the generated mark-up to get this to work, but I'm still looking for anyone who might have noticed this before.

<input class="btn" id="j_id0:j_id1:accountPanel:j_id28:j_id29" name="j_id0:j_id1:accountPanel:j_id28:j_id29" onclick="A4J.AJAX.Submit('j_id0:j_id1',event,{'similarityGroupingId':'j_id0:j_id1:accountPanel:j_id28:j_id29','parameters':{'j_id0:j_id1:accountPanel:j_id28:j_id29':'j_id0:j_id1:accountPanel:j_id28:j_id29'} ,'status':'j_id0:j_id1:accountPanel:j_id28:bottom:asyncStatus'} );return false;" value="Save" type="button">
1
  • An easy work around to this is to have a js "onclick" function that disables all buttons. When re-rendered, those buttons are enabled. Jun 23, 2020 at 21:59

1 Answer 1

0

Add pageblock buttons like

<apex:PageBlockButtons location="top/bottom/both">

You must log in to answer this question.

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