2

I have 2 output panel. In the first I have a button when I click on the button the 1st outputpanel should get hide and 2nd one get display. I have my code I am rendering the output panel but it is not working. I am also calling method on my button click which is not required. Is there any way to avoid calling the method from the button for rendering the outputpanel. My VF page :

      <apex:outputPanel>
      <apex:selectList value="{!selectedBaseObject}" size="1">
          <apex:selectOptions value="{!basobjectDisplay}"></apex:selectOptions>
      </apex:selectList>
      <apex:commandButton reRender="relatedObjectForm" value="Next >> "/>
      </apex:outputPanel>

      <apex:outputPanel id="relatedObjectForm" rendered="{!if(selectedBaseObject != '--Select--' && selectedBaseObject != null, true, false)}">
          <apex:outputText value="shfef"></apex:outputText>
      </apex:outputPanel>

If any one have any better idea to do this task please guide me.

Update : Have change the button to html button and using javascript to hide

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript">
    $(function(){
        document.getElementById('relatedObjectForm').style.display = 'none';
    });
    function hidebaseObject(){
        document.getElementById('baseObjectForm').style.display = 'none';
        document.getElementById('relatedObjectForm').style.display = 'inline';
     }
    </script>

     <apex:form >
     <div id="baseObjectForm">
          <apex:selectList value="{!selectedBaseObject}" size="1">
              <apex:selectOptions value="{!basobjectDisplay}"></apex:selectOptions>
          </apex:selectList>
          <!--<apex:commandButton reRender="relatedObjectForm" value="Next >> "/>-->
          <input type="submit" value="Next >>" onclick="hidebaseObject();" />
      </div>

      <!--<apex:outputPanel id="relatedObjectForm" rendered="{!if(selectedBaseObject != '--Select--' && selectedBaseObject != null, true, false)}">
       --> 
       <div id="relatedObjectForm">
          <apex:outputText value="shfef"></apex:outputText>
       </div>
     <!-- </apex:outputPanel> -->

Please have a look on my updated code.

  • If you do not want to use apex method invocation, use standard html button and on click of that invoke javascript and use style property to show or hide the section (i.e) button.style.display = 'none'/'block'; (OR) jQuery(button).toggle(); You can get the id of the output panel from console. It will be like "page_id:form_id:*:relatedObjectForm" (OR) you can simply use <div> tag and use the id "relatedObjectForm". – Vignex Nov 25 '14 at 6:42
  • yes but I am able to hide the div as per requirement but after button click the page get reload and get to old stage. How can I avoid this. – Anu Nov 25 '14 at 7:29
  • Are you still using apex:commandButton ? If yes, please remove it and use <button> or <input type="button"> and use onclick on these tags. This would block the page reload. – Vignex Nov 25 '14 at 7:37
  • i am using <input type="button"> – Anu Nov 25 '14 at 8:42
  • 1
    Please use type= "button". <input type="button" value="Next >>" onclick="hidebaseObject();" /> – Vignex Nov 25 '14 at 9:07
3

Use <input type="button"> instead of <input type="submit"> what you are using now. The submit reloads your page.

3

this is another way which i use for outpannel hide/show might be it useful for you.

VF Code :

  <apex:form>
      <div id="contentToToggle" style="display:{!if(showContent,"block","none")};">
           <apex:outputPanel id="pannel1" title="First Pannel" >
                     Hi welcome to first block
            </apex:outputPanel>
      </div>

     <div id="contentToToggle" style="display:{!if(showContent1,"block","none")};">
       <apex:outputPanel id="pannel2" title="second Pannel">
           Hi welcome to second block
       </apex:outputPanel>

     <apex:commandbutton value="Show" action="{!toggleContent}"  style="float:right;"/>
     </div>
  </apex:form>

Apex Code :

public YourClassConstructor()
   {
           showContent = true;
           showContent1 = false;
   }
 public PageReference toggleContent() {

        if(showContent){
            showContent = false;
             showContent1 = true;
             }
        else{
            showContent = true;
             showContent1 = false;
            }
        return null;
    } 

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.