How to partial submit with ajax a specific jsf component?

Question

I have something like this:

<h:form id="form">
    <p:dialog id="profileDialogId">                 
        <p:panelGrid id="categoryFunctions" columns="2" >       
            <p:outputPanel id="profileFunctions" >
                <p:panelGrid  columns="1" >
                        <p:scrollPanel scrollMode="buttons" mode="native" >
                            <p:outputLabel for="functionList" value="Functions:" />
                                <p:selectManyCheckbox id="functionList" value="#{profileConf.selectedCategoryDto.selectedFunctions}" layout="pageDirection" >
                                    <f:selectItems  value="#{profileConf.selectedCategoryDto.functionList}" var="function" itemLabel="#{function.functionDesc}"  itemValue="#{function.functionCod}" />
                            </p:selectManyCheckbox>                                     
                        </p:scrollPanel>
                </p:panelGrid>
            </p:outputPanel>
        </p:panelGrid>                       
    </p:dialog>         
</h:form>

and I want to send with ajax only the component with "functionsList" id.

I already tried

<f:ajax event="valueChange" execute=":form:functionList" listener="#{profileConf.functionsForCategory}" update=":form:functionList"/>

but when I put a breakpoint in functionsForCategory method selectedFunctions property is null. Any help will be appreciated. Thanks!

Does this answer your question? [Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes](https://stackoverflow.com/questions/25339056/understanding-primefaces-process-update-and-jsf-fajax-execute-render-attributes) — Kukeltje, Nov 14 '19 at 03:06

score 1 · Answer 1 · answered Dec 15 '14 at 14:01

1

Try with this

<p:ajax event="valueChange" listener="#{profileConf.functionsForCategory}" process="@this" update=":form:functionList"/>

answered Dec 15 '14 at 14:01

Predrag Maric

23,938
5
52
68

Thanks for your answer but is not working because I want to process 'functionList' not @this. I tried your way also with process=":form:functionList" but still no result – Aditzu Dec 15 '14 at 14:46
Also it should be event="change"; not "valueChange" – P P Feb 23 '17 at 01:23
This is partial processing, not partial submission in the http sense – Kukeltje Nov 14 '19 at 02:59

wittakarn · Answer 2 · 2014-12-17T04:42:57.190

The ajax behaviour of p:selectManyCheckbox will default to the default event valueChange. In order to partial submit your p:selectManyCheckbox you can use as my example code.

xhtml

<h:form id="form">

    <p:commandButton value="popup" onclick="PF('profiledlg').show()"/>

    <p:dialog id="profileDialogId" widgetVar="profiledlg">                 
        <p:panelGrid id="categoryFunctions" columns="2" >       
            <p:outputPanel id="profileFunctions" >
                <p:panelGrid  columns="1" >
                    <p:scrollPanel  mode="native" >
                        <p:outputLabel for="functionList" 
                                       value="Functions:" />
                        <p:selectManyCheckbox id="functionList" 
                                              value="#{profileConf.selectedFunctions}" 
                                              layout="pageDirection" >
                            <p:ajax listener="#{profileConf.functionsForCategory}" 
                                    process="functionList" 
                                    update="functionList"/>
                            <f:selectItems  
                                value="#{profileConf.categorys}" 
                                var="function" 
                                itemLabel="#{function.functionDesc}"  
                                itemValue="#{function.functionCod}" />
                        </p:selectManyCheckbox>                                   
                    </p:scrollPanel>
                </p:panelGrid>
            </p:outputPanel>
        </p:panelGrid>

        <p:commandButton value="submit" 
                         actionListener="#{profileConf.submit}"
                         process="@this,functionList"
                         update="@this,functionList"/>
    </p:dialog>
</h:form>

managedbean

/**
 *
 * @author Wittakarn
 */
@ViewScoped
@ManagedBean(name = "profileConf")
public class ProfileConf {
    private List<FunctionsForCategory> categorys;
    private List<FunctionsForCategory> selectedFunctions;

    public ProfileConf(){
        categorys = new ArrayList<FunctionsForCategory>();
        categorys.add(new FunctionsForCategory("A", "type A"));
        categorys.add(new FunctionsForCategory("B", "type B"));
        categorys.add(new FunctionsForCategory("C", "type C"));
        categorys.add(new FunctionsForCategory("D", "type D"));
    }

    public List<FunctionsForCategory> getCategorys() {
        return categorys;
    }

    public void setCategorys(List<FunctionsForCategory> categorys) {
        this.categorys = categorys;
    }

    public List<FunctionsForCategory> getSelectedFunctions() {
        return selectedFunctions;
    }

    public void setSelectedFunctions(List<FunctionsForCategory> selectedFunctions) {
        this.selectedFunctions = selectedFunctions;
    }

    public void functionsForCategory(){
        System.out.println("size of selectedFunctions = " + selectedFunctions.size());
    }

    public void submit(){
        System.out.println("size of selectedFunctions = " + selectedFunctions.size());
    }
}

domain

/**
 *
 * @author Wittakarn
 */
public class FunctionsForCategory {
    private String functionCod;
    private String functionDesc;

    public FunctionsForCategory(String functionCod, String functionDesc){
        this.functionCod = functionCod;
        this.functionDesc = functionDesc;
    }

    public String getFunctionCod() {
        return functionCod;
    }

    public void setFunctionCod(String functionCod) {
        this.functionCod = functionCod;
    }

    public String getFunctionDesc() {
        return functionDesc;
    }

    public void setFunctionDesc(String functionDesc) {
        this.functionDesc = functionDesc;
    }
}

This is partial processing, not partial submission in the http sense — Kukeltje, Nov 14 '19 at 02:59

How to partial submit with ajax a specific jsf component?

2 Answers2