Dears, I have the following code:
<p:orderList value="#{admProductView.images}" class="NewProductImageList MarTop10" controlsLocation="none" itemValue="#{npimg}" var="npimg" responsive="true" converter="#{imageConverter}" rendered="#{not empty admProductView.images}">
<p:column class="TexAlCenter" style="width: 100px">
<h:graphicImage value="#{configView.MR.concat(npimg.fileName)}" class="ImageBorder Wid90" />
</p:column>
<p:column class="TexAlCenter">
<p:inputText class="Wid90" value="#{npimg.label}" placeholder="#{msg.label}" />
</p:column>
<p:column class="TexAlCenter" style="width: 30px">
<p:commandButton icon="fa fa-remove White" class="BlueTextButton RaisedButton Fright MarRight20" actionListener="#{admProductView.deleteImage}" title="#{msg.delete}" update="imageList" process="#this">
<f:param name="delimg" value="#{npimg.id}" />
</p:commandButton>
</p:column>
</p:orderList>
The problemn is that the element npimg is being resolved to null on p:inputText line. If I remove the line everything works perfectly.
Glassfish 4.1.1
Mojarra 2.2.12
Primefaces 5.3
Related
<p:dataTable var="dataMap" id="dataTable" value="#{demoManagedBean.resultMap}">
<p:commandLink action="#{demoManagedBean.navigate}" >
<h:outputText value="#{dataMap['Name']}" />
</p:commandLink>
is not working But
<p:dataTable var="dataMap" id="dataTable" value="#{demoManagedBean.resultMap}">
<p:commandLink action="#{demoManagedBean.navigate}" >
<c:set value="#{dataMap['Name']}" var="name" />
<h:outputText value="#{name}" />
</p:commandLink>
is working..
I don't know which makes the first coding to be inactive
This question already has an answer here:
Skip required validation and invoke the application
(1 answer)
Closed 7 years ago.
I have a p:ajax within a form which triggers on change event in a select. Also I have a separate submit button to submit the form.
The form contains multiple validations. I want to bypass all the validations during the p:ajax call. Instead all the validations should happen during form submission.
This is my form: Field1 and Field2 are mandatory. But these validations should be bypassed during p:ajax call which in turn renders Field3 based on the selected Field2 value.
How can I do this?
<h:body>
<h:form id="formId">
<p:outputPanel autoUpdate="true">
<p:message for="field1Id field2Id" />
<p:panel id="panelId">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="Field1:" />
</p:column>
<p:column>
<p:inputText
id="field1Id"
required="true"
requiredMessage="Field1 is Required!"
value="#{testBean.field1}"
size="5"
maxlength="30" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Field2:" />
</p:column>
<p:column>
<p:selectOneMenu
id="field2Id"
value="#{testBean.field2}"
required="true"
requiredMessage="Field2 is Required!">
<f:selectItems
value="#{testBean.fields}"
var="var1"
itemDescription="#{var1.description}"
itemLabel="#{var1.description}"
itemValue="#{var1.id}" />
<p:ajax
process="#form"
event="change" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row rendered="#{testBean.field2 > 0}">
<p:column>
<h:outputText value="Field3:" />
</p:column>
<p:column>
<p:inputText
value="#{testBean.field3}"
size="5"
maxlength="10" />
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton
value="Save"
action="#{testBean.saveForm()}"
process="#form" />
</p:panel>
</p:outputPanel>
</h:form>
</h:body>
You can achieve by below code. My code just add binding attribute(binding="{save}") at the button, and also change required="true" to required="#{not empty param[save.clientId]}"
<h:body>
<h:form id="formId">
<p:outputPanel autoUpdate="true">
<p:message for="field1Id field2Id" />
<p:panel id="panelId">
<p:panelGrid>
<p:row>
<p:column>
<h:outputText value="Field1:" />
</p:column>
<p:column>
<p:inputText
id="field1Id"
required="#{not empty param[save.clientId]}"
requiredMessage="Field1 is Required!"
value="#{testBean.field1}"
size="5"
maxlength="30" />
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Field2:" />
</p:column>
<p:column>
<p:selectOneMenu
id="field2Id"
value="#{testBean.field2}"
required="#{not empty param[save.clientId]}"
requiredMessage="Field2 is Required!">
<f:selectItems
value="#{testBean.fields}"
var="var1"
itemDescription="#{var1.description}"
itemLabel="#{var1.description}"
itemValue="#{var1.id}" />
<p:ajax
process="#form"
event="change" />
</p:selectOneMenu>
</p:column>
</p:row>
<p:row rendered="#{testBean.field2 > 0}">
<p:column>
<h:outputText value="Field3:" />
</p:column>
<p:column>
<p:inputText
value="#{testBean.field3}"
size="5"
maxlength="10" />
</p:column>
</p:row>
</p:panelGrid>
<p:commandButton
value="Save"
binding="{save}"
action="#{testBean.saveForm()}"
process="#form" />
</p:panel>
</p:outputPanel>
</h:form>
</h:body>
This approach is proposed by this link.
If you're willing to use omnifaces, there is an ignoreValidationFailed tag.
Check the example at omnifaces showcase:
<o:form>
...
<h:commandButton value="save valid data" action="#{bean.saveValidData}">
<o:ignoreValidationFailed />
<f:ajax execute="#form" />
</h:commandButton>
</o:form>
I have a TabView with two tabs as shown in the code below. My problem is that only the first dataTable has resizable columns although I have set it on both dataTables whose ids are comments and achivedComments. If I move the dataTables around only the first one has the the columns resizing. When I check the source using viewSource on the browser I notice that is only on the first dataTable not the second. If I put both dataTables on the same tab I also notice that both dataTables have resizable columns i.e they work properly.
<p:dialog closable="true" dynamic="true" header="#{msg['00156']}"
widgetVar="viewCommentsDlg" width="800" modal="true" showEffect="drop"
hideEffect="drop">
<h:form id="viewCommentsForm">
<p:growl showDetail="true" life="2500" />
<p:tabView>
<p:contextMenu for="comments">
<p:menuitem actionListener="#{comment.deleteComment}"
value="#{msg['00232']}"
update=":viewCommentsForm :ietpViewMenuBarForm:ietpViewMenuBar"
icon="ui-icon-trash" global="false"/>
</p:contextMenu>
<p:tab title="#{msg['01094']}"
disabled="#{!comment.commentsAvailable}">
<p:dataTable scrollable="true" scrollHeight="340"
rowKey="#{c.messageID}" value="#{comment.commentList}" var="c"
resizableColumns="true" selection="#{comment.selectedComment}"
selectionMode="single" sortBy="#{c.messageID}" id="comments">
<p:ajax event="rowToggle" global="false"/>
<p:column style="width: 20px">
<p:rowToggler />
</p:column>
<p:column headerText="#{msg['00152']}" sortBy="#{c.messageID}">
<h:outputText value="#{c.messageID}" />
</p:column>
<p:column headerText="#{msg['00626']}" sortBy="#{c.originator}">
<h:outputText value="#{c.originator}" />
</p:column>
<p:rowExpansion>
<h:outputText value="#{c.message}" />
</p:rowExpansion>
</p:dataTable>
</p:tab>
<p:tab title="#{msg['01096']}"
disabled="#{comment.viewArchiveCommentDisabled}">
<p:dataTable scrollable="true" scrollHeight="340"
rowKey="#{ac.messageID}" value="#{comment.archivedCommentList}"
var="ac" resizableColumns="true" selection="#{comment.selectedComment}"
selectionMode="single" sortBy="#{ac.messageID}"
id="archivedComments">
<p:column style="width: 20px">
<p:rowToggler />
</p:column>
<p:column headerText="#{msg['00152']}" sortBy="#{ac.messageID}">
<h:outputText value="#{ac.messageID}" />
</p:column>
<p:column headerText="#{msg['00626']}" sortBy="#{ac.originator}">
<h:outputText value="#{ac.originator}" />
</p:column>
<p:rowExpansion>
<h:outputText value="#{ac.message}" />
</p:rowExpansion>
</p:dataTable>
</p:tab>
</p:tabView>
<p:commandButton onclick="viewCommentsDlg.hide();"
style="float: righ`enter code here`t; margin-top: 10px; width: 80px; margin-bottom: 10px"
type="button" value="#{msg['00138']}" />
</h:form>
</p:dialog>
remove disabled attribute from p:tab then check both tables
I am trying some thing like this:
I have a piece of code, where in a a list of values are displayed.
<h:panelGroup id="table-wrapper">
<p:dataTable value="#{searchBean.listUser}" var="user" rendered="#{not empty searchBean.listUser}" style="width: 10%;">
<p:column headerText="Trigram">
<h:outputText value="#{user.strUserid}"/>
</p:column>
<p:column headerText="First Name">
<h:outputText value="#{user.strFirstname}"/>
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{user.strLastname}"/>
</p:column>
<p:column headerText="Insert PL">
<p:commandLink actionListener="#{searchBean.getRowDetails}" id="plValue" process="#this" title="Insert Leave">
<h:graphicImage url="resources/images/button.png" style="height: 10px;width:10px"/>
<f:attribute name="tri" value="#{user.strUserid}"/>
<f:attribute name="fname" value="#{user.strFirstname}"/>
<f:attribute name="lname" value="#{user.strLastname}"/>
</p:commandLink>
</p:column>
</p:dataTable>
</h:panelGroup>
Here, the actionListener does not fire when the button is clicked? The codes are within the <h:form> tag.
Using JDK6.0 | Jboss As 7.1.1 final | JSF2.0 | PrimeFaces 3.4.2
Why don't you use the example in the Primefaces showcase of instant row selection, where the selected row is displayed in a dialog? If you really need a button, then you can use a commandbutton to set the selectedItem in the backing bean and an oncomplete to show a dialog in the same way
http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf
I have see this problem.Please see my jsf page.
<h:form id="companyList">
<p:contextMenu for="companiesDB" style="height:53px;">
<p:menuitem value=" edit" update="panelGrid" icon="ui-icon-pencil" oncomplete="editCompany.show()" />
<p:menuitem value=" delete" update="panelGrid" icon="ui-icon-closethick" onclick="editCompany.show()" />
</p:contextMenu>
<p:dataTable id="companiesDB" var="companies"
value="#{companyController.companyList}" rowKey="#{companies.pkId}"
selection="#{companyController.selectedCompany}"
selectionMode="single" paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rows="20" >
<p:column headerText="name">
#{companies.companyName}
</p:column>
<p:column headerText="desc">
#{companies.description}
</p:column>
</p:dataTable>
<p:dialog header="edit mode" widgetVar="editCompany"
modal="true" height="160" width="390"
id="dialog" resizable="false">
<p:panelGrid cellpadding="10" id="panelGrid" >
<p:row>
<p:column width="300">
<h:outputText value="name:" style="float:left;" />
</p:column>
<p:column>
<p:inputText value="#{companyController.selectedCompany.companyName}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="desc:" style="float:right;" />
</p:column>
<p:column>
<p:inputText
value="#{companyController.selectedCompany.description}" />
</p:column>
</p:row>
</p:panelGrid>
<br />
<br />
<p:commandButton value="save" icon="ui-icon-check"
style="float:right; margin-right:25px;" update="companiesDB"
oncomplete="addCompany.hide();"
action="#{companyController.insertCompany()}">
</p:commandButton>
</p:dialog>
</h:form>
And console error was :
/company.xhtml #46,91 value="#{companyController.selectedCompany.companyName}": Target Unreachable, 'selectedCompany' returned null
try renaming your dialog id to mydialog (just to be on a safe side)
and update your menu item entry as following (notice the update="mydialog"):
<p:menuitem value="edit" update="mydialog" icon="ui-icon-pencil" oncomplete="editCompany.show()" />
also , make sure the edit button will be enabled only after a selection in table was made... otherwise you will get the null pointer...
you can achieve it with something like
<p:menuitem value="edit" disabled=#{companyController.selectedCompany eq null}.....
and add two p:ajax in your table
<p:dataTable.......>
<p:ajax event="rowSelect" update="contextMenuID" />
<p:ajax event="rowUnselect" update="contextMenuID" />
last thing : add id=contextMenuID to your context menu