We Keep Coding

Primefaces-Refreshing drop down list

I have a popup in which you have to select components for you pc. Each component contains a label and a drop down list with all the selected components in the database. Next to the list there is an 'add' button, when clicked it give another popup, which is used when the user does not find what he wants in the list. The add function calls a method which checks the input of the user for already existing inputs and adds if there is none. MY PROBLEM: is that I can not find a solution for refreshing the list which was updated. I am trying to use <p:ajax /> but I keep getting Cannot find component errors.
---HTML CODE----
<form id="dialog">
<h:outputText value="Computer: " styleClass="dialog-labels" />
<ul style="list-style-type: none">
<li>
<div class="dialog-container">
<h:outputLabel value="Processor: " style="float:left;" />
<p:selectOneMenu id="procs" filterFunction="true" filterMatchMode="true" styleClass="dialog-dropdown-list" style="width:15em;">
<f:selectItem itemLabel="Select Processor" itemValue="" noSelectionOption="true" />
<f:selectItems id="list" value="#{javaHTMLConnection.procList}" />
</p:selectOneMenu>
<p:commandButton value="Add" id="addProc" styleClass="dialog-buttons" onclick="PF('addProcBox').show();" style="font-size: 10px;" />
<h:form id="popUp">
<p:dialog header="Add Processor" widgetVar="addProcBox" height="200" width="180" draggable="false" resizable="false" style="font-size:13px;">
<h:outputLabel value="Processor: " style="float:left;" />
<p:inputText id="procInput" value="#{components.procID}"/>
<p:growl id="growl" life="10000" />
<p:commandButton value="Save" styleClass="dialog-bottom-buttons" action="#{components.addProcessor()}" update="growl" onclick="PF('addProcBox').hide();" style="font-size: 10px;" />
<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":dialog:list" />
<p:commandButton value="Cancel" id="CancelAddProc" styleClass="dialog-bottom-buttons" onclick="PF('addProcBox').hide();" style="font-size: 10px;" />
</p:dialog>
</h:form>
</div>
</li>
</form>
----JavaHTMLConnection----
public void onAdd()
{
if(components.addProcessor()==true)
{
components.getAllComponents();
}
}
----Components(Java code)----
public boolean addProcessor()
{
try
{
db.openDatabase();
db.con.setAutoCommit(false);
if (!db.ifExists("processor.name", "processor", procID))
{
db.Entry("processor", procID);
addMessage("Success ! Your input has been saved");
return true;
}
else
{
addMessage("Error, the input already exists");
}
}
catch (SQLException e)
{
try
{
db.con.rollback();
}
catch (SQLException e1)
{
e1.printStackTrace();
}
e.printStackTrace();
}
finally
{
try
{
db.con.setAutoCommit(true);
}
catch (SQLException e)
{
e.printStackTrace();
}
}
return false;
}
P.S.: Don't mind the naming as when this will be figured out everything will be made generic as I need to adapt this to 15 more components

As Emil already mentioned, nested forms are a really bad thing which you should get rid of immediately.
Also, as Emil suggested, that kind of error message is usually related to incorrect component-selectors. Those are mainly caused due to the fact that a parent naming container is missing in the selector. Either determine the correct id using some debugging tool or, instead of
<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":dialog:list" />
try using some of the solutions suggested in this thread: Primefaces - Cannot find component with identifier outside the datatable
I personally prefer to use the following syntax, which relies on a primefaces-method searching for an id in various naming containers:
<p:ajax listener="#{javaHTMLConnection.onAdd()}" update=":#{p:component('list')}" />

First of all, you have nested forms, which you should get rid of.
As for question you should inspect the specific html element (for example by using firebug) to find out the id of it.

p:commandButton action and f:setpropertyactionlistener not invoked in p:columngroup

I need to put child components in primefaces subtable footer (p:columngroup type="footer"), but standard subtable renderer doesn't provide such opportunity. So I have overrided org.primefaces.component.SubTableRenderer to add children rendering:
public class CustomSubTableRenderer extends SubTableRenderer{
#Override
protected void encodeColumnFooter(FacesContext context, SubTable table, Column column) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String style = column.getStyle();
String styleClass = column.getStyleClass();
styleClass = styleClass == null ? DataTable.COLUMN_FOOTER_CLASS : DataTable.COLUMN_FOOTER_CLASS + " " + styleClass;
writer.startElement("td", null);
writer.writeAttribute("class", styleClass, null);
if(column.getRowspan() != 1) writer.writeAttribute("rowspan", column.getRowspan(), null);
if(column.getColspan() != 1) writer.writeAttribute("colspan", column.getColspan(), null);
if(style != null) writer.writeAttribute("style", style, null);
//encode children
for(UIComponent footerColumnChild : column.getChildren()) {
if(footerColumnChild.isRendered()) {
footerColumnChild.encodeAll(context);
}
}
UIComponent facet = column.getFacet("footer");
String text = column.getFooterText();
if(facet != null) {
facet.encodeAll(context);
} else if(text != null) {
writer.write(text);
}
writer.endElement("td");
}
}
When I put some child components in p:column group like:
<p:dataTable>
<p:subTable>
<p:column>..</p:column>
<p:columnGroup type="footer"> <p:row> <p:column colspan="3">
<p:commandButton id="button"
action="#{myBean.someAction}"
oncomplete="jQuery('#select').modal('show');return false;"
value="#{val.add}" alt="#{val.add}"
title="#{val.add}"> </p:commandButton>
<f:setPropertyActionListener value="#{otherBean.id}"
target="#{anotherBean.selectedBackId}" /></p:column> </p:row>
</p:columnGroup> </p:subTable>
</p:dataTable>
Button is rendered and onClick event invokes fine, but neither button's action nor f:setPropertyActionListener don't invokes. How to make them work?
if I change p:columnGroup type="footer" construction to p:column tag than button action and f:setPropertyActionListener both work fine

PrimeFaces has a bug wherein a commandButton or commandLink doesn't fire the action listener if it is located in the header (source - see second defect). I have a hunch you've encountered the same problem in the footer.
This was fixed in a recent release, but it's not yet available to the public. If you want to use a PrimeFaces button (rather than a standard HTML button), you will have to buy a PrimeFaces Elite subscription or compile the source from scratch.

I thing you can put the setPropertyActionListener inside the commandButton like this:
<p:commandButton ...>
<f:setPropertyActionListener value="#{otherBean.id}" target="#{anotherBean.selectedBackId}"/>
</p:commandButton>

<p:commandButton
action="#{customerBean.remove}"
value="Delte"
title="Delete"
update="customer_table">
<f:setPropertyActionListener
target="#{customerBean.customer}"
value="#{cursomer}" />
<p:confirm
header="Confirmation"
message="Are you sure?"
icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
</p:confirmDialog>

JSF: data not showing when editing twice

I have a dataTable with a list of items and a checkbox for selecting an item to edit. Ticking an item and clicking the edit button pops up a component which has fields and update and cancel buttons. Here's what happens.
Dialog appears
I empty all fields and click UPDATE, required messages appear since all fields are empty, data is not saved
Click CANCEL, dialog disappears
Click and edit the same item again
Some fields are not showing. I checked the datatable and database, data for the item still exists. Just not showing on the edit dialog the 2nd time around.
I noticed that the fields not showing are only those that have NULL attributes. NOT NULL fields are fine. I wonder if this has something to do with sessions. (Using Primefaces for all components)
Code for the edit dialog
<p:dialog header="#{bundle.Edit}" modal="true" widgetVar="editDialog" resizable="false">
<h:form id="edit-form">
<p:messages id="edit-error" autoUpdate="true" closable="true"/>
<h:outputLabel value="#{bundle.Name}" for="name" /><span class="required">＊</span>
<p:inputText id="name" value="#{controller.selected.name}" required="true" requiredMessage="#{bundle.Name} #{bundle.FieldIsRequired}" maxlength="45"/>
<h:outputLabel value="#{bundle.Input}" for="input" /><span class="required">＊</span>
<h:selectOneRadio id="input" value="#{controller.selected.input}" required="true" requiredMessage="#{bundle.Input} #{bundle.FieldIsRequired}">
<f:selectItem itemLabel="◯ " itemValue="0" />
<f:selectItem itemLabel="☓ " itemValue="1" />
</h:selectOneRadio>
<h:outputLabel value="#{bundle.IsOption}" for="isOption" /><span class="required">＊</span>
<h:selectOneRadio id="isOption" value="#{controller.selected.isOption}" required="true" requiredMessage="#{bundle.IsOption} #{bundle.FieldIsRequired}">
<f:selectItem itemLabel="◯ " itemValue="0" />
<f:selectItem itemLabel="☓ " itemValue="1" />
</h:selectOneRadio>
<h:outputLabel value="#{bundle.Remark}" for="remark" />
<p:inputTextarea id="remark" value="#{controller.selected.remark}"/>
<p:commandButton action="#{controller.update()}"
value="#{bundle.Save}"
actionListener="#{controller.prepareList()}"
oncomplete="handleEditDialog(xhr, status, args)"
update=":form:datatable :edit-form:edit-error"
/>
<p:commandButton value="#{bundle.Cancel}"
onclick="editDialog.hide(); reset();"
type="button"/>
</h:form>
</p:dialog>
Code for the update function
public String update() {
RequestContext context = RequestContext.getCurrentInstance();
try {
current.setUpdateDate(new Date());
Map<String, Object> param = JsfUtil.getExternal().getSessionMap();
int createUser = (Integer) param.get("LOGIN_ID");
Account account = accountFacade.find(createUser);
current.setUpdateUser(account);
getFacade().edit(current);
search();
prepareList();
JsfUtil.addSuccessMessage(ResourceBundle.getBundle(JsfUtil.getSessionBundle()).getString("Updated"));
updateOk = true;
current = null;
context.addCallbackParam("updated", true);
return "";
} catch (Exception e) {
if (e.getCause().getCause().getMessage().contains("uk_")) {
JsfUtil.addErrorMessage("edit-form:edit-error",JsfUtil.getResourceString("Duplicate"));
context.addCallbackParam("updated", false);
} else {
JsfUtil.addErrorMessage(e, ResourceBundle.getBundle(JsfUtil.getSessionBundle()).getString("PersistenceErrorOccured"));
context.addCallbackParam("updated", false);
}
return null;
}
}

Based on what you are describing I think the following scenario is happening. When you see the form and you delete all fields and you hit save, the components that have no validators are actually overwriting some of the previous property values of your bean. That's why when you reload it for a second edit, you'll notice that all the components that have a validator attached (e.g required = true) are appearing but those with no validators are blank. In reality, you are actually doing a partial update. What you actually need to do is mark all fields as required to avoid that problem.

My teammate just found out a fix for this one. There is a function on the controller generated by NetBeans called prepareList().
public String prepareList() {
recreateModel();
return "";
}
private void recreateModel() {
items = null;
}
Basically we added this on catch block of the update() function. It is called after every unsuccessful update and recreates the model. The bug existed because the field retained its state of not having a value after an unsuccessful update.

Passing value from data table to bean JSF with Confirm Dialog

I'm having trouble with passing a single value from the data table to the backing bean. I always get the value of 0 when I try to print it in the method in the confirm dialog but when I try to print it in the method in the command button, it shows the value that I need. I think it resets the value or whatever.
<p:dataTable id="labLists" var="lab" value="#{coltsysHome.laboratory}" >
.....
<p:column headerText=" ">
<p:commandButton value="DELETE" onclick="confDlg.show()" icon="ui-icon-closethick" action="#{coltsysHome.action}">
<f:setPropertyActionListener value="#{lab.lab_id}" target="#{coltsysHome.lab_id_del}" />
</p:commandButton>
</p:column>
For the confirm dialog:
<p:confirmDialog widgetVar="confDlg" header="DELETE LABORATORY" message="Are you sure you want to delete this lab?">
<h:form id="delDlgForm">
<p:commandButton id="confirm" value="Yes Sure" oncomplete="confDlg.hide()" actionListener="#{coltsysHome.deleteLab(event)}"/>
<p:commandButton id="decline" value="Not Yet" onclick="confDlg.hide()" type="button" />
</h:form>
Bean (RequestScoped):
...getter and setter (lab_id_del)
public void deleteLab(ActionEvent event) {
FacesContext context = FacesContext.getCurrentInstance();
String cpath = context.getExternalContext().getRequestContextPath();
try (Connection conn = dataSource.getConnection()) {
ColtsysDAO coltsysDAO = new ColtsysDAO(conn);
coltsysDAO.deleteLab(lab_id_del, coltsysDAO.getUserID(getUser_name()));
} catch (Exception e) {
e.printStackTrace(System.err);
}
}
public void action() {
System.out.println("lab_id_del: " + lab_id_del);
}

The first and foremost change you need to do is: RequestScoped->ViewScoped as Luiggi Mendoza has suggested. you might need to add process attribute to the p:commandButton with the id of the p:dataTable. Also you can pass the lab object directly into action method without using f:setPropertyActionListener as: action="#{coltsysHome.action(lab)}" and take it as: public String action(Lab lab). Why not actionListener!

How can I show/hide component with JSF?

How can I show/hide component with JSF?
I am currently trying so do the same with the help of javascript but not successfull.
I cannot use any third party libraries.
Thanks| Abhi

You can actually accomplish this without JavaScript, using only JSF's rendered attribute, by enclosing the elements to be shown/hidden in a component that can itself be re-rendered, such as a panelGroup, at least in JSF2. For example, the following JSF code shows or hides one or both of two dropdown lists depending on the value of a third. An AJAX event is used to update the display:
<h:selectOneMenu value="#{workflowProcEditBean.performedBy}">
<f:selectItem itemValue="O" itemLabel="Originator" />
<f:selectItem itemValue="R" itemLabel="Role" />
<f:selectItem itemValue="E" itemLabel="Employee" />
<f:ajax event="change" execute="#this" render="perfbyselection" />
</h:selectOneMenu>
<h:panelGroup id="perfbyselection">
<h:selectOneMenu id="performedbyroleid" value="#{workflowProcEditBean.performedByRoleID}"
rendered="#{workflowProcEditBean.performedBy eq 'R'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.roles}" />
</h:selectOneMenu>
<h:selectOneMenu id="performedbyempid" value="#{workflowProcEditBean.performedByEmpID}"
rendered="#{workflowProcEditBean.performedBy eq 'E'}">
<f:selectItem itemLabel="- Choose One -" itemValue="" />
<f:selectItems value="#{workflowProcEditBean.employees}" />
</h:selectOneMenu>
</h:panelGroup>

Generally, you need to get a handle to the control via its clientId. This example uses a JSF2 Facelets view with a request-scope binding to get a handle to the other control:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html">
<h:head><title>Show/Hide</title></h:head>
<h:body>
<h:form>
<h:button value="toggle"
onclick="toggle('#{requestScope.foo.clientId}'); return false;" />
<h:inputText binding="#{requestScope.foo}" id="x" style="display: block" />
</h:form>
<script type="text/javascript">
function toggle(id) {
var element = document.getElementById(id);
if(element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block'
}
}
</script>
</h:body>
</html>
Exactly how you do this will depend on the version of JSF you're working on. See this blog post for older JSF versions: JSF: working with component identifiers.

Use the "rendered" attribute available on most if not all tags in the h-namespace.
<h:outputText value="Hi George" rendered="#{Person.name == 'George'}" />

You should use <h:panelGroup ...> tag with attribute rendered. If you set true to rendered, the content of <h:panelGroup ...> won't be shown. Your XHTML file should have something like this:
<h:panelGroup rendered="#{userBean.showPassword}">
<h:outputText id="password" value="#{userBean.password}"/>
</h:panelGroup>
UserBean.java:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean
#SessionScoped
public class UserBean implements Serializable{
private boolean showPassword = false;
private String password = "";
public boolean isShowPassword(){
return showPassword;
}
public void setPassword(password){
this.password = password;
}
public String getPassword(){
return this.password;
}
}

One obvious solution would be to use javascript (which is not JSF). To implement this by JSF you should use AJAX. In this example, I use a radio button group to show and hide two set of components. In the back bean, I define a boolean switch.
private boolean switchComponents;
public boolean isSwitchComponents() {
return switchComponents;
}
public void setSwitchComponents(boolean switchComponents) {
this.switchComponents = switchComponents;
}
When the switch is true, one set of components will be shown and when it is false the other set will be shown.
<h:selectOneRadio value="#{backbean.switchValue}">
<f:selectItem itemLabel="showComponentSetOne" itemValue='true'/>
<f:selectItem itemLabel="showComponentSetTwo" itemValue='false'/>
<f:ajax event="change" execute="#this" render="componentsRoot"/>
</h:selectOneRadio>
<H:panelGroup id="componentsRoot">
<h:panelGroup rendered="#{backbean.switchValue}">
<!--switchValue to be shown on switch value == true-->
</h:panelGroup>
<h:panelGroup rendered="#{!backbean.switchValue}">
<!--switchValue to be shown on switch value == false-->
</h:panelGroup>
</H:panelGroup>
Note: on the ajax event we render components root. because components which are not rendered in the first place can't be re-rendered on the ajax event.
Also, note that if the "componentsRoot" and radio buttons are under different component hierarchy. you should reference it from the root (form root).

check this below code.
this is for dropdown menu. In this if we select others then the text box will show otherwise text box will hide.
function show_txt(arg,arg1)
{
if(document.getElementById(arg).value=='other')
{
document.getElementById(arg1).style.display="block";
document.getElementById(arg).style.display="none";
}
else
{
document.getElementById(arg).style.display="block";
document.getElementById(arg1).style.display="none";
}
}
The HTML code here :
<select id="arg" onChange="show_txt('arg','arg1');">
<option>yes</option>
<option>No</option>
<option>Other</option>
</select>
<input type="text" id="arg1" style="display:none;">
or you can check this link
click here