Primefaces galleria not displaying after adding captcha to the xhtml - jsf

On my page galleria was working fine before adding captcha to the code.
After adding captcha to the code galleria is not displaying on page.
I tried to keep both captcha on different form but still it is not working.
Captcha is working fine.
I've no idea what is problem with this.
<h:form id="frmTest">
<center >
<br/><br/>
<table width="70%" border="0">
<tr>
<td width="70%" align="center">
<p:panel >
<p:galleria value="#{LoginBean.imgList}"
var="image" effect="slide"
effectSpeed="1000"
panelWidth="500" panelHeight="300"
frameWidth="100" frameHeight="70"
rendered="true">
<p:graphicImage value="../resources/images/{image}"/>
</p:galleria>
</p:panel>
</td>
<td width="30%">
<p:panel>
<p:commandButton id="btnShowCaptcha"
process="#form"
onclick="captchaDlgWar.show()"
value="Show Captcha"/>
</p:panel>
</td>
</tr>
</table>
</center>
<p:dialog widgetVar="captchaDlgWar" id="capchaDlgId"
hideEffect="explode" showEffect="clip"
modal="true" closable="true" resizable="false"
header="Prove you are human..." width="360" height="190">
<h:panelGrid columns="1">
<p:captcha label="Captcha"
id="captchaId"
language="tr"
required="true"/>
<p:commandButton id="btnContinue"
ajax="false"
value="Continue"
action="#{MyBean.onContinueAction}"/>
</h:panelGrid>
</p:dialog>
</h:form>
MyBean
public String onContinueAction() {
RequestContext.getCurrentInstance().execute("captchaDlgWar.hide()");
return "somePage.xhtml";
}
Thnx.

try taking your dialog outside of your form and add another form inside your dialog
so you'll have one dialog with galeria inside and another dialog inside your dialog make sure you don't nest forms
<h:form.... <p:galleria...</h:form>
and
<p:dialog><h:form.... <p:captcha ...</h:form></p:dialog>
Also
I'd try to use p:panelGrid Primefaces PanelGrid instead of the table

Related

how to Close p:accordionPanel on button click

I am using to enter address field .by default am setting active-index="-1" so the panel will be closed when the page gets loaded.After the details has been entered by user i want the panel area which means i want the accordion panel to be closed on button(save) click.but i tried a lot using java script but am not able to achieve ,and here is page
<h:body>
<ui:composition template="/WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="quotesForm">
<div class="headerbg">
<div id="innerheaderbg">
<div id="iconarea">
<img src="#{request.contextPath}/images/headerimages/productlist.png" />
</div>
<div id="headertextarea">
<p class="headingtext">New Quote</p>
<p id="breadCrumbtext">Order  <img src="#{request.contextPath}/images/error-bullet.gif" />
 Quote List  <img src="#{request.contextPath}/images/error-bullet.gif" />
 New Quote
</p>
</div>
</div>
</div>
<p:growl id="msgs" />
<div class="widget widget-table action-table">
<div class="widget-header" style="text-align:center;padding-top: 52px">
<h3>Create New Quote</h3>
</div>
<div class="widget-content" style="background-color: #DAEDF4;height: 600px;" >
<div id="calender" style="margin-left: 52px;margin-top: -26px">
<table>
<tr>
<td>
<p:outputLabel id="qDate" value="#{quotesBean.qtCreationDate}"></p:outputLabel>
</td>
<td>
<p:calendar id="popup" showOn="button" display="inline" >
<p:ajax event="dateSelect" listener="#{quotesBean.onDateSelect}" update="qDate" />
</p:calendar>
</td>
</tr>
</table>
<p:outputLabel value="Invoice # #{quotesBean.qCount}" style="margin-top:-15px;margin-left:10px;"/>
</div>
<div id="company">
<table align="right" style="margin-right: 52px">
<thead>
<tr>
<th style="text-align: center;padding: 0;"><img src="#{request.contextPath}/images/favicon.ico"/><p:spacer width="5px"/>SolvEdge</th>
</tr>
</thead>
<tr><td style="text-align: center;padding: 0;">Zameen Pallavaram,</td></tr>
<tr><td style="text-align: center;padding: 0;">Chennai,</td></tr>
<tr><td style="text-align: center;padding: 0;">INDIA</td></tr>
</table>
</div>
<h:form id="addForm">
<p:accordionPanel id="accordion" cache="false" activeIndex="-1" style="margin-bottom:20px;width:330px;" widgetVar="acc" >
<p:tab title="Bill To Address:" titleStyle="width:330px;background-color:#DAEDF4" >
<h:panelGrid columns="2">
<h:outputLabel value="Name" />
<h:inputText value="#{quotesBean.name}"/>
<h:outputLabel value="Street" />
<h:inputText value="#{quotesBean.street}"/>
<h:outputLabel value="City" />
<h:inputText value="#{quotesBean.city}"/>
<h:outputLabel value="ZIP" />
<h:inputText value="#{quotesBean.zip}"/>
</h:panelGrid>
<p:commandButton icon="ui-icon-save" value="Save" action="#{quotesBean.saveAddress}" update=":quotesForm:addForm:accordion" ajax="false" onclick="PF('quotesForm:addForm:accordion').hide();"/>
</p:tab>
</p:accordionPanel>
</h:form>
</div>
</div>
<script type="text/javascript">
var link = document.getElementById('quotesForm:popup_input');
link.style.display = 'none';
function closeAccordianPanel()
{
var panel = document.getElementById('quotesForm:addForm:accordion');
link.style.activeIndex = '-1';
/* PF('widget_accordion').unselect(0); */
}
</script>
</h:form>
<br></br>
</ui:define>
</ui:composition>
</h:body>
</html>
Note:Java Script i tried here is nothing worked for me,i would like to close the accordion panel on button click.
I bet you have javascript errors in the console...(PF('quotesForm:addForm:accordion').hide(); is wrong, it should be PF('acc').hide(); IF it works at all (nothing about that in the PrimeFaces docs). And why close a ui component via javascript if you do an 'ajax="false"'. And sending a click event to the tab you want to toggle works, but even better is to use the official client-side api: PF('acc').unselect(...);
Ahhhh... you have additional code below the commandbutton... but there is a wrong widgetVar value... and it is commented out... and the other part does nothing...
Unselect(index of tab) method only hide the p:tab.
If you want to hide your accordionPanel, you can use rendered attribute.
Here is the panel:
<p:panel id="toggleable" header="Toggleable" toggleable="true"
toggleOrientation="horizontal" toggleSpeed="500" closeSpeed="500"
widgetVar="panel" class="left-menu-panel" >
</p:panel>enter code here`
and button or commandLink which collapse panel
<p:commandLink styleClass="open-left-menu-button"
onclick="PF('panel').toggle()">
</p:commandLink>
You can set it with toggleOrientation="horizontal/vertical".
normal panel - not collapsed
collapsed

JSF ajax Call Error

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"

My component's value in a dialog not updated to backing bean

I'm using PrimeFaces 3.5 , and now i want to ask the user to input or choose some data in my dialog (choose oneSelectMenu, or insert data in inputTextarea). I also use table to arrange the UI.
But any value from user in my dialog is not send to my backing bean.
I think it's because i used it in a dialog.
I tried to move one of my oneSelectMenu outside the dialog, and it works fine!
Any body know what's wrong? Any response will be much appreciated.
My backing bean is kind of standard getter and setter.
(I think nothing wrong with my backing bean because it works fine outside the dialog)
And this is my xhtml code :
<p:dialog id="dlgNew" header="New Action Item" widgetVar="dlg1" modal="true" resizable="false"
width="40%" height="55%" appendToBody="true">
<table>
<tr>
<td><p:outputLabel value="Detail"/></td>
<td>:</td>
<td><p:inputTextarea rows="5" cols="40" value="#{aiBean.detail}"/></td>
</tr>
<tr>
<td><p:outputLabel value="Status"/></td>
<td>:</td>
<td><p:selectOneMenu effect="fade" value="#{aiBean.status}">
<f:selectItem itemLabel="Not Started" itemValue="Not Started" />
<f:selectItem itemLabel="On Progress" itemValue="On Progress" />
<f:selectItem itemLabel="Finished" itemValue="Finished" />
</p:selectOneMenu>
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<p:commandButton value="Add" action="#{aiBean.insertAi}"/>
<p:commandButton value="Cancel" onclick="dlg1.hide()"/></td>
</tr>
</table>
Move the p:dialog out of h:form if its in any.
put h:form inside the p:dialog.
<p:dialog id="dlgNew" header="New Action Item" widgetVar="dlg1" modal="true" resizable="false"
width="40%" height="55%" appendToBody="true">
<h:form>
...
...
</h:form>
</p:dialog>

Horizontal display of a list of p:graphicImage and their titles in ui:repeat

I 'm using the tag ui:repeat to display a list of pictures and their titles.
My code is:
<p:dialog id="idSchemaDlg5" widgetVar="schemaDlg" position="10" resizable="true" modal="true" header="Schéma des composants">
<h:panelGrid columns="1">
<ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName" >
<h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}">
<p:graphicImage value="#{imageStreamer.image}" >
<f:param name="pictureName" value="#{imageName}" />
</p:graphicImage>
<h:outputText value="#{imageName}"/>
</ui:repeat>
</h:panelGrid>
</p:dialog>
I would to display the list of pictures horizontally but the list of pictures with this code was vertically displayed.
Any help is welcome.
I would to have this structure in output <table><tbody><tr><td><img1/><title1/></td><td><img2/><title2/></td><img3/><titl‌​e3/><td></td></tr></table>
The <ui:repeat> inside <h:panelGrid> won't generate physically multiple table cells. It will generate only one table cell. In fact, each immediate child UI component of <h:panelGrid> counts as a single table cell. The <ui:repeat> is an UI component.
You need <c:forEach> instead. It's a taghandler and runs during building JSF component tree instead of during generating HTML output. It generates physically multiple JSF components, in contrary to <ui:repeat> which represents physically one JSF component which is reused everytime during generating HTML output.
<h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}">
<c:forEach items="#{imageStreamer.pictureNamesList}" var="imageName">
<h:panelGroup>
<p:graphicImage value="#{imageStreamer.image}">
<f:param name="pictureName" value="#{imageName}" />
</p:graphicImage>
<h:outputText value="#{imageName}"/>
</h:panelGroup>
</c:forEach>
</h:panelGrid>
(note that you need to wrap the image and the text in a <h:panelGroup> to represent a single table cell)
Or, if you insist in using <ui:repeat>, then you have to write down the desired HTML output yourself.
<table>
<tbody>
<tr>
<ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName">
<td>
<p:graphicImage value="#{imageStreamer.image}">
<f:param name="pictureName" value="#{imageName}" />
</p:graphicImage>
<h:outputText value="#{imageName}"/>
</td>
</ui:repeat>
</tr>
</tbody>
</table>
See also:
JSTL in JSF2 Facelets... makes sense?
create table columns dynamically in JSF
you must change the order of the h:panelGrid and p:graphicImage. because you repeat the creation of the h:panelGrid with size() as number of columns. your code becomes:
<p:dialog id="idSchemaDlg5" widgetVar="schemaDlg" position="10" resizable="true" modal="true" header="Schéma des composants">
<h:panelGrid columns="#{imageStreamer.pictureNamesList.size()}">
<ui:repeat value="#{imageStreamer.pictureNamesList}" var="imageName" >
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td> <p:graphicImage value="#{imageStreamer.image}" >
<f:param name="pictureName" value="#{imageName}" />
</p:graphicImage>
</td>
</tr>
<tr>
<td ><h:outputText value="#{imageName}"/></td>
</tr>
</table>
</ui:repeat>
</h:panelGrid>
</p:dialog>

Add a p:commandButton to primefaces header with f:attribute

I have a page with p:datatable and dynamic columns.
I'm trying to add a command button to the headers with an f:attribute as a value for the command button click.
the problem is I don't get to the server at all when pressing the header button.
here is a code snipet
<p:dataTable >
<p:columns value="#{controller.columnsTitles}" var="column" columnIndexVar="colIndex">
<f:facet name="header">
<p:panel >
<table>
<tr>
<th>
<p:panel>
#{column.label}
</p:panel>
</th>
</tr>
<tr>
<th>
<h:panelGroup >
<p:commandButton value="Add" actionListener="#{controller.doStaff}">
<f:setPropertyActionListener value="#{column.value}" target=#{controller.selectedToEdit}" />
</p:commandButton>
</h:panelGroup>
</th>
</tr>
</table>
</p:panel>
</f:facet>
<p:column>
......
</p:column>
</p:columns>
</p:dataTable>
[Edit]
I found a solution for this issue.
To the commandbutton I added an onClick event that pass the parameter selectedToEdit to a javascript function that in her turn calls a p:remoteCommand that pass the parameter to the server. I also changed the actionListener of the commandButton to action and now it's working.
Now the code looks as follow:
<script>
function jsFunc(param)
{
command([{name:'selectedToEdit',value:selectedToEdit}]);
}
</script>
.....
<p:remoteCommand name="command" actionListener="#{controller.selectedToEdit}" />
<p:commandButton value="Add" action="#{controller.doStaff}" onclick="jsFunc('#{column.value}')" />

Resources