Диалоговое окно "Правые" + команда "Биттон"
Я пытаюсь использовать прайс-листы <p:dialog>
в сочетании с <p:commandButton>
. На моей странице .xhtml у меня есть picklist и commandButton, который используется для отображения диалога. Диалог отображает данные с целевыми значениями из списка выбора. Диалог имеет две кнопки: отменить и отправить. Моя проблема заключается в том, что кнопка отправки не запускается. Какой странный, commandButton из диалога работает.
Вот мой .xhtml:
<body>
<ui:composition template="./../resources/mainTemplate.xhtml">
<ui:define name="content">
<h:form>
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
<h:column>
#{skillslevel.skill.umiejetnosc}
</h:column>
<h:column>
<p:selectOneMenu value="#{skillslevel.level}" >
<f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
</p:selectOneMenu>
</h:column>
</h:dataTable>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" /> THIS BUTTON IS NOT FIRED
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</p:dialog>
<p:pickList value="#{editSkills.skills}" var="skill" effect="none"
itemValue="#{skill.id}" itemLabel="#{skill.umiejetnosc}"
showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains"
addLabel="#{messages.add}" removeLabel="#{messages.remove}" removeAllLabel="#{messages.removeAll}" >
<f:facet name="sourceCaption">#{messages.skillsList}</f:facet>
<f:facet name="targetCaption">#{messages.yourSkills}</f:facet>
<p:ajax event="transfer" listener="#{editSkills.onTransfer}" />
<p:column style="width:100%;">
#{skill.umiejetnosc}
</p:column>
</p:pickList>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.afterSubmit}" update="dlg" oncomplete="dlg.show()" /> THIS BUTTON WORKS FINE
<p:commandButton value="#{messages.cancel}" action="profile" immediate="true"/>
</h:form>
</ui:define>
</ui:composition>
</body>
Я отметил рабочую кнопку и не работал.
Что мне нужно сделать, чтобы заставить его работать?
Ответы
Ответ 1
Вы можете попробовать любой из следующих, я голосую номер один, это более чистый дизайн IMO
-
Принесите <p:dialog/>
вне общего <h:form/>
и поместите вместо него <h:form/>
<p:dialog id="dlg" header="#{messages.chooseSkillLevel}" widgetVar="dlg" modal="true" dynamic="true">
<h:form>
<h:dataTable value="#{editSkills.skillsAndLevels}" var="skillslevel">
<h:column>
#{skillslevel.skill.umiejetnosc}
</h:column>
<h:column>
<p:selectOneMenu value="#{skillslevel.level}" >
<f:selectItems value="#{editSkills.levels}" var="level" itemLabel="#{level.stopien}" itemValue="#{level.id}" />
</p:selectOneMenu>
</h:column>
</h:dataTable>
<p:commandButton value="#{messages.confirm}" action="#{editSkills.showSkillsAndLevels}" oncomplete="dlg.hide();" /> THIS BUTTON IS NOT FIRED
<p:commandButton value="#{messages.cancel}" onclick="dlg.hide()"/>
</h:form>
</p:dialog>
-
Добавьте appendToBody="false"
в <p:dialog/>
, чтобы убедиться, что диалог отображается в форме html в DOM вместо автоматического перемещения в конец тела HTML. Но это может привести к несогласованному рендерингу в разных браузерах.
Ответ 2
<p:commandButton value="Cancel" oncomplete="PF('yourDialogWidgedVarName').hide();" process="@this" />
Обязательно используйте ', когда вы вызываете имя widgetVar. Вы также можете использовать немедленное = "true" или process = "@this".