JSF ajax Call Error - jsf

I am getting the following Error:
Cannot find component with identifier "myForm:display" referenced from "myForm_j_idt32".
my xhtml File :
<div id="divScreen" align="center">
<div id="divPage">
<ui:insert>
<ui:include src="/banner.xhtml"></ui:include>
</ui:insert>
<h:form id="menuBarForm">
<div id="menubar_link">
<p:commandLink value="Home" action="#{loginAct.homeNavigation}" style="color: #ffffff;margin-left: 10px;" ajax="false"></p:commandLink>
<p:commandLink action="#{loginAct.dologout}" style="color: #ffffff;margin-left: 10px;" value="Logout" ajax="false"></p:commandLink>
</div>
</h:form>
<div id="divMnuAndFrm">
<div id="divMnuContnr">
<h:form id="menuForm">
<p:menu style="width: 94%;" model="#{authMenuModel.model}"></p:menu>
</h:form>
</div>
<div id="divFrmContnrwithmenu">
<div style="height: 400px; margin: 10px 0px 0px 0px;width: 100%;">
<h:form id="myForm">
<p:dataTable
var="filem"
value="#{fileViewManagementPnation.data}"
rowKey="#{filem.ftype}"
paginator="true" rows="10"
selection="#{fileViewManagementPnation.selectedFile}"
selectionMode="single"
emptyMessage="No Files Found"
>
<p:ajax event="rowSelect" update="myForm:display" oncomplete="fileDialog.show()"/>
<f:facet name="header">
:: File Management ::
</f:facet>
<p:column sortBy="#{filem.ftype}" filterBy="#{filem.ftype}" headerText="FileType">
#{filem.ftype}
</p:column>
<p:column headerText="Version" sortBy="#{filem.version}">
#{filem.version}
</p:column>
<p:column headerText="Size">
#{filem.fsize}
</p:column>
<p:column headerText="File">
Action
</p:column>
</p:dataTable>
<p:dialog header="File Details" widgetVar="fileDialog" resizable="false" width="400"
showEffect="explode" hideEffect="explode">
<h:panelGrid id="display" columns="2" cellpadding="4">
<f:facet name="header_det">
<p:graphicImage value="/images/gep_logo.gif" />
</f:facet>
<h:outputText value="File Name : " />
<h:outputText value="#{fileViewManagementPnation.selectedFile.ftype}" id="ftype"/>
<h:outputText value="Size" />
<h:outputText value="#{fileViewManagementPnation.selectedFile.fsize}" id="size"/>
<h:outputText value="File Type :" />
<h:outputText value="#{fileViewManagementPnation.selectedFile.version}" id="version"/>
</h:panelGrid>
</p:dialog>
</h:form>
</div>
</div>
</div>
<div id="divFooter">
<p>Developed and Maintained by National Informatics Centre</p>
</div>
</div>
I am trying last two weeks to make it work but still am not getting any answers.
Please kindly help me in this issue.

You should be able to use update=":myForm:display" or update="display" instead of update="myForm:display".
Take a look at NamingContainer in JSF2/Primefaces, it'll give you a bit more background information. It's because myForm:display refers to nested NamingContainer within myForm which is called myForm, but you don't have that. The component you want to update is directly witin the same NamingContainer, namely myForm. So simply call one of the above mentioned and you should be fine.

You are not calling the right component.
You are calling a component withing the same form.
calling myForm:display will look for a component with id myForm inside the current form myForm as in :myForm:myForm:display which you do not have.
So you do not need to specify the full qualified name of the form. You can use the id of the component directly as in:
Both components (the calling component, and the called component) are inside the same form so use: update="display"
So instead you can either call the component directly as in the example above, or call it using its full qualified name update =":myForm:display"

Related

ace:dialog component sample not working

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.

How to update a primefaces datagrid with toggle panels without losing their status

I have a Primefaces datagrid with a bunch of togglable panels.
These panels are updated by an ajax poll.
I would like to refresh the panels without losing their toggle status.
The updateNodes method just ask for new values and return the value object used by the datagrid...
Here is my code:
<h:form id="server_node_form">
<p:poll interval="10" listener="#{serverNodesView.updateNodes}" update="nodeDataGrid" />
<p:dataGrid var="node"
value="#{serverNodesView.dragoNodeGroup.dragoNodes}" columns="3"
layout="grid" rows="10" paginator="false" id="nodeDataGrid" >
<f:facet name="header">
Estados de los nodos del servidor
</f:facet>
<p:panel toggleable="true" collapsed="true"
toggleTitle="InformaciĆ³n detallada del nodo">
<f:facet name="header">
<p:panelGrid columns="2" layout="grid"
styleClass="ui-panelgrid-blank"
columnClasses="ui-grid-col-3,ui-grid-col-9">
<p:graphicImage
name="images/server_#{node.status.toLowerCase()}.png" width="64"
height="64" />
<p:panelGrid columns="1" styleClass="ui-panelgrid-blank">
<h:outputText value="#{node.hostname}"
style="font-weight: bold; font-size: 120%" />
<h:outputText value="#{node.ip}: #{node.status}"
style="font-weight: bold; font-size: 120%" />
<h:outputText value="#{node.alias}"
style="font-weight: bold; font-size: 90%" />
</p:panelGrid>
</p:panelGrid>
</f:facet>
<p:panelGrid columns="2" layout="grid">
<p:outputPanel>
<h:panelGrid columns="2">
<h:outputText value="CPU (utilizada):" />
<h:outputText value="#{node.cpuUsed}" />
<h:outputText value="RAM (utilizada):" />
<h:outputText value="#{node.ramUsed}" />
</h:panelGrid>
</p:outputPanel>
<p:outputPanel>
<h:panelGrid columns="2">
<h:outputText value="ETH1 (entrada):" />
<h:outputText value="#{node.net1in}" />
<h:outputText value="ETH1 (salida):" />
<h:outputText value="#{node.net1out}" />
</h:panelGrid>
</p:outputPanel>
</p:panelGrid>
</p:panel>
</p:dataGrid>
</h:form>
Finally I found a way to update the component without loosing the toggle status of the panels... the bean method updates the array of data used by the panels and the poll updates only the text (you need to inspect in your browser to find the classes used by the component)
In the poll tag you can tell Primefaces to update only certain component classes... It's called "PrimeFaces Selectors" and I found it in a question asked here in stackoverflow
<div class="ui-panelgrid-cell ui-g-12 ui-md-6"><div id="tabViewForm:tabView:server_node_form:nodeDataGrid:0:j_idt70" class="ui-outputpanel ui-widget">
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
<p:poll interval="10" listener="#{serverNodesView.updateNodes}" update="#(.ui-outputpanel) #(.ui-panelgrid)" />

How can i hide the submit button if record not found

I want to disable or hide the commandbutton if no record is found.
I have gooogled but could not find the solution.
Here is the code:
<p:column>
<div style="overflow: auto; width: 100%;">
<p:dataTable var="tPreferences"
value="#{userPreferences.preferences}"
emptyMessage="No Questions Found." id="pTable" styleClass="borderless">
<p:column headerText="PREFERENCES">
<h:outputText id="sName" styleClass="cellLabelMand"
value="#{tPreferences.shortText}" />
<h:outputText value="<br/><br/>" escape="false" />
<h:selectManyCheckbox id="grid"
value="#{tPreferences.preferencesSelectedItem}"
layout="grid" columns="1">
<f:selectItems value="#{tPreferences.catList}" var="pref" />
</h:selectManyCheckbox>
</p:column>
</p:dataTable>
</div>
</p:column>
CommandButton:
<h:commandButton value="Submit" id="btnUserInfo"
onclick="return openUpdateDialog();"
actionListener="#{userPreferences.saveUserPreferences}"
styleClass="richButtonSave" style="background:green;"
disabled="#{empty pTable.tPreferences}" />

Primefaces drop event is not invoked

I am using drag and drop with datagrid.
I expose for your my code.
I am using primefaces 4.0 and have followed the exemple detailed in documentation.
The problem is that the drop function dropQuery is not invoked.
<div id="columnwrap"> <p:droppable for="report" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availablequeries" onDrop="handleDrop" >
<p:ajax listener="#{dragQueryMB.dropQuery}" update="dropArea availablequeries"/>
</p:droppable>
<div id="column1">
<p:fieldset id="report" legend="Report" >
<p:outputPanel id="dropArea">
<h:outputText value="drop here" rendered="#{not empty dragQueryMB.addedQueries}" style="font-size:16px;" />
</p:outputPanel>
</p:fieldset>
</div>
</div>
<div id="column2">
<p:fieldset id="queryfield" legend="Available Queries" >
<p:commandLink value="add new Query" action="createQuery?faces-redirect=true" style="position: right" ></p:commandLink>
<p:dataGrid id="availablequeries" value="#{dragQueryMB.queryList}" var="query" columns="1">
<p:column>
<p:panel id="pnl" header="#{query.queryTitle}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{query.description}" />
</h:panelGrid>
</p:panel>
</p:column>
<p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
</p:dataGrid>
</p:fieldset>
</div>
Method dropQuery:
public void dropQuery(DragDropEvent ddEvent) {
Query query = ((Query) ddEvent.getData());
addedQueries.add(query);
queryList.remove(query);
}

how to refresh referenced part of page with prime faces' p:commandLink?

Environment: Tomcat 6 ,jsf 2.0,prime faces 2.2.1 ,chrome explorer
I want to click the "ViewDetail" link in the left expanded tree and show the product's detail info. But the code below didn't work.
Then I add the attribute ajax="false" to the link, it seems work. But the "p:treeTable" which lies on left part of the page is
also refreshed and collapsed. So how can I do for this: click the link on the left expanded tree node, show the info on the right part
of the page,and keep the left expanded tree node still expanded.
<h:form id="BizTypeTreeTableForm" >
<p:layout fullPage="true">
<p:layoutUnit id="left" position="left" scrollable="true" width="350" resizable="true" closable="false" collapsible="true" minWidth="250" >
<p:treeTable id="BizTypeTreeTable" value="# {treeTableController.root}" var="treeTable">
<p:column>
<f:facet name="header">ProductName</f:facet>
<h:outputText value="#{treeTable.TYPENAME.value }" />
</p:column>
<p:column style="width:5%">
<f:facet name="header">Action</f:facet>
<p:commandLink value="ViewDetail" update="content" action="#{treeTableController.showDetail}">
</p:commandLink>
</p:column>
</p:treeTable>
</p:layoutUnit>
<p:layoutUnit id="center" rendered="true" position="center" style="text-align:left;" scrollable="true" >
<h:outputText value="Please click the left tree node" rendered="# {allTabManager.productObject.TypeNo.value eq null}"/>
<div id="content" class="ui-widget">
<div class="post">
<ui:insert name="content_tab" >...</ui:insert>
</div>
</div>
</p:layoutUnit>
</p:layout>
</h:form>
The update must point to a real JSF component in the tree, not to a plain HTML element.
Replace
<div id="content" class="ui-widget">
by
<h:panelGroup layout="block" id="content" class="ui-widget">
A panelgroup with layout="block" will render a <div> instead of a <span>.
I think your reference to the id is not correct since the div and the p:layout are not the same level.
But you can either try to get the absolute id by using update=":content" or update the whole p:layoutUnit:
<p:commandLink value="ViewDetail"
update="center"
action="#{treeTableController.showDetail}">

Resources