当“ onSelect” dataTableColumn时，bootsfaces更新

Question

我正在建立一个JSF网站（bootsfaces，xhtml，netbeans）。 我有一个搜索框来搜索鸟类（已经起作用），但是当我单击结果（显示在dataTable中）时，我想更新一个DIV，其中包含有关该鸟类的详细信息。 但是我不知道该怎么做。

我的XHTML是：

<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>

还有我的豆：

@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;
    }
}

Answer 1

我找到了答案，事实上这很容易...您无法更新div（我认为），您需要更新bootsfaces元素（我在ab：form中放入了div）。 然后，您只需使用update =“ idYouChoose”在数据表中引用其ID

Answer 2

只需添加更多信息，您就可以在JSF中使用元素<h:panelGroup layout="block" />渲染div标签，因此，如果您将该元素与ID结合使用，而不是对原始HTML进行编码，则可以对其进行更新ajax调用的元素。 我的意思是：

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