c:forEach displays one item double and hides another item - primefaces

I have a c:forEach for a list of categories. And a "sub" c:forEach for items of each category. If an item is deleted from the first category, then the first item of the second category will be displayed double, in other words, it will be displayed with the title of the following item. After Debugging, all the categories and their items are correctly populated, but while updating the page, somehow GET method is fired for this item double and for the next item it is not fired at all. If an item is added to the first category, then last item of the second category is displayed double. Does anyone have an idea?
listItemsMainPage.xhtml
<ui:composition 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"
template="#{viewContextHandler.selectedTemplate}">
<ui:define name="content">
<p:panel>
<h:panelGroup id="sb-itemBrowser-area" layout="block">
<h:form id="sb-itemBrowser-form">
<p:toolbar id="sb-itemBrowser-header">
<p:toolbarGroup align="left">
<h:panelGroup layout="block" style="margin-left: 5px; margin-top: 5px;" >
<h:outputText value="#{msg.itemBrowser}" />
</h:panelGroup>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton id="sb-itemBrowser-refresh-button"
icon="fa fa-refresh"
process="#this"
update="sb-itemBrowser-form"
title="#{msg.refresh}"
action="#{catController.refreshAll()}"/> </p:toolbarGroup>
</p:toolbar>
<ui:include src="/components/categoryViewer.xhtml"/>
<p:blockUI block="sb-itemBrowser-header sb-item-category-viewer" trigger="sb-itemBrowser-refresh-button" />
</h:form>
</h:panelGroup>
<h:panelGroup id="sb-item-config-area" layout="block" styleClass="sb-content-box" style="overflow: hidden;">
<p:panel id="itemDetails" >
<f:facet name="header">
<h:outputText value="#{msgs.item}" />
</f:facet>
<ui:include src="/components/itemDetailsContent.xhtml"/>
</p:panel>
</h:panelGroup>
</p:panel>
</h:panelGroup>
</ui:define>
<ui:define name="dialogs">
<ui:include src="/dialogs/delete.xhtml" />
<ui:include src="/dialogs/upload.xhtml" />
<h:form id="SystemItemViewerForm">
<p:remoteCommand name="checkItemMessages" action="#{notificationController.showItemMessages()}"/>
<ui:include src="/components/systemitem/showSystemItem.xhtml"/>
</h:form>
<ui:include src="/components/systemItemViewer/dialogs/singlesystemitemviewerdialog.xhtml" />
</ui:define>
</ui:composition>
categoryViewer.xhtml
<ui:composition 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:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:panelGroup styleClass="no-padding" layout="block" id="itemCatViewer">
<c:forEach items="#{catController.itemCategoryList}" var="category">
<p:panel id="dynamicid#{category.index}"
toggleable="true"
widgetVar="catpanel#{category.index}"
styleClass="no-padding"
collapsed="#{category.untoggled}"
style="border:none; padding: 0px;">
<p:ajax event="toggle" listener="#{catController.doToggleCategory}" />
<h:panelGroup rendered="#{not empty category.catItems}" style="padding: 0px;">
<c:forEach items="#{category.catItems}" var="catItem">
<h:panelGrid columns="3"
cellspacing="0"
cellpadding="2"
border="0"
style="padding: 0px; #{catItem.disabled ? 'opacity: 0.5;' : ''}"
styleClass="sb-hover-highlight">
<p:commandLink update=":catItemDetails,:deleteCatItemDialogForm:deleteCatItemPopup"
action="#{catItemController.showCatItem}"
process="#this">
<h:outputText rendered="#{! empty catItem.catItemInfo.title}"
value="#{catItem.catItemInfo.title}" />
<h:outputText rendered="#{empty catItem.catItemInfo.title and not empty catItem.catItemInfo.name}"
value="#{catItem.catItemInfo.name}" />
<f:setPropertyActionListener value="#{catItem.name}" target="#{catItemController.catItemName}" />
<f:setPropertyActionListener value="#{catItem.folder}" target="#{catItemController.catItemFolder}" />
</p:commandLink>
</h:panelGrid>
</c:forEach>
</h:panelGroup>
<h:panelGroup layout="block" style="padding: 3px;">
<p:commandButton value="#{msgs.rrm_upload_items}"
icon="sb-btn-icon fa fa-upload"
process="#this"
action="#{itemResourcesController.doPrepareItemUpload}"
update=":modalItemUploadDialog"
oncomplete="PF('dlgUploadItems').show()" >
<f:setPropertyActionListener value="#{category.path}" target="#{itemResourcesController.categorypath}" />
<f:setPropertyActionListener value="#{category.description}" target="#{itemResourcesController.categorydescription}" />
</p:commandButton>
</h:panelGroup>
</p:panel>
</c:forEach>
</h:panelGroup>
</ui:composition>
upload.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<p:dialog id="modalUploadItemDialog" header="#{msgs.rrm_upload_title}" widgetVar="dlgUploadItems" modal="true">
<p:ajax event="close" update=":sb-itembrowser-form:sb-item-category-viewer" listener="#{catItemController.doRefreshItemCategoryViewer}" />
<h:form enctype="multipart/form-data">
<p:fileUpload listener="#{itemResourcesController.handleFileUpload}"
widgetVar="fileuploadComponent"
styleClass="sb-fileupload-big"
mode="advanced"
update=":growl"
process="#form"
multiple="true"
cancelLabel="#{msgs.rrm_upload_break}"
uploadLabel="#{msgs.rrm_upload}"
label="#{msgs.chooseFile}"
sizeLimit="20480000"
invalidFileMessage="Invalid file type."
allowTypes="/(\.|\/)(txt|zip)$/"
sequential="true">
</p:fileUpload>
</h:form>
<script type="text/javascript">
$(document).ready(function()
{
PF('fileuploadComponent').buttonBar.find("button.cancel").bind("click", function(e) {
clearInvalidFileMsg();
});
});
function clearInvalidFileMsg() {
PF('fileuploadComponent').uploadContent.find("tr.ui-state-error").remove();
}
</script>
</p:dialog>
</ui:composition>
CatItemController.java
#ManagedBean(name = "catItemController")
#SessionScoped
public class CatItemController
{
public String doRefreshItemCategoryViewer()
{
list();
catController.refreshAll();
return "";
}
public String list()
{
// calling this method will implicitly update the persistence
// with items from the file system.
this.serviceLocator.getItemManagementBean().syncItemsByCategoryPath();
uploads = null;
this.item= null;
return "listItems";
}
}
CatController.java
#ManagedBean(name = "catController")
#SessionScoped
public class CatController implements Serializable
{
public List<ItemCategory> getItemCategoryList()
{
if (itemCategoryList == null)
{
LOGGER.debug("building global item category list");
itemCategoryList = refreshCategoryList(getItems(), false);
}
return itemCategoryList;
}
private List<ItemCategory> refreshCategoryList(List<Item> items, boolean searchModeActive)
{
List<ItemCategory> currentItemCategoryList = getCategoryList();
for (Item item : items)
{
String itemPath = item.getCategory().getPath();
for (ItemCategory myCat : currentItemCategoryList)
{
String catpath = myCat.getPath().endsWith("/") ? myCat.getPath() : myCat.getPath() + "/";
if (myCat.getItems() == null)
{
myCat.setItems(new ArrayList<Item>());
}
if (catpath.equals(itemPath))
{
ItemInfo itemInfo = otherController.getItemInfo(catpath + item.getName());
if (itemInfo.getTranslatedTitle().toLowerCase().contains(searchString.toLowerCase()))
{
List<ItemFile> itemList = (List<ItemFile>) myCat.getItems();
itemList.add(new ItemFile(item, itemInfo));
ItemFile.setSortMode(ItemFile.SORT_ASC);
Collections.sort(itemList);
int visibleitems = 0;
for (ItemFile vif : itemList)
{
if (vif.isVisible())
{
visibleitems++;
}
}
myCat.setItems(itemList);
myCat.setVisibleitems(visibleitems);
}
}
}
}
if(!CollectionUtils.isEmpty(toogledCategories))
{
for(ItemCategory cat:currentItemCategoryList)
{
if(toogledCategories.contains(cat.getPath()))
{
cat.setToggled(true);
}
}
}
return currentItemCategoryList;
}
}

Related

Wrong row selected for edit after applying filter in prime faces 5.2

i have problem in row selection after applying default filter using primefaces 5.2 and jsf 2.2
Primefaces default filter work fine but when i select row to edit i got a wrong row .
My code is attached below :
<?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">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="../template/template.xhtml">
<ui:define name="container clearfix">
<ui:insert>
<h:form id="Type_Utilisateur_Form">
<p:commandLink action="#{typeUtilisateurBean.create()}"
oncomplete="PF('popAddTypeUtilisateur').show();"
style="font-size: 15px;">
Add user type
</p:commandLink>
<p:outputPanel id="Type_Utilisateur_List">
<p:dataTable var="typeUtilisateur"
value="#{typeUtilisateurBean.listTypeUtilisateur}"
widgetVar="Type_Utilisateur_Table" rows="3" paginator="true"
rendered="true" emptyMessage="No records found with given criteria"
>
<f:facet name="header">
<p:outputPanel >
<p:inputText id="globalFilter"
onkeyup="PF('Type_Utilisateur_Table').filter()"
style="width:150px" placeholder="Search fields" />
</p:outputPanel>
</f:facet>
<p:column headerText="User Type designation"
sortBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterStyle="display:none">
<h:outputText
value="#{typeUtilisateur.designationTypeUtilisateur}" />
</p:column>
<p:column headerText="Actions" style="width:120px">
<p:outputPanel>
<p:commandLink action="#{typeUtilisateurBean.getRow()}"
oncomplete="PF('popEditTypeUtilisateur').show();">
<p:graphicImage value="../template/images/file_edit.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
<p:commandLink action="#{typeUtilisateurBean.delete}"
update=":Type_Utilisateur_Form:Type_Utilisateur_List"
style="float: right;">
<p:graphicImage value="../template/images/file_delete.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
</p:outputPanel>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
<p:dialog widgetVar="popEditTypeUtilisateur" modal="true"
header="EDIT">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value="User Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popEditTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popEditTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
<p:dialog widgetVar="popAddTypeUtilisateur" modal="true" header="Add">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value=" User
Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popAddTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popAddTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
</ui:insert>
</ui:define>
</ui:composition>
Here we go with primefaces example:
What is important:
in this code set editable="true"
p:ajax event="rowEdit" and p:ajax event="rowEditCancel" both listeners
f:facet name="output" and f:facet name="input" for display, and
edit a column with p:rowEditor
CODE .xhtml:
<p:dataTable id="cars1" var="car" value="#{dtEditView.cars1}" editable="true" style="margin-bottom:20px">
<p:ajax event="rowEdit" listener="#{dtEditView.onRowEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{dtEditView.onRowCancel}" update=":form:msgs" />
<p:column headerText="Id">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.id}" /></f:facet>
<f:facet name="input"><p:inputText id="modelInput" value="#{car.id}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Year">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.year}" /></f:facet>
<f:facet name="input"><p:inputText value="#{car.year}" style="width:100%" label="Year"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Brand">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.brand}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.brand}" style="width:100%">
<f:selectItems value="#{dtEditView.brands}" var="man" itemLabel="#{man}" itemValue="#{man}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Color">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{car.color}" /></f:facet>
<f:facet name="input">
<h:selectOneMenu value="#{car.color}" style="width:100%">
<f:selectItems value="#{dtEditView.colors}" var="color" itemLabel="#{color}" itemValue="#{color}" />
</h:selectOneMenu>
</f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
in my table i have column named actions that contains two icons one for update row and the other for delete row.I like to work like that.I have also iput text in order to filter my table and it's work.but if the function PF('carsTable').filter() is called i cannot get the right row selected !
IistUsers.xhtml:
<?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">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="../template/template.xhtml">
<ui:define name="container clearfix">
<ui:insert>
<h:form id="Type_Utilisateur_Form">
<p:commandLink action="#{typeUtilisateurBean.create()}"
oncomplete="PF('popAddTypeUtilisateur').show();"
style="font-size: 15px;">
Add user type
</p:commandLink>
<p:outputPanel id="Type_Utilisateur_List" rendered="true">
<p:dataTable var="typeUtilisateur"
value="#{typeUtilisateurBean.listTypeUtilisateur}"
widgetVar="Type_Utilisateur_Table" rows="3" paginator="true"
rendered="true" emptyMessage="No records found with given criteria"
filteredValue="#{typeUtilisateurBean.filteredTypeUtilisateur}"
id="Type_Utilisateur_Table"
>
<f:facet name="header">
<p:outputPanel autoUpdate="true">
<p:inputText id="globalFilter"
onkeyup="PF('Type_Utilisateur_Table').filter()"
style="width:150px" placeholder="Search fields" />
</p:outputPanel>
</f:facet>
<p:column headerText="User Type designation"
sortBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterBy="#{typeUtilisateur.designationTypeUtilisateur}"
filterStyle="display:none" filterMatchMode="contains">
<h:outputText
value="#{typeUtilisateur.designationTypeUtilisateur}" />
</p:column>
<p:column headerText="Actions" style="width:120px">
<p:outputPanel>
<p:commandLink action="#{typeUtilisateurBean.getRow()}"
oncomplete="PF('popEditTypeUtilisateur').show();"
>
<p:graphicImage value="../template/images/file_edit.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
<p:commandLink action="#{typeUtilisateurBean.delete}"
update=":Type_Utilisateur_Form:Type_Utilisateur_List"
style="float: right;">
<p:graphicImage value="../template/images/file_delete.png"
width="48" height="48"></p:graphicImage>
</p:commandLink>
</p:outputPanel>
</p:column>
</p:dataTable>
</p:outputPanel>
</h:form>
<p:dialog widgetVar="popEditTypeUtilisateur" modal="true"
header="EDIT">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value="User Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popEditTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popEditTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
<p:dialog widgetVar="popAddTypeUtilisateur" modal="true" header="Add">
<p:ajax event="close"
update=":Type_Utilisateur_Form:Type_Utilisateur_List" />
<p:outputPanel autoUpdate="true">
<h:form>
<p:panelGrid columns="2" layout="grid">
<h:outputLabel value=" User
Type designation :" />
<p:inputText id="designationTypeUtilisateur"
value="#{typeUtilisateurBean.typeUtilisateur.designationTypeUtilisateur}" />
</p:panelGrid>
<p:commandButton value="Save" action="#{typeUtilisateurBean.save}"
oncomplete="if (!args.validationFailed) PF('popAddTypeUtilisateur').hide();" />
<p:commandButton value="Cancel"
action="#{typeUtilisateurBean.init}"
oncomplete="PF('popAddTypeUtilisateur').hide();" />
</h:form>
</p:outputPanel>
</p:dialog>
</ui:insert>
</ui:define>
</ui:composition>
TypeUtilisateurBean:
package tn.com.bj.presentation;
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ViewScoped;
import javax.faces.model.ListDataModel;
import org.primefaces.context.RequestContext;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import tn.com.bj.entities.TypeUtilisateur;
import tn.com.bj.service.ITypeUtilisateurService;
#Controller("typeUtilisateurBean")
#Scope("session")
#ViewScoped
public class TypeUtilisateurBean implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
#Autowired
#Qualifier("typeutilisateurService")
private ITypeUtilisateurService typeUtilisateurService;
private TypeUtilisateur typeUtilisateur = new TypeUtilisateur();
private ListDataModel listTypeUtilisateur;
private List<TypeUtilisateur> filteredTypeUtilisateur;
#PostConstruct
public void init() {
listTypeUtilisateur = new ListDataModel();
listTypeUtilisateur.setWrappedData(typeUtilisateurService
.findAll(TypeUtilisateur.class));
}
public void create() {
typeUtilisateur = new TypeUtilisateur();
}
public void getRow() {
typeUtilisateur = (TypeUtilisateur) listTypeUtilisateur.getRowData();
}
public void delete() {
getRow();
typeUtilisateurService.deleteService(typeUtilisateur);
listTypeUtilisateur.setWrappedData(typeUtilisateurService
.findAll(TypeUtilisateur.class));
}
public void save() {
typeUtilisateur = typeUtilisateurService
.saveOrUpdateService(typeUtilisateur);
init();
}
public ITypeUtilisateurService getTypeUtilisateurService() {
return typeUtilisateurService;
}
public void setTypeUtilisateurService(
ITypeUtilisateurService typeUtilisateurService) {
this.typeUtilisateurService = typeUtilisateurService;
}
public TypeUtilisateur getTypeUtilisateur() {
return typeUtilisateur;
}
public void setTypeUtilisateur(TypeUtilisateur typeUtilisateur) {
this.typeUtilisateur = typeUtilisateur;
}
public ListDataModel getListTypeUtilisateur() {
return listTypeUtilisateur;
}
public void setListTypeUtilisateur(ListDataModel listTypeUtilisateur) {
this.listTypeUtilisateur = listTypeUtilisateur;
}
public List<TypeUtilisateur> getFilteredTypeUtilisateur() {
return filteredTypeUtilisateur;
}
public void setFilteredTypeUtilisateur(
List<TypeUtilisateur> filteredTypeUtilisateur) {
this.filteredTypeUtilisateur = filteredTypeUtilisateur;
}
}

How to open a Panel with Drag and Drop of an image?

I would like to open a new Panel in the Center LayoutUnit by drag and drop an image from the west LayoutUnit to the Center LayoutUnit.
The problems that I can't solve are:
I have several images and I would like to differentiate the panel that is going to be open according to the image that is dropped.
The element that I drop is a graphicImage and there is only onclick for the event, ondrop is not possible.
The panels don't change even if I use the onclick.
Please find below the code, could someone help me please?
<h:body>
<p:layout fullPage="true" id="allLayout">
<p:layoutUnit position="north" size="200" resizable="false" closable="true" collapsible="true" >
<h:panelGrid id="monGrid1" columns="1" style="text-align: left;" >
<p:graphicImage value="resources/images/logo_transparent.png" />
<h:outputLabel value="Découverte des Animaux" style="font-size:15px;font-weight:bold;color:#000000;face:Calibri;"/>
</h:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="west" size="290" header="OBJECTS" collapsible="true" resizable="false" style="font-size:12px" >
<h:form>
<h:panelGrid columns="3">
<p:inputText id="keyword" required="true" style="width: 195px"/>
<p:watermark for="keyword" value="..." />
<p:commandButton value="Search"/>
</h:panelGrid>
<p:fieldset legend="Oiseaux" toggleable="true" toggleSpeed="500" collapsed="true" >
<h:panelGrid columns="2" cellpadding="5">
<p:graphicImage id="pic1" value="resources/images/oiseau1.png" onclick="#{menu.setSelectedOption(menu.OPT2)}"/>
<p:graphicImage id="pic2" value="resources/images/oiseau2.png" onclick="#{menu.setSelectedOption(menu.OPT3)}"/>
<p:graphicImage id="pic3" value="resources/images/oiseau3.png" onclick="#{menu.setSelectedOption(menu.OPT4)}"/>
<p:draggable for="pic1;pic2;pic3" helper="clone" revert="true" />
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Chats" toggleable="true" toggleSpeed="500" collapsed="true" >
<h:panelGrid columns="5" >
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Chiens" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Chevaux" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Serpents" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Araignées" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
<p:fieldset legend="Singes" toggleable="true" toggleSpeed="500" collapsed="true">
<h:panelGrid columns="2" cellpadding="5">
</h:panelGrid>
</p:fieldset>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" style="background: transparent ">
<h:form>
<h:panelGroup id="opt1Panel" layout="block" style="height:150px;width:300px;" rendered="#{menu.selectedOption == menu.OPT1}">
<p class="ui-widget-header" style="margin: 0; padding: 5px;">Drop here</p>
<p:droppable onDrop="handleDrop" />
</h:panelGroup>
<p:panel id="opt2Panel" rendered="#{menu.selectedOption == menu.OPT2}">
<p:outputLabel value="Ceci est le panel 2." />
</p:panel>
<p:panel id="opt3Panel" rendered="#{menu.selectedOption == menu.OPT3}">
<p:outputLabel value="Ceci est le panel 3." />
</p:panel>
<p:panel id="opt4Panel" rendered="#{menu.selectedOption == menu.OPT4}">
<p:outputLabel value="Ceci est le panel 4." />
</p:panel>
</h:form>
</p:layoutUnit>
</p:layout>
<script>
function handleDrop(event, ui) {
$(event.target).addClass("ui-state-highlight").find("p").html("Dropped!");
}
</script>
</h:body>
#ManagedBean(name="menu")
#SessionScoped
public class Menu {
private final int OPT1 = 1;
private final int OPT2 = 2;
private final int OPT3 = 3;
private final int OPT4 = 4;
private int selectedOption;
public Menu() {
selectedOption = OPT1;
}
public int getSelectedOption() {
return selectedOption;
}
public void setSelectedOption(int selectedOption) {
this.selectedOption = selectedOption;
}
public int getOPT1() {
return OPT1;
}
public int getOPT2() {
return OPT2;
}
public int getOPT3() {
return OPT3;
}
public int getOPT4(){
return OPT4;
}
}
You should nest a p:ajax into your p:droppable in the target panel.
To identify the given image is a bit tricky. If you have only a few, fix images, you can bind them to Menu bean maually and later compare their clientId (see example below).
An image example:
<p:graphicImage id="pic1" value="pathToYourImage" binding="#{menu.img1}"/>
The droppable target panel:
<h:panelGroup id="opt1Panel" layout="block" style="height:150px;width:300px;" rendered="#{menu.selectedOption == menu.OPT1}">
<p class="ui-widget-header" style="margin: 0; padding: 5px;">Drop here</p>
<p:droppable>
<p:ajax listener="#{menu.actionImageDropped}" update="#form" partialSubmit="true" process="#this" />
</p:droppable>
</h:panelGroup>
Menu bean modifications:
private GraphicImage img1;
public GraphicImage getImg1() {
return img1;
}
public void setImg1(GraphicImage img1) {
this.img1 = img1;
}
If you have a various number of images, the binding is not a solution for you. In that case, you should try to find the given component from the ViewRoot.
This could be helpful: Link
Menu callback:
public void actionImageDropped(DragDropEvent event){
String dragId = event.getDragId();
if(img1.getClientId().equals(dragId)){
selectedOption = OPT1
}else if(...){
...
}
}

Primefaces p:diaolg component not working

i got this error while creating index.xhtml. i'm working with primefaces 3.4
in my page index ,i will display a list of zones and when i click on the add button ,a dialog window should appear.the error is :
"javax.faces.FacesException: Cannot find component with identifier "nZone" referenced from "j_idt10"."
<?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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Listes des zones</title>
<link type="text/css" rel="stylesheet" href="dot-luv/theme.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="left" header="Atividades" resizable="true" closable="true" collapsible="true">
<h:form prependId="false">
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
</h:form>
<h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout">
<h:outputText value="Sair"/>
</h:outputLink>
</p:layoutUnit>
<p:layoutUnit position="center">
<h1>Listes des zones</h1><br/>
<br/><br/>
<h:form prependId="false">
<p:dataTable id="table" var="zone" value="#{ZoneController.listZones}">
<p:column>
<f:facet name="header">
<h:outputText value="Zone"/>
</f:facet>
<h:outputText value="#{zone.nomzone}" />
</p:column>
<f:facet name="header">
<h:outputText value="Modifier"/>
</f:facet>
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
<p:column>
<f:facet name="header">
<h:outputText value="Supprimer"/>
</f:facet>
<h:commandLink action="#{ZoneController.DeleteZone}" value="Supprimer"/>
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
</p:layout>
<p:dialog header="Ajouter Zone" widgetVar="dialogGerLivro" resizable="false" modal="true" showEffect="slide" width="500">
<h:form prependId="false">
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
<h:outputLabel for="titulo" value="Título:" />
<h:inputText id="titulo" value="#{ZoneController.zone.nomzone}"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.SaveZone}" value="Insérer Zone"/>
<p:commandButton update="tabele" oncomplete="dialogGerLivro.hide();" actionListener="#{ZoneController.UpdateZone}" value="Modifier Zone"/>
</h:panelGrid>
</h:form>
</p:dialog>
</h:body>
</ht
<h:panelGrid id="nZone" columns="2" style="margin-bottom:10px">
is inside a h:form which is another NamingContainer, where you
<p:commandLink value="Nouvelle Zone" actionListener="#{ZoneController.preparAddZone()}" update="nZone" oncomplete="dialogGerLivro.show()"/>
and
<p:commandButton actionListener="#{ZoneController.preparEditZone()}" value="Modifier" update="nZone" oncomplete="dialogGerLivro.show()"/>
Try refering to it with update=":nZone". See the link to the other question for more information.

p:dialog doesn't fire ajax close event

My listener method is not fired when I close the dialog box using the close button. I don't understand why happens this...
XHTML page where dialog is located
<?xml version="1.0" encoding="ISO-8859-1"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags"
template="/templates/template.xhtml">
<ui:define name="content">
<f:view>
<p:outputPanel id="opWindowsDlgViewUser">
<p:dialog id="dlgViewUser" widgetVar="wvDlgViewUser"
header="#{personaController.titleDlgViewUser}"
dynamic="true"
modal="true" closable="true" resizable="false">
<p:ajax event="close"
listener="#{sistemaController.onCloseDlgUsuario}"/>
<p:outputPanel id="opViewUser">
<ui:include src="/content.xhtml"></ui:include>
</p:outputPanel>
</p:dialog>
</p:outputPanel>
</f:view>
</ui:define>
</ui:composition >
Listener method
public void onCloseDlgUsuario(CloseEvent event){
System.out.println("onCloseDlgUsuario");
idRol = null;
this.fechaInicial = null;
this.fechaFinal = null;
}
[UPDATE]
Add XHTMl page content.xhtml
content.xhtml
<?xml version="1.0" encoding="ISO-8859-1" ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" >
<script type="text/javascript">
function unloadPage(){
if(#{sistemaController.renderAutoCompletePersonas}){
cleanText('acUsuario_input');
document.getElementById('acUsuario_input').focus();
}
}
</script>
<p:messages showDetail="true" closable="true"/>
<h:panelGrid columns="2">
<p:outputLabel value="Usuario " for="acUsuario"
rendered="#{sistemaController.renderAutoCompletePersonas}"/>
<p:autoComplete id="acUsuario" widgetVar="wvAcUsuario" minQueryLength="3"
completeMethod="#{sistemaController.completeListPersonasDisponibles}" var="p"
value="#{sistemaController.selectedPerson}"
rendered="#{sistemaController.renderAutoCompletePersonas}" scrollHeight="200"
itemLabel="#{p.apePaterno} #{p.apeMaterno} #{p.nombre} #{p.nombre2}"
itemValue="#{p}" converter="personaConverter" >
</p:autoComplete>
</h:panelGrid>
<h:panelGrid columns="2">
<p:outputLabel value="Rol" for="sltUserRol"/>
<p:selectOneMenu id="sltUserRol" value="#{sistemaController.idRol}" >
<p:ajax event="change" update="sltUserRol" />
<f:selectItem itemLabel="--Seleccione un Rol--" noSelectionOption="true" itemDisabled="true"/>
<f:selectItems value="#{sistemaController.listRolesActivos}" var="r"
itemLabel="#{r.valor}" itemValue="#{r.id}"/>
</p:selectOneMenu>
</h:panelGrid>
<h:panelGrid columns="3">
Acceso
<h:panelGroup>
<h:outputText value="Desde " />
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaInicial}" update="clnFechaInicial"/>
<p:calendar id="clnFechaInicial" value="#{sistemaController.fechaInicial}"
widgetVar="wvFechaInicial" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<h:panelGroup>
<h:outputText value=" Hasta "/>
<p:commandButton icon="ui-icon-refresh" title="Limpiar"
actionListener="#{sistemaController.cleanFechaFinal}" update="clnFechaFinal"/>
<p:calendar id="clnFechaFinal" value="#{sistemaController.fechaFinal}"
widgetVar="wvFechaFinal" pattern="dd/MM/yyyy" mode="inline" locale="es"/>
</h:panelGroup>
<p:commandButton id="btnGuardar" title="Guardar" icon="ui-icon-disk" value="Guardar"
rendered="#{sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.addUserToSystem}"
oncomplete="unloadPage()"
update="opDlgUsuario, dtUsersSystem"/>
<p:commandButton id="btnActualizar" title="Actualizar" icon="ui-icon-disk" value="Actualizar"
rendered="#{not sistemaController.renderAutoCompletePersonas}"
actionListener="#{sistemaController.updateUserSystem}"
update="opDlgUsuario, dtUsersSystem"/>
</h:panelGrid>
</ui:composition>

Primefaces and liferay: Single select not working

I'm following the example given at http://www.primefaces.org/showcase/ui/datatableRowSelectionSingle.jsf
I'm using this as a portlet in Liferay. Here is my code:
The HTML:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:form id="form">
<h:panelGrid columns="1" cellpadding="10" width="100%">
<p:dataTable id="campaignTable" var="data"
value="#{campaign.allCampaigns}" selectionMode="single"
rowKey="#{data.campaignId}" selection="#{campaign.selectedCampaign}">
<f:facet name="header">
<p:commandButton type="button" value="Create Campaign" icon="ui-icon-document" update=":form:createForm" onclick="createDialog.show()" />
</f:facet>
<p:column sortBy="#{data.campaignId}">
<f:facet name="header">ID</f:facet>
<h:outputText value="#{data.campaignId}" />
</p:column>
<p:column sortBy="#{data.carrier}">
<f:facet name="header">Carrier</f:facet>
<h:outputText value="#{data.carrier}" />
</p:column>
<p:column sortBy="#{data.shortCode}">
<f:facet name="header">Short Code</f:facet>
<h:outputText value="#{data.shortCode}" />
</p:column>
<p:column sortBy="#{data.sendType}">
<f:facet name="header">Send Type</f:facet>
<h:outputText value="#{data.sendType}" />
</p:column>
<p:column sortBy="#{data.startDate}">
<f:facet name="header">Start Date</f:facet>
<h:outputText value="#{data.startDate.time}">
<f:convertDateTime pattern="MM/dd/yyyy hh:mm a" />
</h:outputText>
</p:column>
<p:column sortBy="#{data.endDate}">
<f:facet name="header">End Date</f:facet>
<h:outputText value="#{data.endDate.time}">
<f:convertDateTime pattern="MM/dd/yyyy hh:mm a" />
</h:outputText>
</p:column>
<p:column sortBy="#{data.messageText}">
<f:facet name="header">Text Message</f:facet>
<h:outputText value="#{data.messageText}" />
</p:column>
<p:column sortBy="#{data.serviceId}">
<f:facet name="header">Service ID</f:facet>
<h:outputText value="#{data.serviceId}" />
</p:column>
<p:column sortBy="#{data.responseKeyword}">
<f:facet name="header">Response Keyword</f:facet>
<h:outputText value="#{data.responseKeyword}" />
</p:column>
</p:dataTable>
</h:panelGrid>
<p:dialog id="createDialog" header="Create Campaign" widgetVar="createDialog">
<h:panelGrid id="createForm" columns="2" cellpadding="5">
<h:outputLabel for="campaignId" value="Campaign ID:" />
<p:inputText value="#{campaign.selectedCampaign.campaignId}" id="campaignId" required="true" label="Campaign ID" />
<h:outputLabel for="startDate" value="Start Date:" />
<p:inputText value="#{campaign.selectedCampaign.startDate}" id="startDate" required="true" label="Start Date" />
<f:facet name="footer">
<p:commandButton id="createCampaignButton" value="Create" update=":growl" actionListener="#{campaign.createCampaign()}" />
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
</ui:composition>
And the backing bean:
#ManagedBean
#ViewScoped
public class Campaign implements Serializable {
private List<CampaignBean> allCampaigns;
private CampaignBean selectedCampaign;
public Campaign() {
MyProxy proxy = new MyProxy();
try {
CampaignsResponse response = proxy.getAllCampaigns();
if (response != null) {
setAllCampaigns(new ArrayList<CampaignBean>(Arrays
.asList(response.getCampaigns())));
}
} catch (RemoteException e) {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Error",
"Problem listing campaigns"));
}
}
public void createCampaign() {
}
/* Getters and Setters */
public List<CampaignBean> getAllCampaigns() {
return allCampaigns;
}
public void setAllCampaigns(List<CampaignBean> allCampaigns) {
this.allCampaigns = allCampaigns;
}
public CampaignBean getSelectedCampaign() {
return selectedCampaign;
}
public void setSelectedCampaign(CampaignBean selectedCampaign) {
this.selectedCampaign = selectedCampaign;
}
}
The form is not populated with the selected row values!
I finally figured out what the problem was. The entire table was inside a "TabView" component. I was using the wrong selector i.e. instead of using update=":form:createForm" I should have used update=":tabView:form:createForm" and remove the type="button" declaration.