0

yellow colour mark area not show before click on search how to use render i have take boolean variable which name is flag

enter image description here

this is my class

public class nestedqueryexample{

     public string searchboxstring{get; set;}
     public list<contact> result {get; set;}
     public Integer counter{get;set;}
     public contact con{get;set;}
     public boolean displayPopup {get; set;}  
     public boolean flag{get;set;}   

    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }
    public nestedqueryexample() {
      result=new List<Contact>();
      con = new Contact();  
    }
    public void searchbox(){
      result=new List<Contact>();
      if(searchBoxstring.trim() != null && searchBoxstring.trim() != ''){
          result=[select Name, account.name from Contact where account.Name =:searchboxstring];
          counter = result.size();

      } else{
          Apexpages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR,'Please Enter Account Name'));
      }
   }

     public void save(){
         insert con;
         displayPopup = false;
     }

  public List<Account> getaccsandtmember(){
      List<Account> accounts = [Select Id,(Select id, Name , FirstName, LastName , Email, phone From Contacts), Name, Total_Record_Count__c from Account];

      return accounts;
  }
}

this is my page

<apex:page tabstyle="Account" controller="nestedqueryexample" showheader="false">
<script>
        function switchMenu(obj,obj1,obj2) 
        {
            var el = document.getElementById(obj);                                       
            if ( el.style.display != 'none' ) {
            el.style.display = 'none';
            }
            else {
            el.style.display = '';
            }
            var e2 = document.getElementById(obj1);                                       
            if ( e2.style.display != 'none' ) {
            e2.style.display = 'none';
            }
            else {
            e2.style.display = '';
            }
             var e3 = document.getElementById(obj2);                                       
            if ( e2.style.display != 'none' ) {
            e3.style.display = 'none';
            }
            else {
            e3.style.display = '';
            }

        }
</script>
<style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.10;
            filter: alpha(opacity = 10);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
    <apex:form>
    <apex:pageBlock id="pb1">
<apex:pageMessages />
 <apex:pageBlockSection columns="2" collapsible="true" title="Record" showHeader="true">
 <apex:inputText value="{!searchBoxstring}" label="Search"/>
   <apex:commandButton value="Search" action="{!searchbox}" >

    <apex:commandButton value="Add New" action="{!showPopup}" rerender="tstpopup" />
        <apex:outputPanel id="tstpopup">
            <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                 <table width="100%">
                 <tr>
                     <td>First Name: </td>
                     <td><apex:InputField value="{!con.firstName}" /></td>
                 </tr>
                 <tr>
                     <td> Last Name: </td>
                     <td> <apex:InputField value="{!con.LastName}" required="false" /> </td>
                </tr>
                 <tr>
                     <td>Email:</td>
                     <td><apex:InputField value="{!con.Email}" /></td>
                 </tr>
                 <tr>
                     <td>Phone: </td>
                     <td><apex:InputField value="{!con.Phone}" /></td>
                 </tr>
                 <tr>
                     <td>Account Name: </td>
                     <td><apex:InputField value="{!con.AccountId}" /></td>

                 </tr>
                 </table>
                 <br/><br/>
                    <apex:commandButton value="Save" action="{!save}" rerender="pb1"/>
                    <apex:commandButton value="Cancel" action="{!closePopup}" rerender="tstpopup"/>
                </apex:outputPanel>
            </apex:outputPanel>
      </apex:commandButton>

    <apex:pageblockTable value="{!result}" var="wl">
     <apex:column title="Name">
          <apex:outputLink value="/{!wl.id}" target="_blank">{!wl.name}</apex:outputLink>
     </apex:column>
      <apex:column value="{!wl.account.name}"/>
      <apex:column value="{!wl.id}"/>
    </apex:pageblockTable>
    <br/><br/>
    <apex:outputText >Total Record : {!counter} </apex:outputText>   
  </apex:pageBlockSection>
</apex:pageBlock>
    <apex:pageblock >
        <apex:pageblocktable value="{!accsandtmember}"  var="accdet">
            <apex:column >
                   <apex:facet name="header">                                        
                         Expande / Collapse                                                                               
                    </apex:facet>
                    <apex:outputpanel id="plusimage">
                          <apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expande/Collapse"/> 
                    </apex:outputpanel>
                    <apex:outputpanel id="minusimage" style="display:none;">
                          <apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Expande/Collapse"/>
                    </apex:outputpanel>
                    <apex:outputpanel id="inlinetablesec" style="display:none;">
                                                <apex:variable value="{!0}" var="rowNum"/>
                                                <apex:repeat var="count" value="{!accdet.Contacts}">
                                                    <apex:variable var="rowNum" value="{!rowNum+1}"/>
                                                </apex:repeat>

                        <apex:pageblocktable value="{!accdet.Contacts}" var="tm" rendered="{!rowNum>0}">
                            <apex:column headerValue="FirstName">
                                   <apex:outputfield value="{!tm.firstname}"/>
                             </apex:column>
                             <apex:column headerValue="LastName">
                                   <apex:outputfield value="{!tm.LastName}"/>
                             </apex:column>  
                             <apex:column headerValue="Email">
                                   <apex:outputfield value="{!tm.Email}"/>
                             </apex:column> 
                             <apex:column headerValue="Phone">
                                   <apex:outputfield value="{!tm.Phone}"/>
                             </apex:column>                       
                        </apex:pageblocktable>
                   </apex:outputpanel>     
            </apex:column>
            <apex:column headervalue="Account Name">
                    <apex:outputtext value="{!accdet.Name}"/>
            </apex:column>
            <apex:column headervalue="Total Record">
                    <apex:outputtext value="{!accdet.Total_Record_Count__c}"/>
            </apex:column>
        </apex:pageblocktable>
    </apex:pageblock>
        </apex:form>
</apex:page>
2
  • Can you make it more clear ? Not getting what is working and what is not working. Commented May 31, 2016 at 6:25
  • @Mukesh -->yellow mark area have one pageblockTable and one label which is show on page load. i want this pageblocktable and label which name is Total record show when i click on the search button. i mean how to use render functionality...see uploadedd image Commented May 31, 2016 at 6:29

1 Answer 1

0

apex:commandbutton will refresh all page onclick because of its default behaviour. The correction is button should not have other tags merged inside it. See corrected code:

<apex:page tabstyle="Account" controller="nestedqueryexample" showheader="false">
<script>
        function switchMenu(obj,obj1,obj2) 
        {
            var el = document.getElementById(obj);                                       
            if ( el.style.display != 'none' ) {
            el.style.display = 'none';
            }
            else {
            el.style.display = '';
            }
            var e2 = document.getElementById(obj1);                                       
            if ( e2.style.display != 'none' ) {
            e2.style.display = 'none';
            }
            else {
            e2.style.display = '';
            }
             var e3 = document.getElementById(obj2);                                       
            if ( e2.style.display != 'none' ) {
            e3.style.display = 'none';
            }
            else {
            e3.style.display = '';
            }

        }
</script>
<style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.10;
            filter: alpha(opacity = 10);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
    <apex:form>
    <apex:pageBlock id="pb1">
<apex:pageMessages />
 <apex:pageBlockSection columns="2" collapsible="true" title="Record" showHeader="true">
 <apex:inputText value="{!searchBoxstring}" label="Search"/>
   <apex:commandButton value="Search" action="{!searchbox}" />

    <apex:commandButton value="Add New" action="{!showPopup}" rerender="tstpopup" />
        <apex:outputPanel id="tstpopup">
            <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                 <table width="100%">
                 <tr>
                     <td>First Name: </td>
                     <td><apex:InputField value="{!con.firstName}" /></td>
                 </tr>
                 <tr>
                     <td> Last Name: </td>
                     <td> <apex:InputField value="{!con.LastName}" required="false" /> </td>
                </tr>
                 <tr>
                     <td>Email:</td>
                     <td><apex:InputField value="{!con.Email}" /></td>
                 </tr>
                 <tr>
                     <td>Phone: </td>
                     <td><apex:InputField value="{!con.Phone}" /></td>
                 </tr>
                 <tr>
                     <td>Account Name: </td>
                     <td><apex:InputField value="{!con.AccountId}" /></td>

                 </tr>
                 </table>
                 <br/><br/>
                    <apex:commandButton value="Save" action="{!save}" rerender="pb1"/>
                    <apex:commandButton value="Cancel" action="{!closePopup}" rerender="tstpopup"/>
                </apex:outputPanel>
            </apex:outputPanel>


    <apex:pageblockTable value="{!result}" var="wl">
     <apex:column title="Name">
          <apex:outputLink value="/{!wl.id}" target="_blank">{!wl.name}</apex:outputLink>
     </apex:column>
      <apex:column value="{!wl.account.name}"/>
      <apex:column value="{!wl.id}"/>
    </apex:pageblockTable>
    <br/><br/>
    <apex:outputText >Total Record : {!counter} </apex:outputText>   
  </apex:pageBlockSection>
</apex:pageBlock>
    <apex:pageblock >
        <apex:pageblocktable value="{!accsandtmember}"  var="accdet">
            <apex:column >
                   <apex:facet name="header">                                        
                         Expande / Collapse                                                                               
                    </apex:facet>
                    <apex:outputpanel id="plusimage">
                          <apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expande/Collapse"/> 
                    </apex:outputpanel>
                    <apex:outputpanel id="minusimage" style="display:none;">
                          <apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Expande/Collapse"/>
                    </apex:outputpanel>
                    <apex:outputpanel id="inlinetablesec" style="display:none;">
                                                <apex:variable value="{!0}" var="rowNum"/>
                                                <apex:repeat var="count" value="{!accdet.Contacts}">
                                                    <apex:variable var="rowNum" value="{!rowNum+1}"/>
                                                </apex:repeat>

                        <apex:pageblocktable value="{!accdet.Contacts}" var="tm" rendered="{!rowNum>0}">
                            <apex:column headerValue="FirstName">
                                   <apex:outputfield value="{!tm.firstname}"/>
                             </apex:column>
                             <apex:column headerValue="LastName">
                                   <apex:outputfield value="{!tm.LastName}"/>
                             </apex:column>  
                             <apex:column headerValue="Email">
                                   <apex:outputfield value="{!tm.Email}"/>
                             </apex:column> 
                             <apex:column headerValue="Phone">
                                   <apex:outputfield value="{!tm.Phone}"/>
                             </apex:column>                       
                        </apex:pageblocktable>
                   </apex:outputpanel>     
            </apex:column>
            <apex:column headervalue="Account Name">
                    <apex:outputtext value="{!accdet.Name}"/>
            </apex:column>
            <apex:column headervalue="Total Record">
                    <apex:outputtext value="{!accdet.Total_Record_Count__c}"/>
            </apex:column>
        </apex:pageblocktable>
    </apex:pageblock>
        </apex:form>
</apex:page>

You must log in to answer this question.

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