my xhtml page has this format:
<h:form>
<p:dialog widgetVar="presentDiag" modal="true" closable="true" header="Liste" maximizable="false" dynamic="true">
<p:commandButton value="Submit" id="submit" actionListener="bean.add()"/>
</p:dialog>
</h:form>
<h:form>
<p:tabView>
<p:tab title="....">
</p:tab>
<p:tab title="....">
</p:tab>
<p:tab title="....">
</p:tab>
</p:tabView>
</h:form>
when I click on the submit button the selected tab changed to the first tab
If you wanted to update a form and then exclude something from it, the easiest way would be to use PrimeFaces selectors like so :
<h:form id="form">
<p:dialog widgetVar="presentDiag" modal="true" closable="true" header="Liste" maximizable="false" dynamic="true">
<p:commandButton value="Submit" id="submit" actionListener="bean.add()" update="#(form :not(.tab-view))"/>
</p:dialog>
<h:panelGroup styleClass="tab-view" >
<p:tabView>
<p:tab title="....">
</p:tab>
<p:tab title="....">
</p:tab>
<p:tab title="....">
</p:tab>
</p:tabView>
</h:panelGroup>
</h:form>
you can always reopen a desired tab by using widgetVar attribute.
<p:tabView widgetVar="myTab"> .... </p:tabView>
.
.
.
<p:commandButton value="Submit" id="submit" actionListener="bean.add()" update="someId" oncomplete="myTab.select(2);"/>
but the best thing to do would be not closing it in the first place.
Related
i have a xhtml page which sets the values of my datatable which is in another page and i want to update the datatable when i set a new object which occurs when i click in a commandbutton.
heres my page that sets value: fichas_horas.xhtml
<h:body>
<f:view>
<h:form id = "formulario">
<h1>Medicos</h1>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable id= "tabla" value="#{fichaBean.horas}" var="Grupo_horario" border="1" >
<p:column>
<f:facet name="header">
Hora
</f:facet>
#{fichaBean.Nombrehora(Grupo_horario)}
</p:column>
<p:column>
<f:facet name="header">
Disponibles
</f:facet>
#{fichaBean.disponibles(Grupo_horario.codigo)}
</p:column>
<p:column>
<f:facet name="header">Seleccionar</f:facet>
<p:commandButton id="bespecialidad" action="tipo_ficha" disabled="#{(fichaBean.bloquear(fichaBean.disponibles(Grupo_horario.codigo)))}" value ="seleccionar" >
<f:actionListener binding="#{fichaBean.guardar_ficha(Grupo_horario.codigo)}" />
<f:actionListener binding="#{fichaBean.cargarcolacaja()}" update=":formcolacajas" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
</f:view>
</h:body>
and this one is the datatable that i want to update: lista_espera_caja.xhtml
<h:body>
<f:view>
<h:form id = "formcolacajas">
<h1>Lista de espera a caja</h1>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
#{fichaBean.cargarcolacaja()}
<p:dataTable id= "tabla" value="#{fichaBean.colacaja}" var="Ficha" border="1">
<p:column>
<f:facet name="header">
Turno
</f:facet>
#{fichaBean.nombreturno(Ficha)}
</p:column>
</p:dataTable>
</h:form>
</f:view>
</h:body>
i tried to put an update=":formcolacajas" in my button but it does nothing.
I am trying to submit some data in JSF. The problem is that I have two forms and the button which I want to trigger the update is outside of the forms, here I place my code so that you can understand better what I mean. Because of that I cannot submit any data to the server.
<ui:define name="mainArea">
<h:form id="form">
<div class="row">
<div class="col-md-5">
<p:outputLabel for="rfqName" value="Name" />
<br></br>
<p:inputText id="rfqName" required="true" style="width:100%;"
value="#{data.data.rfqName}" maxlength="100">
<p:ajax event="change" update="#form"/>
</p:inputText>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p:outputLabel for="rfqVersion" value="Version" />
<br></br>
<p:inputText id="rfqVersion" required="true" style="width:60%;"
value="#{data.data.rfqVersion}" maxlength="20"></p:inputText>
</div>
</div>
</h:form>
</ui:define>
<ui:define name="actionSection">
<p:commandButton actionListener="#{logic.close}" value="Proceed" update=":form"
styleClass="pull-right">
</p:commandButton>
<p:commandButton value="Save" styleClass="pull-right" />
</ui:define>
You can use the primefaces RemoteCommand. This allows you to click the button on the form from the outside.
<ui:define name="mainArea">
<h:form id="form">
<div class="row">
<div class="col-md-5">
<p:outputLabel for="rfqName" value="Name" />
<br></br>
<p:inputText id="rfqName" required="true" style="width:100%;"
value="#{data.data.rfqName}" maxlength="100">
<p:ajax event="change" update="#form" />
</p:inputText>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p:outputLabel for="rfqVersion" value="Version" />
<br></br>
<p:inputText id="rfqVersion" required="true" style="width:60%;"
value="#{data.data.rfqVersion}" maxlength="20"></p:inputText>
</div>
</div>
<p:remoteCommand name="remoteClose" actionListener="#{logic.close}"
update=":form" styleClass="pull-right" />
<p:remoteCommand name="remoteSave" value="Save"
styleClass="pull-right" />
</h:form>
</ui:define>
<ui:define name="actionSection">
<p:commandButton type="button" onclick="remoteClose()" value="Proceed" />
<p:commandButton type="button" onclick="remoteSave()" value="Save"
styleClass="pull-right" />
</ui:define>
EDITED
I'm using <p:uploadfile> to upload a image into my project directory for my article, the upload is successful, but i can't view the image right away, but after refreshing my workspace it appers in my article.
UPLOAD methode:
public void upload(FileUploadEvent event) {
try {
new FileUpload().copyFile(event.getFile().getFileName(), event
.getFile().getInputstream());
} catch (IOException e) {
e.printStackTrace();
}
}
COPYFILE methode :
public void copyFile(String fileName, InputStream in) {
try {
OutputStream out = new FileOutputStream(new File(destination
+ fileName));
int read = 0;
byte[] bytes = new byte[1024];
while ((read = in.read(bytes)) != -1) {
out.write(bytes, 0, read);
}
in.close();
out.flush();
out.close();
} catch (IOException e) {
System.out.println(e.getMessage());
}
}
.XHTML: [EDITED PART]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style>
.topAligned {
vertical-align: top;
}
</style>
</h:head>
<h:body>
<p:tooltip />
<h:form id="form">
<p:growl id="notification" showDetail="true" />
<h:panelGrid columns="2" style="width:1220px;">
<h:outputText value="Nos Actualités :"
style="font-size: 30px;line-height: 40px;" />
<p:commandLink title="Ajouter" id="add" onclick="PF('dlg1').show();">
<h:graphicImage value="../img/add.png"
style="width:55px;height:55px;float:right;" />
</p:commandLink>
</h:panelGrid>
<div style="margin-left: 25px;">
<h:panelGrid columns="1">
<ui:repeat value="#{actualiteMBean.actualites}" var="actualite">
<h:outputText value="#{actualite.titreActualite}"
style="font-weight:bold;" />
<h:panelGrid columns="2" styleClass="topAligned"
style="display:block;" cellpadding="10">
<h:graphicImage value="#{actualite.imageActualite}"
style="width:150px; height:150px;" />
<h:panelGrid columns="1">
<div style="text-align: justify;">
<h:outputText value="#{actualite.descriptionActualite}" />
</div>
<h:panelGrid columns="2" style="float:right;">
<p:commandLink title="Modifier" id="modif"
actionListener="#{actualiteMBean.redirect(actualite)}">
<h:graphicImage value="../img/edit.png"
style="width:30px; height:30px;" />
</p:commandLink>
<p:commandLink title="Supprimer" update=":form" id="delete"
actionListener="#{actualiteMBean.delete(actualite)}">
<h:graphicImage value="../img/delete.jpg"
style="width:40px;height:33px;" />
<p:confirm header="Confirmation" message="etes vous sur?"
icon="ui-icon-alert" />
</p:commandLink>
</h:panelGrid>
</h:panelGrid>
</h:panelGrid>
<p:separator />
</ui:repeat>
</h:panelGrid>
</div>
</h:form>
<p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
<p:commandButton value="Oui" type="button"
styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="Non" type="button"
styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>
<p:dialog widgetVar="dlg1" modal="true" resizable="true"
appendTo="#(body)" showEffect="slide" hideEffect="slide"
header="Ajouter une Nouvelle Actualité" showHeader="true">
<h:form id="form1">
<p:wizard widgetVar="wiz" style="width:900px;height:500px;">
<p:tab id="titre" title="titre d'actualite">
<p:panel header="Titre d'actualite">
<h:panelGrid columns="3" cellspacing="10">
<p:outputLabel value=" Titre :" />
<p:inputText id="tit"
value="#{actualiteMBean.nouvelleActualite.titreActualite}"
required="true" requiredMessage="Champ Obligatoir" />
<p:message for="tit" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="image" title="image d'actualite">
<p:panel header="Image d'actualite">
<h:panelGrid columns="4" cellspacing="10">
<p:outputLabel value="Choisir Image :" />
<p:fileUpload id="up" multiple="true"
fileUploadListener="#{actualiteMBean.upload}"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="100000"
description="Select Images" required="true"
requiredMessage="Image Obligatoire" update=":form1:message" />
<p:message for="up" />
<p:message for="up" display="Chargement reussi" id="message" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="descrition" title="decsription d'actualite">
<p:panel header="Description d'actualite">
<h:panelGrid columnClasses="topAligned" columns="3"
cellspacing="10" style="margin:0 none;">
<p:outputLabel value=" Description :" />
<p:inputTextarea id="desc" cols="60" rows="10"
value="#{actualiteMBean.nouvelleActualite.descriptionActualite}"
required="true" requiredMessage="Champ Obligatoir" />
<p:message for="desc" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="validation" title="validation">
<p:panel header="Validation">
<h:outputText
value="#{actualiteMBean.nouvelleActualite.titreActualite}" />
<h:panelGrid columns="2">
<h:graphicImage style="width:150px;height:150px;"
value="#{actualiteMBean.nouvelleActualite.imageActualite}" />
<h:outputText
value="#{actualiteMBean.nouvelleActualite.descriptionActualite}" />
</h:panelGrid>
<h:panelGrid columns="2">
<p:commandButton value="Valider" update=":form :form1"
icon="ui-icon-check" action="#{actualiteMBean.save}"
oncomplete="PF('dlg1').hide();wiz.loadStep (wiz.cfg.steps [0], true)" />
<p:commandButton value="Annuler" icon="ui-icon-cancel"
action="#{actualiteMBean.cancel}"
oncomplete="PF('dlg1').hide();wiz.loadStep (wiz.cfg.steps [0], true)"
update=":form1" />
</h:panelGrid>
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</p:dialog>
</h:body>
</html>
Images of the problem:
after refreshing the project in eclipse and restarting tomcat :
what i want is the result above without refshing project manually every time, is there a way to do it programmatically??
I'm using primefaces 3.2, Mojarra JSF 2.1.3-FCS
Perform a basic example to prove that you can render a form from another form
<h:form id="one" rendered="#{test.enable}">
<p:panelGrid id="panelGrid" style="margin-top:10px">
<f:facet name="header">
<p:row>
<p:column colspan="2" style="font-size: 12px !important;
font-weight: bold;">data</p:column>
</p:row>
</f:facet>
</p:panelGrid>
</h:form>
<h:form id="two">
<p:commandButton value="change" update=":one" actionListener="#{test.see}"></p:commandButton>
</h:form>
After basic example, I try to do with primefaces, using the same idea in p: layoutUnit
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" id="top">
</p:layoutUnit>
<p:layoutUnit position="west" size="200" id="left">
<h:form id="nom">
<h:outputLabel id="nombre2" value="#{home.num}">
</h:outputLabel>
</h:form>
<h:form>
<p:commandButton value="cambia" update=":nom"
actionListener="#{home.ver}"></p:commandButton>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
</p:layoutUnit>
<p:layoutUnit size="50" position="south" id="bottom">
</p:layoutUnit>
</p:layout>
But not work... Any Idea
In order to replace the default Spring security login form I came up with this solution:
<form name="f" action="../j_spring_security_check" method="POST" >
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Login" />
</form>
But instead of plain <form> tag I would like to use <h:form> since Primefaces components only work within <h:form>. Using <h:form> the form action will be set automatically by JSF to the current page, not to the value set by me in the example above. Where to I have to code the action "../j_spring_security_check" now? I tried putting it into the <h:commandButton> as follows but that doesn't work:
<h:form name="f">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputText id="j_password" />
</h:panelGrid>
<h:commandButton value="Click here" action="../j_spring_security_check" />
</form>
It leads to the error message Unable to find matching navigation case with from-view-id '/login.xhtml' for action '../j_spring_security_check' with outcome '../j_spring_security_check'.
Is it the only way to define a navigation case in faces-config.xml? I want to avoid using a bean for this simple use case.
The best solution for me is to use the default <button> tag instead. Since typical button styling is not being applied (in my case I am using Primefaces), I set it manually. Here's the whole result:
<h:outputStylesheet library="primefaces" name="jquery/ui/jquery-ui.css" />
<h:outputStylesheet library="css" name="login.css" />
<div class="message">
<c:if test="#{param.error == 1 and SPRING_SECURITY_LAST_EXCEPTION != null}">
<span class="error">#{SPRING_SECURITY_LAST_EXCEPTION.message}</span>
</c:if>
</div>
<div class="login">
<form action="../j_spring_security_check" method="post">
<h:panelGrid columns="2">
<h:outputText value="Username" />
<h:inputText id="j_username" />
<h:outputText value="Password" />
<h:inputSecret id="j_password" />
</h:panelGrid>
<div class="submit">
<button type="submit" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<span class="ui-button-text">Login</span>
</button>
</div>
</form>
</div>
<h:form id="login" prependId="false" onsubmit="document.getElementById('login').action='j_security_check';">
Your action attribute should be an EL expression like follows:
action="#{managedBean.method}"
Your best chance is to use the onclick property of the button. This is an example with a primefaces commandButton, but it will also work for jsf components because it uses the (native) javascript onclick function.
<h:form>
<p:commandButton value="Submit" onclick="alert('JS!')" actionListener="#{tweetBean.addTweet()}" update=":tabView,:trends,:tweetsnr" />
</h:form>