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元素（我在我的div中放了一个b：form）。然后你只需要使用update =＆＃34; idYouChoose＆＃34;

在数据表中引用它的ID

Answer 2

只是为了添加更多信息，您可以使用元素<h:panelGroup layout="block" />在JSF中呈现div标签，因此如果您使用带有ID的元素代替原始HTML，您将能够使用ajax电话。我的意思是：

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

Bootsfaces在“onSelect”dataTableColumn时更新

2 个答案: