<h:form id="tableForm">
<table id="myTable">
<tr>
<th>HeaderOne</th>
<th>HeaderTwo</th>
<th>HeaderThree</th>
</tr>
<ui:repeat value="#{myBean.List}" var="row">
<tr class="myRows">
<td><input type="text" value="#{row.fieldOne} required="required" /></td>
<td><input type="text" value="#{row.fieldTwo} /></td>
<td><input type="text" value="#{row.fieldThree} /></td>
</tr>
</ui:repeat>
</table>
<p:commandButton id="myButton" value="Load" action="#{myBean.load}" process="#this" update="myTable" />
</h:form>
i want to load some stuff into my inputFields from my bean, but have one field that is required when i press save. So i have to set process to #this.
Afterwards i want my table to be updated. But i doesn't work.
What am i doing wrong?
try updating the form instead
<p:commandButton ... action="#{myBean.load}" process="#this" update="tableForm" />
since the table is not a jsf element but "pure" html, you can't use it's id in jsf elements
Schäbo answer is right (+1) but Primefaces also provides a p:fragment component so you may update only the region you want to:
<p:fragment id="myFragmentReloaded">
<table>
...
</table>
</p:fragment>
and then
<p:commandButton ... action="#{myBean.load}" process="#this" update="myFragmentReloaded" />
Related
I have a table with a list of shows, my idea is to have a button that allows modifying each show:
...
<s:iterator value="%{listShow}" var="show">
<tr>
<td><s:property value="showId"></s:property></td>
<td><s:property value="showName"></s:property></td>
<td><s:property value="showDate"></s:property></td>
<td><s:property value="showPrice"></s:property></td>
<td><s:form action="goModify">
<s:submit value="Modify"></s:submit>
<s:hidden name="showId"></s:hidden>
<s:hidden name="showName"></s:hidden>
<s:hidden name="showDate"></s:hidden>
<s:hidden name="showPrice"></s:hidden>
</s:form></td>
</tr>
</s:iterator>
...
The only thing action "goModify" does is redirect to a modify.jsp file where I want to make the data changes:
<s:form action="modifyAction">
<s:textfield label="ID" name="showId" value="%{showId}"></s:textfield>
<s:textfield label="Show Name" name="showName" value="%{showName}></s:textfield>
<s:textfield label="Date" name="showDate" value="%{showDate}></s:textfield>
<s:textfield label="Price" name="showPrice"value="%{showPrice}></s:textfield>
<s:submit value="Modificar"></s:submit>
</s:form>
The problem that the filled fields do not appear to me.
You are only assigning a name to the hidden fields, not a value. You can use the attribute key instead of name. It will automatically generate HTML with the correct name and value.
<s:iterator value="%{listShow}" var="show">
<tr>
<td><s:property value="showId" /></td>
<td><s:property value="showName" /></td>
<td><s:property value="showDate" /></td>
<td><s:property value="showPrice" /></td>
<td>
<s:form action="goModify">
<s:submit value="Modify" />
<s:hidden key="showId" />
<s:hidden key="showName" />
<s:hidden key="showDate" />
<s:hidden key="showPrice" />
</s:form>
</td>
</tr>
</s:iterator>
If the action goModify does not store the parameters in the value stack (e. g. by storing them in attributes), you may have to change the JSP to access the request parameters directly.
<s:form action="modifyAction">
<s:textfield label="ID" name="showId" value="%{#parameters.showId}" />
<s:textfield label="Show Name" name="showName" value="%{#parameters.showName} />
<s:textfield label="Date" name="showDate" value="%{#parameters.showDate} />
<s:textfield label="Price" name="showPrice" value="%{#parameters.showPrice} />
<s:submit value="Modificar"></s:submit>
</s:form>
However, the best solution for the second JSP would also be to use key instead of name and value. But then you have to make sure to have the values on the value stack.
i'm working in a web application with jsf and primefaces.
My code for the navBar looks as follow:
<p:layoutUnit position="north" >
<h:form>
<img src="resources/images/logo.png" alt="" />
<p:outputLabel value="Rechercher " style="font-size: large"/>
<p:inputText value="#{acount.searchWord}" required="true" requiredMessage="Le titre est requit"/>
<p:commandButton value="Go" action="#{acount.rechercherLivre(acount.searchWord)}" styleClass="btngo" />
<h:link outcome="main.xhtml" value="Accueil" style="margin-left: 400px;font-size: medium"/>
<h:link outcome="Contact.xhtml" value="Contact" style="font-size: medium"/>
<h:link outcome="Info.xhtml" value="Info" style="font-size: medium"/>
<h:link outcome="Login.xhtml" value="Login" style="font-size: medium" rendered="#{!acount.connected}" />
<h:link outcome="exe.xhtml" value="S'enregistrer" style="font-size: medium" rendered="#{!acount.connected}" />
<p:menuButton value="Panier #{shopingCart.produits.size()}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Afficher" action="#{shopingCart.afficherPanier()}"/>
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
<p:menuButton value="Options" rendered="#{acount.connected}" style="color: #045491;background: greenyellow;background-color: yellowgreen;font-size: medium">
<p:menuitem value="Compte" />
<p:menuitem value="Mes Commandes " />
<p:menuitem value="Se deconnecter" action="#{acount.doLogout()}" />
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" />
</p:menuButton>
</h:form>
</p:layoutUnit>
And the image for this code is:
The problem is if i don't put anything in the imput text the action for the commandButton is not executed, also the action method in the menuButton are not executed if i don't put something in the inputText.
I can solve this problem with putting a form for each action method but my navbar got larger and it looks worth.
how can i solve this issues?
If you do not need to post any value to your bean by your commandButton then add process attribute to the commandButton. I think you are trying to leave some of the inputs blank and still send the request, but the problem is that one of them has the required attribute set to 'true'. Remove required attribute form your inputs and add process="#this" to your commandButton. I hope I am right.
I want to convert html table to primeface datatable, I have converted some more table in my project but below code is bit complex so I need your help, here columns are created using different list and rows are from different list.
<table >
<thead>
<tr >
<th style="width:45px;">Id</th>
<th>#{msg['manage.relationship.type.name']}</th>
<c:forEach items="#{manageRelationBean.languageList}" var="languageName" >
<th>#{languageName}</th>
</c:forEach>
<th style="width:75px;">#{msg['manage.relationship.action']}</th>
</tr>
</thead>
<tbody>
<c:forEach items="#{manageRelationBean.languageRelList}" var="languageRelDTO">
<tr>
<td>#{languageRelDTO.relationId}</td>
<td>#{languageRelDTO.relationName}</td>
<c:forEach items="#{languageRelDTO.languageList}" var="relationValues">
<td>#{relationValues.relationValue}</td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</html>
Have you looked at the Showcase example? http://www.primefaces.org/showcase/ui/datatableBasic.jsf
Here is something like your example, for the first few columns. Notice the ForEach within the datatable- This will allow dynamic columns like you have.
<h:form>
<p:dataTable var="languageRelDTO" value="#{manageRelationBean.languageRelList}">
<p:column headerText="Id">
<h:outputText value="#{languageRelDTO.relationId}" />
</p:column>
<p:column headerText="#{msg['manage.relationship.type.name']}">
<h:outputText value="#{languageRelDTO.relationName}" />
</p:column>
<c:forEach items="#{manageRelationBean.languageList}" var="languageName">
<p:column headerText="#{languageName}" />
<h:outputText value="#{languageRelDTO.languageList[languageName.index]}" />
</p:column>
</c:forEach>
</p:dataTable>
</h:form>
Didn't test it, but you should get the idea.
I met a problem for two days. nowhere I advance
my problem is to make a dynamic content in a panel according to the selected element in the list p: selectOneMenu
<h:outputLabel value="Categorie :" />
<p:selectOneMenu value="#{composantbean.selectedCategoryId}" required="true" >
<f:selectItem itemLabel="Select categorie" itemValue="" />
<f:selectItems value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" />
<p:ajax update="panl" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
<p:panel id="panl" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" >
<h:panelGrid id="panlecart" columns="2" cellpadding="5" rendered="true">
<c:forEach items="#{composantbean.categorie.proprietes}" var="var">
<h:outputText value="#{var.nomProp}"/>
<h:inputText value="" />
</c:forEach>
</h:panelGrid>
</p:panel>
content appears this is true but unfortunately it is not synchronized is displayed shift
but if I use another <p: selectOneMenu id = "panel" content is displayed and synchronized
Haw can I fixe my prblem .Please and thank you in advance
As Lucas said, it is a bad idea using c:foreach (and all kind of JSTL) in JSF, especially with ajax.
Here are references you should read, to know more about JSTL in JSF:
JSTL in JSF2 Facelets... makes sense?
https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat
Using ui:repeat in h:panelGrid is not recommended also. You may read the discussion here.
So, IMHO, you should try another approach, such as using dataTable, as stated in above link.
Or, you could use html's table tag (<table>) as replacement of h:panelGrid, with html's tr and td tag inside ui:repeat. For example:
<h:outputLabel value="Categorie :" />
<p:selectOneMenu value="#{composantbean.selectedCategoryId}" required="true" >
<f:selectItem itemLabel="Select categorie" itemValue="" />
<f:selectItems value="#{composantbean.listcat}" var="cat" itemValue="#{cat.nomCat}" itemLabel="#{cat.nomCat}" />
<p:ajax update="panl" event="change" listener="#{composantbean.catListener()}"/>
</p:selectOneMenu>
<p:panel id="panl" header ="Caracteristique selon la categorie" toggleable="true" rendered="true" >
<table>
<ui:repeat value="#{composantbean.categorie.proprietes}" var="var">
<tr>
<td><h:outputText value="#{var.nomProp}" /></td>
<td><h:inputText value="" /></td>
</tr>
</ui:repeat>
</table>
</p:panel>
I've got a login form that looks something like this, using RichFaces and Seam:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
</h:form>
I'd like to be able to allow the user to hit 'enter' and automatically submit the form to login. I've tried using Richfaces' <rich:hotKey /> feature, but I think I'm doing something wrong. The code I've put in looks like this:
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()" />
However, when I hit enter inside the form, nothing happens. Any idea what I'm doing wrong here?
I think you need to use selector property. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
Also, instead of submitting the form, you should click submit button. Something like,
<rich:hotKey key="return"
handler="#{rich:element('loginButton')}.click()"
selector="#loginForm"/>
Try the following code. I hope you can get some idea..
<body>
<h:form id="loginForm">
<h:outputLabel value="Username : " />
<h:inputText id="userNameId" value="#{Login.username}" />
<h:outputLabel value="Password : " />
<h:inputText id="passwordId" value="#{Login.password}" />
<a4j:commandButton id="loginButton" action="#{Login.loginButton}" value="Login" focus="button"/>
<rich:hotKey key="return"
selector="#userNameId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
<rich:hotKey key="return"
selector="#passwordId"
handler="#{rich:element('loginForm:loginButton')}.click();
event.stopPropagation();event.preventDefault();
return false;"/>
</h:form>
</body>
For all those still struggling with this issue, I've finally gotten something that works. My code now looks like this:
<h:form id="loginForm">
<h:outputLabel value="Username" />
<h:inputText value="#{identity.credentials.username}" />
<h:outputLabel value="Password" />
<h:inputText value="#{identity.credentials.password}" />
<h:commandLink action="#{identity.login()}" value="Login" />
<rich:hotKey key="return"
handler="#{rich:element('loginForm')}.submit()"
selector="#loginForm"/>
</h:form>
You can also use a more specific selector so that an enter press only submits the form when the focus is on one of the form fields. Either way, this FINALLY solved my problem.