6

Here i have one Visualforce page and my situation is when i am clicking on Save Button both PageBlock will appearing but i want is : when i am click on Save the existing Pageblock should be hide and another Pageblock should be show..

is it possible ?

Can anyone tell me how i can do this ?

<apex:pageBlock >
        <apex:pageBlockButtons location="Bottom">
            <apex:commandButton value="Save" action="{!quicksave}" />
        </apex:pageBlockButtons>
               .
               .
    </apex:pageBlock>
    </apex:outputPanel>

    <apex:outputPanel>
    <apex:pageBlock >
        .
        .
    </apex:pageBlock>
    </apex:outputPanel>

Thanks

2
  • 3
    u can use reRender and rendered attributes on the button and page block to toggle the display – Vamsi Krishna Gosu Mar 31 '16 at 1:47
  • Vamsi, you are correct but i how can i put condition for standard action button if it's clicked ?? – Nihar Mar 31 '16 at 16:20
1
<apex:pageBlock rendered="{!NOT(isSaved)}">
    <apex:pageBlockButtons location="Bottom">
        <apex:commandButton rerender="pageblock-one" value="Save" action="{!quicksave}" />
    </apex:pageBlockButtons>
</apex:pageBlock>
.
.
.
<apex:pageBlock id="pageblock-one" rendered="{!isSaved}">
 ...
</apex:pageBlock>

Within your controller:

public PageReference quicksave() {
    // do some save stuff
    isSaved = true;
}
4
  • Willard, i am using standard controller in my vf page and that action (quicksave) is standard action.. – Nihar Mar 31 '16 at 6:06
  • i don't want to use custom controller – Nihar Mar 31 '16 at 6:11
  • Why don't you want to use a custom controller? It should be fairly lightweight and simple. I'm not sure you can do it cleanly without it. I guess one thing you can try is on the quicksave, have a trigger that updates a field on the record and then use that in the rerender? – willard Mar 31 '16 at 13:48
  • Yes Willard you are right but in that case if i put DML in that Quicksave (Custome controller method) then it's not updating my record but it will create another record for the same...that's the reason only – Nihar Mar 31 '16 at 16:19
0

The standard controller has no facility for custom UI control. If you don't want to use a controller extension your best bet is to use javascript. Create a javascript function to set the display css property of your <apex:pageBlock /> to none. Call this function in the onclick event of your <apex:commandButton />.

Note that if the page is re-drawn by Visualforce your update will be undone so you may need to track the display state and re-apply it when your page is re-drawn.

0

There are three ways in doing this, Either go with extension with standard controller and get the boolean properties or use javascript or jquery to toggle your pageblock, please find the below two solutions, however i am not doing the controller part i believe you can do it.

1.Using JavaScript, all you can do here is to alert the styleclass with functions.

<apex:page standardController="Account" id="page">
 <apex:form id="form">
  </script>
   <style type="text/css">
   .displayblock {
    display: block;
    }
    .displaynone {
     display: none;
   }
   </style>
  <script>
   function myHide(){
    var myButtonClasses = document.getElementById("page:form:op").className;
    console.log('***'+myButtonClasses);
    if(myButtonClasses=='displayblock')
     document.getElementById("page:form:op").className = 'displaynone';
    else
     document.getElementById("page:form:op").className = 'displayblock';
   }

 <apex:outputPanel id="op" styleClass="displaynone">
  <apex:pageBlock id="pb" >
   <apex:pageBlockSection id="pbs">
     Hi I am Block
   </apex:pageBlockSection>
  </apex:pageBlock>
 </apex:outputPanel>
 <apex:commandButton value="Save" reRender="null" onclick="myHide();"/>

 </apex:form>
</apex:page>

The other Quickest solution is to use Jquery you can Either use CDN or JQuery Library uploaded in the Static Resource.

<apex:page standardController="Account" id="page">
 <apex:form id="form">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
    function toggleDiv() {
        $("[id$=op]").toggle();
   }
 </script>
 <apex:outputPanel id="op" >
  <apex:pageBlock id="pb" >
   <apex:pageBlockSection id="pbs">
     Hi I am Block
   </apex:pageBlockSection>
  </apex:pageBlock>
 </apex:outputPanel>
 <apex:commandButton value="Save" reRender="null" id="cb" onclick="toggleDiv();"/>
</apex:form>
</apex:page>

Please let me know if this helps for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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