How do you display using ? is it possible?
here is my sample code. this aint working.
<h:form>
<p:panel header="Panel 1" widgetVar="panel1" id="a" >
<p:commandButton onclick="panel2.show()" value="Show Panel"/>
</p:panel>
<p:panel header="Panel 2" widgetVar="panel2" id="b" visible="false">
<p:outputLabel value="asdasdasdasdsad" />
</p:panel>
</h:form>
maybe you can put something like this at onclick action:
<p:panel header="Panel 1" widgetVar="panel1" id="a" >
<p:commandButton onclick="document.getElementById("b").visble=true" value="Show Panel"/>
</p:panel>
<p:panel header="Panel 2" widgetVar="panel2" id="b" visible="false">
<p:outputLabel value="asdasdasdasdsad" />
</p:panel>
so by defect visible = false and onclick changes to true.
solved!
adding toggleable="true" closable="true" and updating the panel (update="b") in the p:commandButton
<p:panel header="Panel 1" widgetVar="panel1" id="a" >
<p:commandButton value="Show Panel" update="b" widgetVar="btn" onclick="panel2.show()"
>
</p:commandButton>
</p:panel>
<p:panel header="Panel 2" widgetVar="panel2" id="b" toggleable="true" closable="true" visible="false">
<p:outputLabel value="asdasdasdasdsad" />
</p:panel>
Related
http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:dialog&exp=Server%20Initiated I am just trying to learn how to use this component. But unable to run this example. When I click the button nothing happens. Does anybody have any idea? There is no error message either.
<h:form>
<h:panelGroup style="display:block; text-align:center;">
<ace:pushButton id="show" value="Show Dialog"
type="button">
<ace:ajax execute="#none" render="#none"
onStart="ice.ace.instance('#{dialog.clientId}').show(); return false;"/>
</ace:pushButton>
</h:panelGroup>
</h:form>
<ace:dialog id="dialog" binding="#{dialog}"
header="A sample dialog overview example"
closable="false"
modal="true"
draggable="false"
showEffect="clip"
hideEffect="fade"
width="400">
<h:form id="inputForm">
<h:panelGrid columns="2" width="100%">
<h:outputLabel id="firstNameLabel" for="firstNameInputField" value="First Name:"/>
<ace:textEntry id="firstNameInputField"
value="#{dialogBean.firstName}" />
<h:outputLabel id="lastNameLabel" for="lastNameInputField" value="Last Name:"/>
<ace:textEntry id="lastNameInputField"
value="#{dialogBean.lastName}"/>
</h:panelGrid>
<h:panelGrid width="100%" style="text-align: center;">
<ace:pushButton id="submitBtn"
value="Click me once done with input">
<ace:ajax execute="#form" render="#all"
onSuccess="ice.ace.instance('#{dialog.clientId}').hide(); "/>
</ace:pushButton>
</h:panelGrid>
</h:form>
</ace:dialog>
<h:form id="outputForm">
<h:panelGrid id="outputPanel" columns="2">
<h:outputLabel value="Entered text: " for="enteredName"/>
<h:outputText id="enteredName" value="#{dialogBean.firstName} #{dialogBean.lastName}"/>
</h:panelGrid>
</h:form>
This is the client side code from the example.
<h:form prependId="false">
<h:commandButton id="show" value="Show Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/>
<ace:dialog id="myDialog"
header="A sample dialog overview example"
width="400">
<h:outputText value="i will fix this"/>
</ace:dialog>
</h:form>
I was able to find the solution to the problem. One of the key problem was that I was suppose to use prependId="false" with form. so now the basic functionality works and on button click the ace:dialog appears.
I am trying to have a p:splitButton p:menuItem launch a p:dialog. I have the following
<h:form>
<p:splitButton value="Action" icon="ui-icon-circle-triangle-s">
<p:menuitem value="New label" icon="ui-icon-newwin">
<p:commandLink onclick="PF('dlg1').show();"/>
</p:menuitem>
</p:splitButton>
<p:dialog header="Modal Dialog" widgetVar="dlg1" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</h:form>
I can't however see the "New label" menu item in the list. Is what I'm trying to achieve possible?
Managed to fix it like so
<h:form>
<p:splitButton value="Action" icon="ui-icon-circle-triangle-s">
<p:menuitem value="New label" icon="ui-icon-newwin" onclick="PF('dlg1').show();" />
</p:splitButton>
<p:dialog header="Modal Dialog" widgetVar="dlg1" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</h:form>
I have a simple input text inside a primefaces dialog with a command button to test if the variable gets his value but when i click the command button with(process="#this" when i delete it the button dont work any more)to print the value of the property it shows always null ... the dialog is rented by a command link from a data grid and when i delete the dialog every thing works fine and the property get th value this is the jsf page :
<p:layoutUnit id="center" position="center"
style="min-height:400px;min-width:300px;overflow-y:hidden !important"
header="#{messages['layout.center.header']}">
<f:view>
<h:form >
<p:dataGrid var="c" value="#{rentMB.carsList}" columns="3"
layout="grid" rows="12" paginator="true" id="cars"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="6,12,16">
<f:facet name="header">
Available Cars
</f:facet>
<p:panel header="#{c.car_brand.brand_name}"
style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<p:graphicImage url="/images/#{c.image}.jpg" />
<p:commandLink
oncomplete="PF('carDialog').show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-key"
style="margin:0 auto;" />
<f:setPropertyActionListener value="#{c}"
target="#{rentMB.selectedCar}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
<h:form>
<p:dialog header="Car Info" id="carInfo" widgetVar="carDialog" width="900px"
height="400px" showEffect="fade" hideEffect="fade"
resizable="false" appendToBody="true">
<p:outputPanel>
<h:panelGrid columns="3" >
<f:facet name="header">
Client informations
</f:facet>
<h:outputLabel for="adress" value="Adress : *" />
<p:inputText id="adress" value="#{rentMB.adress}"
/>
<p:watermark for="adress" value="Adress" />
<p:commandButton action="#{rentMB.affiche}" process="#this" value="Rent" oncomplete="carInfo.hide();" > </p:commandButton>
<p:commandButton type="reset" value="Reset"> </p:commandButton>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</f:view>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
the code of rentMB.affiche() :
public void affiche()
{
System.out.println(this.getAdress());
}
the solution is to put the content of the p:dialog between <h:form></h:form> and add to dialog appendToBody="false"
I have a problem related to a <p:contextMenu> within a <p:dataTable> of PrimeFaces. There is a <p:commandLink> and also some command buttons within columns in this table, when I open the context menu automatically inserted is the value of that column my variable, but the problem is this when I open this <p:contexMenu> menu by clicking the right button on top of one of these link command or command button the value of this column is not passed to variable.
This is my code.
<h:form id="form-arquivo-listar">
<p:contextMenu id="menuArquivos" for="dataArquivos">
<p:menuitem value="Baixar" icon="ui-icon-disk" url="../../arquivos/#{arquivoBean.arquivoSelecionado.nome}" target="arquivo"/>
<p:menuitem value="Excluir" icon="ui-icon-close" actionListener="#{arquivoBean.excluir()}" update="form-arquivo-listar"/>
<p:menuitem value="Transferir" icon="ui-icon-extlink" actionListener="#{arquivoBean.getPastas()}" update=":formArquivoTransferir:treeArquivos" oncomplete="PF('arquivoTransferirDialog').show()"/>
</p:contextMenu>
<p:menubar model="#{arquivoBean.menu}"/>
<p:dataTable id="dataArquivos" value="#{arquivoBean.objetos}" var="o" rowKey="#{o.id}" selection="#{arquivoBean.arquivoSelecionado}" selectionMode="single" styleClass="ui-datatable-no-border">
<f:facet name="header">#{text['arquivo.pagina.listar.titulo']}</f:facet>
<p:column style="width: 20px">
<i class="#{o.tipo.icone}"></i>
</p:column>
<p:column headerText="#{text['arquivo.pagina.form.nome']}" rendered="#{o.tipo.id != 5}">
<p:link value="#{o.nomeOriginal}" href="../../arquivos/#{o.nome}" target="arquivo">
</p:link>
</p:column>
<p:column headerText="#{text['arquivo.pagina.form.nome']}" rendered="#{o.tipo.id == 5}">
<p:commandLink styleClass="link" id="link" value="#{o.nomeOriginal}" actionListener="#{arquivoBean.alterarPasta(o.id)}" update=":form-arquivo-listar" >
</p:commandLink>
</p:column>
<p:column headerText="#{text['arquivo.pagina.form.publico']}" style="width: 50px">
<h:outputText value="#{o.publico ? 'Sim' : 'Não'}" rendered="#{o.tipo.id != 5}"/>
</p:column>
<p:column style="width: 26px">
<p:commandButton id="editarButton" title="Exibir" icon="ui-icon-search" update=":form-arquivo-listar:arquivo-detalhes" oncomplete="PF('arquivoDialog').show()" rendered="#{o.tipo.id != 5}">
<f:setPropertyActionListener value="#{o}" target="#{arquivoBean.objeto}" />
</p:commandButton>
</p:column>
<p:column style="width: 26px">
<p:commandButton icon="ui-icon-pencil" oncomplete="PF('cadastroArquivo').show()">
<f:setPropertyActionListener value="#{o}" target="#{arquivoBean.objeto}" />
</p:commandButton>
</p:column>
<p:column style="width: 26px">
<p:commandButton id="excluirButton" title="#{text['arquivo.pagina.form.confirmacao.botao.titulo']}" icon="ui-icon-close" update=":form-arquivo-listar" actionListener="#{arquivoBean.excluir(o.id)}">
<p:confirm header="#{text['arquivo.pagina.form.confirmacao.titulo']}" icon="ui-icon-alert" message="#{text['arquivo.pagina.form.confirmacao.mensagem']}" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton icon="ui-icon-check" value="#{text['arquivo.pagina.form.confirmacao.sim']}" type="button" styleClass="ui-confirmdialog-yes" />
<p:commandButton icon="ui-icon-close" value="#{text['arquivo.pagina.form.confirmacao.nao']}" type="button" styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</p:column>
</p:dataTable>
<p:dialog id="arquivo-detalhes" widgetVar="arquivoDialog">
<h:panelGrid columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputLabel value="#{text['arquivo.pagina.form.id']}:" />
<h:outputText value="#{arquivoBean.objeto.id}" />
<h:outputLabel value="#{text['arquivo.pagina.form.arquivo']}:" />
<h:graphicImage value="../../arquivos/#{arquivoBean.objeto.nome}" width="200" rendered="#{arquivoBean.isImagem()}" />
<p:media value="../../arquivos/#{arquivoBean.objeto.nome}" width="200" height="80" player="quicktime" rendered="#{arquivoBean.isAudio()}" />
<p:media value="../../arquivos/#{arquivoBean.objeto.nome}" width="300" height="300" rendered="#{arquivoBean.isVideo()}"/>
</h:panelGrid>
</p:dialog>
</h:form>
<p:dialog id="arquivoTransferirDialog" widgetVar="arquivoTransferirDialog">
<h:form id="formArquivoTransferir">
<p:growl id="msg" showDetail="false"/>
<h:panelGrid columns="1">
<p:tree id="treeArquivos" value="#{arquivoBean.raiz}" var="arquivo" selection="#{arquivoBean.raizSelecionada}" selectionMode="single">
<p:treeNode expandedIcon="ui-icon ui-icon-folder-open" collapsedIcon="ui-icon ui-icon-folder-collapsed">
<h:outputText value="#{arquivo.nomeOriginal}" />
</p:treeNode>
</p:tree>
<h:panelGrid columns="2">
<p:commandButton value="Transferir" actionListener="#{arquivoBean.transferirArquivo()}" oncomplete="PF('arquivoTransferirDialog').hide()" update="formArquivoTransferir, :form-arquivo-listar:dataArquivos"/>
<p:commandButton value="Cancelar" onclick="PF('arquivoTransferirDialog').hide()"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="arquivoCriarPasta" widgetVar="arquivoCriarPasta">
<h:form id="formCriarPasta">
<p:growl id="msg" showDetail="false"/>
<h:panelGrid columns="2">
<h:outputText value="Nome" />
<p:inputText value="#{arquivoBean.objeto.nomeOriginal}" required="true"/>
<h:column/>
<h:panelGrid columns="2">
<p:commandButton value="Salvar" actionListener="#{arquivoBean.salvarPasta()}" update="formCriarPasta,:form-arquivo-listar:dataArquivos" oncomplete="PF('arquivoCriarPasta').hide()"/>
<p:commandButton value="Cancelar" onclick="PF('arquivoCriarPasta').hide()"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:dialog>
<p:dialog id="cadastroArquivo" header="#{text['arquivo.pagina.editar.titulo']}" widgetVar="cadastroArquivo" >
<h:form id="form-arquivo-editar" enctype="multipart/form-data">
<p:growl id="msg" showDetail="false"/>
<h:inputHidden value="#{arquivoBean.objeto.id}" rendered="#{arquivoBean.objeto.id!=null}" />
<h:panelGrid columns="2" style="margin:20px">
<p:outputLabel value="#{text['arquivo.pagina.form.arquivo']}" for="inputArquivo" />
<p:fileUpload id="inputArquivo" value="#{arquivoBean.file}" required="true" label="#{text['arquivo.pagina.form.arquivo']}" mode="simple"
disabled="#{arquivoBean.objeto.id!=null and arquivoBean.objeto.id!=0}" />
<p:outputLabel value="#{text['arquivo.pagina.form.nome']}" rendered="#{arquivoBean.objeto.id!=null and arquivoBean.objeto.id!=0}" />
<h:outputText value="#{arquivoBean.objeto.nomeOriginal}" rendered="#{arquivoBean.objeto.id!=null and arquivoBean.objeto.id!=0}" />
<p:outputLabel value="#{text['arquivo.pagina.form.descricao']}" for="inputDescricao" />
<p:inputTextarea id="inputDescricao" value="#{arquivoBean.objeto.descricao}" />
<p:outputLabel value="#{text['arquivo.pagina.form.publico']}" for="inputPublico" />
<p:selectBooleanCheckbox id="inputPublico" value="#{arquivoBean.objeto.publico}" />
<p:outputLabel value="#{text['arquivo.pagina.form.tipo']}" for="inputTipo" />
<p:selectOneMenu id="inputTipo" value="#{arquivoBean.objeto.tipo}" required="true" label="#{text['arquivo.pagina.form.tipo']}"
converter="#{arquivoTipoBean.converter()}">
<f:selectItem itemLabel="#{text['arquivo.pagina.form.tipo.default']}" />
<f:selectItems value="#{arquivoTipoBean.selectObjetos}" />
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="2" style="margin-bottom:10px">
<p:commandButton value="#{text['arquivo.pagina.form.salvar']}" update=":form-arquivo-editar,:form-arquivo-listar"
process="#form" actionListener="#{arquivoBean.salvar}" ajax="false" />
</h:panelGrid>
</h:form>
</p:dialog>
I try to add recaptcha in the Roo-generated xhtml:
<p:dialog id="createDialog" header="#{messages.label_create} Person" modal="true" widgetVar="createDialogWidget" dynamic="true" visible="#{personBean.createDialogVisible}" resizable="true" maximizable="true" showEffect="fade" hideEffect="explode">
<p:ajax event="close" update=":dataForm:data" listener="#{personBean.handleDialogClose}" />
<p:outputPanel id="createPanel">
<h:form id="createForm" enctype="multipart/form-data">
<h:panelGrid id="createPanelGrid" columns="3" binding="#{personBean.createPanelGrid}" styleClass="dialog" columnClasses="col1,col2,col3" />
<p:captcha id="createReCaptcha" theme="white"/>
<p:commandButton id="createSaveButton" value="#{messages.label_save}" action="#{personBean.persist}" update="createPanelGrid :growlForm:growl" />
<p:commandButton id="createCloseButton" value="#{messages.label_close}" onclick="createDialogWidget.hide()" type="button" />
</h:form>
</p:outputPanel>
</p:dialog>
And no recaptha is shown.... Where I am wrong?
Remove the dynamic="true" from your p:dialog