JSF и f: ajax для скрытия / показа div

Question

Я думаю о создании скрываемого / отображаемого меню в моем веб-приложении. До этого я широко использовал PHP и AJAX для этой цели. Однако, поскольку идентификатор элемента HTML регенерируется в JSF-фреймворке, я обнаружил, что этот метод больше невозможен, по крайней мере, в моей области.

Я прочитал тег f: ajax в JSF и попытался реализовать его. Видимо, мне не повезло. Это выглядит так просто, но я все еще не могу понять, что я сделал не так.

Я подготовил прототип для проверки функциональности тега f-ajax, но не повезло. Вот код

   ` <h:body>
     <h:outputLabel>
        <h:outputText value="Click A" />
        <f:ajax event="click" render="textA"/>
    </h:outputLabel>
    <h:outputLabel>
        <h:outputText value="Click B" />
        <f:ajax event="click" render="textB"/>
    </h:outputLabel>
    <h:outputLabel>
        <h:outputText value="Click C" />
        <f:ajax event="click" render="textC"/>
    </h:outputLabel>

    <h:outputText id="textA" value="Click A" />
    <h:outputText id="textB" value="Click B" />
    <h:outputText id="textC" value="Click C" />
    </h:body>`

Когда я нажал на конкретную метку, ничего не произошло. Элементы textA, textB и textC уже отображаются в первую очередь. Что я сделал не так, ребята?

Заранее спасибо.

Answer 1

Однако, поскольку идентификатор элемента HTML регенерируется в платформе JSF

Если это так важно, просто укажите фиксированные id s. Каждый компонент имеет для этого атрибут id. Таким образом, вы должны иметь возможность использовать обычные платформы JS / jQuery, когда это применимо.

Что касается проблемы в конкретном вопросе, вот рабочий пример, с которого следует начать.

<h:form>
    <f:ajax render="text">
        <h:commandLink value="Click A" action="#{bean.setShow('A')}" /><br/>
        <h:commandLink value="Click B" action="#{bean.setShow('B')}" /><br/>
        <h:commandLink value="Click C" action="#{bean.setShow('C')}" /><br/>
    </f:ajax>

    <h:panelGroup id="text">
        <h:outputText value="Clicked A" rendered="#{bean.show == 'A'}" />
        <h:outputText value="Clicked B" rendered="#{bean.show == 'B'}" />
        <h:outputText value="Clicked C" rendered="#{bean.show == 'C'}" />
    </h:panelGroup>
</h:form>

в сочетании с

@ManagedBean
@ViewScoped
public class Bean {

    private String show;

    public String getShow() {
        return show;
    }

    public void setShow(String show) {
        this.show = show;
    }

}

Answer 2

читая ваш код, я бы сначала дал несколько общих советов:

• Насколько я знаю, ajax работает с элементами ввода, но не с outputLabel. Вместо этого используйте h: commandLink или h: commandButton
• outputText не должно быть внутри outputLabel. outputLabel здесь не нужен
• элементы outputText внизу всегда отображаются, если вы не используете визуализированный атрибут: <h:outputText id="textA" value="Click" rendered="false" />. Вы можете использовать некоторое EL-выражение, чтобы сделать атрибут Rendered-атрибута условным.

Я думаю, что лучше всего начать с Java-EE-Tutorial , чтобы узнать об основных понятиях jsf.