CODEWITHSUNDEEP
jsfprimefacesautocomplete
Bruno Santana
Bruno Santana

Reputation: 203

Dynamic update primefaces component according to a autocomplete value

Someone can explain how to update an certain component in a view (example: dataScroller, dataList etc) using an autocomplete component ? I'm trying something with the ajax event "itemSelect" but with no success on how to proceed, any example, explanation, light will be a good help.

Some code (xhtml page)

<h:form id="frmPesquisarModalidade">
    <p:autoComplete id="autoModalidade" multiple="true" value="#{matriculaBean.modalidadesSelecionadas}" completeMethod="#{matriculaBean.completeModalidade}"
        var="modalidade" itemLabel="#{modalidade.nome}" itemValue="#{modalidade}" forceSelection="true">
        <f:converter binding="#{modalidadeConverter}"/>
        <f:ajax listener="#{matriculaBean.onItemSelect}" event="itemSelect" render="test"/>
        <p:column style="width:10%">
            <h:outputText value="#{modalidade.nome}"/>
        </p:column>
    </p:autoComplete>
    <p:dataScroller id="dataScrollModalidadesSelecionadas" value="#{matriculaBean.modalidadesSelecionadas}" var="modalidade" chunkSize="6">
        <h:panelGrid columns="2" cellpadding="5" id="test">
            <h:outputText value="#{modalidade.nome}"/>
        </h:panelGrid>
    </p:dataScroller>
</h:form>

backing bean 

@Named
@ViewScoped
public class MatriculaBean {

private List<Modalidade> modalidadesDisponiveis;
private List<Modalidade> modalidadesSelecionadas;

@Autowired
private ServicoModalidade servicoModalidade;

@PostConstruct
private void init(){
    modalidadesDisponiveis = servicoModalidade.listar();
}

public List<Modalidade> completeModalidade(String busca) {
    List<Modalidade> filtrados = new ArrayList<Modalidade>();
    for (Modalidade mod : modalidadesDisponiveis) {
        if (mod.getNome().contains(busca)) {filtrados.add(mod);}
    }
    return filtrados;
}

public void onItemSelect(SelectEvent event){
    //????????
}

Upvotes: 1

Views: 3245

Answers (2)

Bruno Santana
Bruno Santana

Reputation: 203

        <h:form id="frmPesquisarModalidade">
                    <p:autoComplete id="autoModalidade" multiple="true" value="#{matriculaBean.modalidadesSelecionadas}" completeMethod="#{matriculaBean.completeModalidade}"
                    var="modalidade" itemLabel="#{modalidade.nome}" itemValue="#{modalidade}" forceSelection="true">
                        <f:converter binding="#{modalidadeConverter}"/>
                        <p:ajax event="itemSelect" update="dataScrollModalidadesSelecionadas"/>
                        <p:column style="width:10%">
                            <h:outputText value="#{modalidade.nome}"/>
                        </p:column>
                    </p:autoComplete>
                    <p:dataScroller id="dataScrollModalidadesSelecionadas" value="#{matriculaBean.modalidadesSelecionadas}" var="modalidade" chunkSize="6">
                        <h:panelGrid columns="2" cellpadding="5">
                            <h:outputText value="#{modalidade.nome}"/>
                        </h:panelGrid>
                    </p:dataScroller>
                </h:form>

solved!!! to resolve my issue i'd discovered theres no need to apply an backing bean logic withe the itemSelect event... just create an ajax event in the xhtml page and use the update attribute with the respective id! Thanks for help

Upvotes: 0

Pellizon
Pellizon

Reputation: 1375

What you need to do in onItemSelect method is update the value of the target component, based on the selected item.

If you want to update dataScrollModalidadesSelecionadas:

public void onItemSelect(SelectEvent event){
     //Get the selected item value
     Modalidade m = new Modalidade();
     m = event.getObject();
     //Create/use a List method which can search the DB based on the selected item
     modalidadesDisponiveis = servicoModalidade.listarPorModalidade(m);
}

And in the JSF, you just have to update the target component:

<p:autoComplete ...... >
    <p:ajax listener="#{matriculaBean.onItemSelect}" event="itemSelect" update="dataScrollModalidadesSelecionadas"/>
</p:autoComplete>

I'm not sure if those options and properties you defined gonna work as expected, but the example above is the basics to update a component based on ItemSelect. Also, I prefer using <p:ajax> rather than <f:ajax>

Upvotes: 1

Related Questions