Удаление выделенных элементов на selectOneListbox / selectManyMenu нажатием кнопки в Primefaces

Question

Итак, я разработал простую форму, имеющую элементы selectOneListbox / selectManyMenu, которые я использую для генерации фрагмента текста на основе выбора пользователя.

Работает нормально.Теперь я хочу, чтобы, когда пользователь нажимал кнопку «очистить», выбор должен быть отменен, и страница должна вернуться в исходное состояние (без выбора).

Как мне этого добиться?

xhtml

        <h:form>
    <h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
    <p:panel>
    <h6 style="width:10.4em;background-color:#ACBECE;">Comment  Type</h6>
    <!-- comment type -->
    <p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
         <f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
    </p:selectOneListbox>
    </p:panel>
<p:panel>
        <h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
        <p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
            <f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />                  
        </p:selectManyMenu>
        </p:panel>
    </h:panelGrid>

    <!-- Text Area -->
    <p:inputTextarea  id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
    </p:inputTextarea>
    <br/>
    <p:commandButton  id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
    </p:commandButton>

    <p:commandButton  id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
    </p:commandButton>
    <p:ajaxStatus onstart="PF('statusDialog').show()"
            onsuccess="PF('statusDialog').hide()" />
        <p:dialog widgetVar="statusDialog" modal="true" draggable="false"
            closable="false" resizable="false" showHeader="false">
            <p:graphicImage value="/images/ajax-loader.gif" />
        </p:dialog>

    </h:form>

В моем бобе у меня есть четкий метод, который очищает содержимое текстовой области.Я хочу, чтобы эта кнопка отменяла выборки, а также часть вызова ajax.

public void clearText() {
        this.decisionNotes=" ";
    }

(для краткости я включил только 2 столбцаздесь, в xhtml. Всего имеется 5 отдельных столбцов выбора с одинаковыми функциями)

Answer 1

Я бы просто сбросил значения Menu / Box в методе bean-компонента:

public void clearText() {
    this.decisionNotes=" ";
    this.option1 = null;
    //and so on...
}

Тогда вам просто нужно обновить компоненты в атрибуте update вашей кнопки.Но я бы обновил всю форму вместо каждого компонента, если вы хотите обновить почти каждый компонент в форме.Так что просто используйте update="@form":

Примечание. Значение процесса по умолчанию для p: commandButton равно @form.Таким образом, ваша кнопка очистки будет обрабатывать всю форму при каждом клике, хотя в этом нет необходимости.Я бы установил его на process="@this", чтобы он просто выполнял свое действие.