Обновление Bootsfaces при выборе dataTableColumn onSelect dataTableColumn

Я делаю сайт JSF (bootfaces, xhtml, netbeans). У меня есть окно поиска для поиска видов птиц (оно уже работает), но когда я нажимаю на результат (отображаемый в таблице данных), я хочу обновить 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;
    }
}

person MBek    schedule 19.12.2017    source источник


Ответы (2)


Я нашел ответ, на самом деле это было просто ... Вы не можете обновить div (я думаю), вам нужно обновить элемент bootsfaces (я поместил форму b: в свой div). Тогда вам просто нужно указать его идентификатор в таблице данных с помощью update = "idYouChoose".

person MBek    schedule 20.12.2017

Чтобы добавить больше информации, вы можете отображать теги div в JSF с помощью элемента <h:panelGroup layout="block" />, поэтому, если вы используете этот элемент с идентификатором вместо кодирования необработанного HTML, вы сможете обновить этот элемент с помощью вызова ajax. Я имею в виду:

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