1

I am trying to rerender particular section on change of date. however I am facing problem to rerender section on onchange event.

I tried using onchange, onclick, onmouseout but this doesn't work as expected. in case of onclick the another section rerenders but only when user click on inputbox, but when user selects date and dont click on inputbox then it doesn't. same in case of onmouseout.

I've defined getter method for {!times}, so the section gets refresh on rerender. no any apex method required. my only concern is rerendering vf on exact action.

Below is my code for VF -

<apex:page controller="CustomerSignOffController" ShowHeader="false" id="CustomerPage" renderAs="{!chooserender}" docType="html-5.0"  >
<apex:form id="myForm">
<body>
    <table style="width:850px" var="block" styleClass="tableClass">
        <apex:outputPanel >
             <tr>
                  <td>Period</td>
                  <td>
                  <apex:inputText value="{!fDate}" size="10" id="demo1" onfocus="DatePicker.pickDate(false, this , false);" >
                    <apex:actionSupport event="onchange" rerender="theTable,d1,op1,op2,hours"/> 
                  </apex:inputText>
                   </td>        
                  <td>Period To</td>  
                  <td>   
                    <apex:inputText value="{!toDate}" size="10" id="demo2" onfocus="DatePicker.pickDate(false, this , false);" >
                        <apex:actionSupport event="onchange" rerender="theTable,d1,op1,op2,hours"/> 
                    </apex:inputText>
                  </td>
             </tr>
        </apex:outputPanel>     
    </table>
<br></br>
</body>
<body>
    <apex:actionRegion >
        <apex:outputPanel id="op1" > 
            <apex:dataTable value="{!times}" var="tt" id="theTable" headerClass="tablehead" columnClasses="tabledata" rowClasses="odd,even"
                        styleClass="tableClass"  width="850px">
                <apex:facet name="caption">Consulting Work Delivered:</apex:facet>
                <apex:column >
                        <apex:facet name="header">Workstream</apex:facet>
                        <apex:outputText value="{!tt.workstreamName}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">OPA Number</apex:facet>
                        <apex:outputText value="{!tt.OPANumber}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Budget Name</apex:facet>
                        <apex:outputText value="{!tt.role}"/>
                </apex:column>               
                <apex:column >
                        <apex:facet name="header">Resource Name</apex:facet>
                        <apex:outputText value="{!tt.resourceName}"/>
                </apex:column>                         
                <apex:column >
                        <apex:facet name="header">Date</apex:facet>

                        <apex:outputText value="{0, date, MMMM d','  yyyy}">
                        <apex:param value="{!tt.dateValue}"/>
                        </apex:outputText>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Hours</apex:facet>
                        <apex:outputText value="{0, number, ###,###,###,##0.00}">
                            <apex:param value="{!tt.hours}" />
                        </apex:outputText>                                                  
                </apex:column>
                <apex:column >
                        <apex:facet name="header">On Site</apex:facet>
                        <apex:outputText value="{!tt.onsite}"/>
                </apex:column>
                <apex:column >
                        <apex:facet name="header">Description</apex:facet>
                        <apex:outputText value="{!tt.description}"/>
                </apex:column>
            </apex:dataTable>
        </apex:outputPanel>
    </apex:actionRegion>
</body>

</apex:form> 

</apex:page>
4
  • Try with onblur event.. Mar 16, 2015 at 12:45
  • Tried with onblur as well but no luck.
    – Anup
    Mar 16, 2015 at 12:48
  • Anup -- are you saying that the dataTable does not rerender when the inputText for id=demo1 or id=demo2 is changed? In the debug log, do you see the setters for fDate and toDate getting invoked? If yes, then is your getter for times properly constructed to use the new values set by the setters?
    – cropredy
    Mar 16, 2015 at 16:40
  • Yes... the setter of fDate and toDate is not getting invoked properly. when I use onchange, it doesn't get invoked. for onclick it get invoked when i select date and again click on date textbox(which is not accepted), if I use onblur then i have to explicitly click on screen after selecting date. If I use onmouseout then i have to select date-> move mouse away->again move mouse on textbox-> again move moue away- which is not acceptable. In short i have to use onchange but when used, setter is not getting invoked.
    – Anup
    Mar 17, 2015 at 9:49

0

You must log in to answer this question.

Browse other questions tagged .