0

I have a button that should render only one specific panelGroup (parentWrapper). Instead it re-render the whole page. This is the way it is supposed to work:

  1. The user looks for a excel document and enters the location in the fileupload component
  2. Then the user selects a Customer using the Autocomplete component
  3. Then the user clicks on the AddCustomer button. That executes the CustomerInSchedule (autocomplete) and the action editScheduleController.addCustomerRowFromLookAhead(), both are working fine.

  4. When the user clicks the AddCustomer button, the ajax is supposed to render only the :CustomerScheduleForm:parentWrapper. Instead of that the whole page is rendered. That creates issues in other parts of this page. So the question is: Why is ajax rendering the whole page and not just the panelGroup id ="parentWrapper" ?

    <div align="center">
<h:panelGroup id="editScreenDiv" layout="block" style="width:1180px">
  <h:panelGrid border="0" columns="2" class="SimpleFormBoundedSection SubRegionBox" columnClasses="InputLabel,InputElement"     rowClasses="FirstRow,LastRow" headerClass="SectionHead">
   <!-- some stuff -->            
   <l:fileUpload id="fileupload" value="#{editScheduleController.customerRateScheduleBean.sourceFile}" onchange="file_onchange()" rendered="#{editScheduleController.customerRateScheduleBean.action != 'editSchedule'}" />      
   <!-- ... some stuff  --> 
   <h:commandButton id="AddCustomer" value="Add"                  action="#{editScheduleController.addCustomerRowFromLookAhead()}" > 
        </h:commandButton> 
<p:autoComplete id="CustomerInSchedule" required="false" value="#{editScheduleController.customerNumberAndName}" completeMethod="#{editScheduleController.suggestAuthorizedCustomer}" minQueryLength="3" scrollHeight="250" size="65" maxlength="50" forceSelection="true">

For some reason I could not continue adding the xhtml code here. What follows is the rest of the code that belongs to the same page. I have omitted style attributes from the div and the dataTable. 

<f:ajax render=":CustomerScheduleForm:parentWrapper"                        execute="CustomerInSchedule" onevent="clearCustomerInSchedule()"/>  
</p:autoComplete>    

<h:panelGroup id ="parentWrapper">          
  <h:panelGroup id ="wrapper">
   <div> 
     <h:dataTable id="customerTable" value="#{editScheduleController.customerRateScheduleBean.listOfCustomersInSchedule}"
        var="customerRow" >    
  <!-- ...some stuff  -->
      </h:dataTable>
    </div>
  </h:panelGroup>   

  </h:panelGrid>             
 </h:panelGroup>    
 <!-- ... some stuff  -->
A.Galimidi
  • 1
  • 1
  • Not sure I understand, but if you want the button to do an ajax request I'd say you need to move the f:ajax up to the button from the autocomplete – Jaqen H'ghar Sep 28 '15 at 17:48
  • `h:commandButton` is not ajax at all, you can put `f:ajax` inside or use `p:commandButton` and adjust `exec` and `render` accordingly what you want. – Alexandre Lavoie Sep 29 '15 at 01:18

1 Answers1

0

Add an update to your commandButton, with the component to update : update=":CustomerScheduleForm:parentWrapper".

Edit : do this accordinaly with esiting commandButton to p: instead of h to use the update and ajax.

Chaibi Alaa
  • 1,346
  • 4
  • 25
  • 54