Bootsfaces update when "onSelect" dataTableColumn

Question

I'm making a JSF website (bootsfaces, xhtml, netbeans). I have a searchbox to search for birds species (it already works) but when I click on a result (displayed in a dataTable) I want to update a DIV that contains the detailled infos about that bird. But I can't figure out how to do this.

My XHTML is :

<div class="col-xs-12 col-lg-3">
    <!--SEARCH-->
    <div class="form-group">
        <label>Rechercher une espèce :</label>
        <b:form prependId="false">
            <div class="row">
                <div class="col-xs-10">
                    <b:inputText id="speciesTxt" value="#{speciesCaller.speciesSearchText}" class="form-control"/>
                </div>
                <div class="col-xs-2">
                    <b:commandButton action="#{speciesCaller.searchSpecies()}" type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search"></span>
                        <f:ajax execute="speciesTxt" event="click" render="output"></f:ajax>
                    </b:commandButton>
                </div>
            </div>
        </b:form> 

        <!--SEARCH RESULTS-->
        <b:dataTable id="output" paginated="false" searching="false" class="table table-hover" 
                value="#{speciesCaller.foundSpecies}" var="species" selectionMode="single" select="true"
                info="false" onselect="ajax:speciesCaller.onSelect(species);">
            <b:dataTableColumn value="#{species.name}">
                <f:facet name="header">
                    Nom
                </f:facet>
           </b:dataTableColumn>
        </b:dataTable>
    </div>
</div>

<!--SPECIES INFO-->  
<div id="speciesInfos" class="col-xs-12 col-lg-5">
    SPECIES INFO
    #{speciesCaller.selectedSpecies.name}
</div>

And my BEAN :

@ManagedBean
@SessionScoped
public class SpeciesCaller {

    private String speciesSearchText;
    public void setSpeciesSearchText(String speciesSearchText){
        this.speciesSearchText = speciesSearchText;
    }
    public String getSpeciesSearchText(){
        return this.speciesSearchText;
    }

    private List<Species> foundSpecies;
    public List<Species> getFoundSpecies() {
        return foundSpecies;
    }
    public void setFoundSpecies(List<Species> foundSpecies) {
        this.foundSpecies = foundSpecies;
    }

    private Species selectedSpecies;
    public Species getSelectedSpecies() {
        return selectedSpecies;
    }
    public void setSelectedSpecies(Species selectedSpecies) {
        this.selectedSpecies = selectedSpecies;
    }


    public void searchSpecies() throws UnirestException{
        MainCaller mc = new MainCaller();
        if(speciesSearchText.equals("null") || speciesSearchText.equals("")){
            foundSpecies = mc.getToSpeciesList("species");
        }else{
            foundSpecies = mc.getToSpeciesList("species/search/"+this.speciesSearchText);
        }
    }

    public void onSelect(Species species) {
        selectedSpecies = species;
    }
}

score 2 · Answer 1 · answered Dec 20 '17 at 15:32

2

I found the answer, it was easy in fact... You can't update a div (I think), you need to update a bootsfaces element (I put a b:form in my div). Then you just need to refer its ID in the datatable with update="idYouChoose"

answered Dec 20 '17 at 15:32

MBek

155
10

score 0 · Answer 2 · answered Apr 09 '18 at 16:13

Just to add more information, you can render div tags in JSF with the element <h:panelGroup layout="block" />, so if you use that element with an ID instead to code raw HTML, you will be able to update that element with the ajax call. I mean:

<h:panelGroup layout="block" id="speciesInfos" class="col-xs-12 col-lg-5">
    SPECIES INFO
    #{speciesCaller.selectedSpecies.name}
</h:panelGroup>

Bootsfaces update when "onSelect" dataTableColumn

2 Answers2