on onclick 2 same function which is disable() not working in Primefaces

Question

I am new bee to primefaces. I have two commandbutton say submit and show history . I want to disable these button on click of submit . i am able to do that with help of onclick functionality but it not invoking actionListner. but only one disable button is working fine how to do that. please help me on that

{

<p:commandButton id="submitBtn"  value="Submit"  ajax="false" onclick="showHistory.disable(),submitBtn.disable();"  widgetVar="submitBtn" style="margin:10px;" />

}

<p:commandButton id="showHistory"  value="show History"  widgetVar="showHistory"   ajax="false" action="#{fileController.showHistory}"
                          style="margin:10px;" />

later i have tried with this code as well but then actionListner is not getting invoked

<p:commandButton id="submitBtn"  value="Submit" ajax="false" icon="ui-icon-check"  actionListener="#{fileUploadController.uploadFiles}"
                                 onclick="PF('showHistory').disable();PF('submitBtn1').disable();"  widgetVar="submitBtn1" 
                                   style="margin:10px;" />

Answer 1

Try this

PF('showHistory').disable()
PF('submitBtn').disable() 

instead of

showHistory.disable()
submitBtn.disable() 

Answer 2

Your button won't work because disabled components are not processed in the JSF request processing lifecycle. What is happening in your case is:

1. User clicks button
2. onclick event is triggered; button is disabled
3. JSF sees the button component is disabled in the view and ignores it
4. fileUploadController.uploadFiles is not fired

What would be ideal is a way to disable the button after the actionListener has been invoked, but I'm presuming what you're interested in is disabling the button immediately after the click, to prevent further form submissions.

Instead, I'll recommend the BlockUI. As an example

<p:commandButton id="submitBtn"  value="Submit" ajax="false" icon="ui-icon-check"  actionListener="#{fileUploadController.uploadFiles}" widgetVar="submitBtn1" style="margin:10px;" />

<p:blockUI block="submitBtn" trigger="submitBtn"/>

Answer 3

I have solved through jQuery.

<h:outputScript target="body">
        $("#form1\\:submitBtn").click(function(){
                $("#form1\\:submitBtn").hide();
                $("#form1\\:showHistory").hide();
                $("#form1\\:tradeDate_input").hide();
         });            
</h:outputScript>

As we know xhtml will create its own form id. it is append with user form id. and simple jQuery hide functionality. It will hide the both button i.e. 'Submit' and 'Show History' when click on Submit button.