I am trying to call a listener inside using p:ajax. I am getting this error when i do it - Unable to attach to non-ClientBehaviorHolder parent
Tried the same with too and I am getting the same error. I think it is the problem with My piece of code is this.
<p:columns rendered="#{someColumns.isColumnVisible(propName)}"
sortBy="#{propName}" style="padding: 0px;"
sortFunction="#{dataNav.sortOrders[propName]}">
<p:outputPanel id="#{propName}Cell" layout="block"
style="width: 100%;
height: 100%; padding: 4px; margin: 0; cursor: pointer;" autoUpdate="true">
<!-- <ui:insert /> -->
<p:ajax event="click" global="true" immediate="true"
listener="#{selectedRowHandler.setSelectedRowKey(rowKey)}"
process="#this" update="#{tableId} #{render}" disabled="#{disabled}" />
<p:ajax event="click" global="true"
listener="#{selectedRowHandler.setSelectedRowKeyOnDblClick(rowKey)}"
process="#this" update="#{tableId} #{render}" disabled="#{disabled}" />
</p:outputPanel>
</p:columns>
I am using primefaces 6.1.
Related
I'm using a p:selectOneMenu to render a list of values. When the user click in the p:selectOneMenu the list of values is being painted below a 'html object tag' that is used to show a PDF. In the image I've attached is possible to see what is my problem.
Here is the code:
<p:layout style="width:100%; height:100%; min-height: 600px;" id="layoutShowScannedDocs" >
<p:layoutUnit position="center" >
<p:outputPanel id="opScannedDoc" style="width: 100%; height: 100%; margin: 0px; padding:0px; z-index:20;">
<object id="iframescanneddoc" type="application/pdf" width="100%" data="...url.." />
</p:outputPanel>
</p:layoutUnit>
<p:layoutUnit position="south" size="60" >
<div style="width: 100%; text-align: center;">
<p:selectOneMenu id="listOfValues" widgetVar="listOfValues" value="#{MyBean.selectedValue}" style="float:center;" >
<p:ajax event="change" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_original}" itemValue="1" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_cambioformato}" itemValue="2" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_docpapel}" itemValue="3" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_parcial}" itemValue="4" />
<f:selectItem itemLabel="#{msgs.field_estadoelaboracion_otros}" itemValue="5" />
</p:selectOneMenu>
</div>
</p:layoutUnit>
</p:layout>
What could I do to see the list of values of the p:selectOneMenu over the 'html object tag'?
Thanks
I have a JSF page which has a table with many columns. When I try to make the columns resizable, the result is very strange and is not the same for all browsers.
For FireFox, the first column ("ID" in the demonstration code) works fine. When you try to push the right boundary of the second column ("Book Name") to the left, its next column is enlaged on both sides. The rest columns only have a limited space to be enlarged.
For Chrome, the situation is more severe. The first column cannot be enlarged. The whole table width is actually shrinking when you try to enlarge the rest columns.
Microsoft Edge behaves more or less the same as FireFox.
I am using Primefaces 5.2 with JSF 2.2 (JavaEE 7) and use GlassFish 4.1 as a server. The development environment is NetBeans 8.0.2 with Bundled Maven 3.0.5.
I include the demonstration code for JSF and CSS, Does anyone know the solution, please help. Thanks in advance.
The JSF page:
<h:head>
<title>Data Table Format</title>
<h:outputStylesheet name="css/datatable-format.css"/>
</h:head>
<h:body>
<h:form>
<p:dataTable styleClass="ui-datatable-hor-scroll" var="book" value="#{publishedBookView.books}" id="viewDataTable" paginator="true" rows="20"
paginatorTemplate="{Calendar} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {Exporters}"
rowsPerPageTemplate="10,20,50,100" resizableColumns="true" liveResize="true" paginatorPosition="top">
<f:facet name="{Calendar}">
<p:outputLabel class="header-calendar">From Date</p:outputLabel>
<p:calendar class="header-calendar" id="fromDate" value="#{book.publishDate}" pattern="dd MMM yyyy" readonlyInput="true">
<p:ajax event="dateSelect" update="viewDataTable" />
</p:calendar>
<p:outputLabel class="header-calendar">To Date</p:outputLabel>
<p:calendar class="header-calendar" id="toDate" value="#{book.publishDate}" pattern="dd MMM yyyy" readonlyInput="true" >
<p:ajax event="dateSelect" update="viewDataTable"/>
</p:calendar>
</f:facet>
<f:facet name="{Exporters}">
<h:commandLink>
<p:graphicImage name="/img/excel.png" styleClass="exporter-button"/>
<p:dataExporter type="xls" target="viewDataTable" fileName="records" />
</h:commandLink>
<h:commandLink>
<p:graphicImage name="/img/csv.png" styleClass="exporter-button"/>
<p:dataExporter type="csv" target="viewDataTable" fileName="records" />
</h:commandLink>
</f:facet>
<p:column headerText="ID" class="book-id-format" sortBy="#{book.bookId}" filterBy="#{book.bookId}" filterMatchMode="contains">
<h:outputText value="#{book.bookId}"/>
</p:column>
<p:column headerText="BOOK Name" class="book-name-format">
<h:outputText value="#{book.bookName}" />
</p:column>
<p:column headerText="Published Date 01" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 02" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 03" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 04" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 05" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 06" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 07" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 08" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 09" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
<p:column headerText="Published Date 10" class="published-date-format">
<h:outputText value="#{book.publishDate}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
The CSS sheet:
.book-id-format {
height: 8px !important;
margin-top: 3px !important;
width: 180px;}
.book-name-format {
height: 8px !important;
margin-top: 3px !important;
min-width: 80px;}
.published-date-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;}
.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
overflow: auto;
width: auto;}
.ui-datatable.ui-widget {
font-size: 50%;}
.ui-paginator {
font-size: x-small;
width: auto;
height: 26px;}
.exporter-button {
float: right;
width: 24px;
margin-right: 5px;
background: none;}
.header-calendar {
float: left;
margin-right: 5px;}
.ui-datepicker {
background: white;
font-size: 70%;}
If you give a full difination for the column width in CSS, it may work all right:
.book-name-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;
min-width: 80px;
max-width: 200px;
}
I have a problem on a page with primefaces framwork, this is my fragment code:
<p:rowExpansion rendered="#{riepilogoExtra.approvato == '0'}" >
<p:panelGrid columns="3" style="width:50px; border: 0px" >
<h:outputText value="Ore" />
<h:outputText value="Minuti" />
<h:outputText value="Note" />
<p:inputText id="QTA_MASSIMAHH" value="#{riepilogoExtra.qtaMassimaHH}" size="1" />
<p:inputText id="QTA_MASSIMAMM" value="#{riepilogoExtra.qtaMassimaMM}" size="1" />
<p:inputTextarea id="NOTE" rows="2" cols="20" value="#{riepilogoExtra.note}" />
</p:panelGrid>
<p:commandButton
ajax="true"
id="update"
value="Salva"
update="#form"
action="#{riepilogoExtraResponsabileManagedBean.update(riepilogoExtra)}"
icon="ui-icon-check"
styleClass="ui-priority-primary" />
</p:rowExpansion>
hy,
if you have the problem for button don't work in the first click you must verify your console javascript you have error, resolve the problem and all is ok :)
I was using Primefaces 3.4. I recently upgraded to primefaces 4.0.
Below code was working fine in 3.4. However after I upgraded to 4.0, my table facet header doesn't align with the column headers.
<p:dataTable id="itunesTopSongsDt"
var="itunesTopSongsDtV"
value="#{applicationAccessMb.itunesTopSongsList}"
resizableColumns="false"
style="width: 600px; float: right; margin-right: 10px; margin-top: 0px;">
<f:facet name="header">
<p:row>
<p:column colspan="3">
<p:outputPanel style="float:left;">
<h:outputText id="itunesTopSongsDtHdr"
value="iTunes Top 10 Songs"/>
</p:outputPanel>
</p:column>
<p:column>
<p:outputPanel style="float:right;">
<p:selectOneMenu id="songsChartCountrySom"
value="#{applicationAccessMb.songChartCountry}"
effect="fade"
style="text-align: left">
<f:selectItems value="#{applicationAccessMb.reportCountry}"/>
<p:ajax process="songsChartCountrySom"
event="change"
listener="#{applicationAccessMb.getItunesTopSongsForCountry}"
update="itunesTopSongsDt"/>
</p:selectOneMenu>
</p:outputPanel>
</p:column>
</p:row>
</f:facet>
<p:column headerText="Rank"
width="30"
style="text-align: center;">
<h:outputText value = "#{itunesTopSongsDtV.rank}"/>
</p:column>
<p:column width="45">
<p:graphicImage url="#{itunesTopSongsDtV.imagePath}" width="45" height="45"/>
</p:column>
<p:column headerText="Artist"
width="200">
<h:outputText value = "#{itunesTopSongsDtV.artist}"
rendered="#{!itunesTopSongsDtV.itunesArtistLinkFound}"/>
<h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesArtistLink}',
'', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;"
rendered="#{itunesTopSongsDtV.itunesArtistLinkFound}">
<h:outputText value = "#{itunesTopSongsDtV.artist}"/>
</h:outputLink>
</p:column>
<p:column headerText="Title"
width="250">
<h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesLink}',
'', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;">
<h:outputText value = "#{itunesTopSongsDtV.title}"/>
</h:outputLink>
</p:column>
</p:dataTable>
See the pictures. Is there any setting I am missing which I need to do in primefaces 4.0
Thanks
Chirag
A very simple solution would be replace the outputPanel by an easy div with align
<div align="left">
<h:outputText id="itunesTopSongsDtHdr" value="iTunes Top 10 Songs"/>
</div>
Primefaces Datatable - 4.0
Remove all style
First Specified table size i.e 700px;
e.g <style="width:700px;float:left;">
or
Specified div
<div style="width:700px;">
<div>Write your Top ten album here </div>
<div>Write datatable here </div>
</div>
I'm facing an issue with the Primefaces Chat demo from the Primefaces showcase. The outputPanel component does not display a scroll bar like in the showcase demo. Here is my code and screenshot below:
<h:head>
<script type="text/javascript">
function handleMessage(data) {
var chatContent = $(PrimeFaces.escapeClientId('form:public'));
chatContent.append(data + '<br />');
//keep scroll
chatContent.scrollTop(200); <----------- have tried "chatContent.height()"
}
</script>
</h:head>
<h:body>
<p:growl id="growl" showDetail="true" />
<h:form id="form">
<p:fieldset id="container" legend="UserChat" toggleable="true">
<h:panelGroup rendered="#{chatView.loggedIn}">
<h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
<p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs" />
<p:dataList id="users" var="user" value="#{chatView.users}" styleClass="usersList">
<f:facet name="header">
Users
</f:facet>
<p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
<f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />
</p:commandButton>
#{user}
</p:dataList>
</h:panelGrid>
<p:separator />
<p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />
<p:spacer width="5" />
<p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
<p:spacer width="5" />
<p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />
</h:panelGroup>
<h:panelGroup rendered="#{not chatView.loggedIn}" >
Username: <p:inputText value="#{chatView.username}" />
<p:spacer width="5" />
<p:commandButton value="Login" actionListener="#{chatView.login}" update="container"
icon="ui-icon-person" />
</h:panelGroup>
</p:fieldset>
<p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
<h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
<p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />
<p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />
<p:spacer />
<p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />
</h:panelGrid>
</p:dialog>
</h:form>
<p:socket onMessage="handleMessage" channel="/chat" autoConnect="true" widgetVar="subscriber"/>
</h:body>
Any clues about what i'm doing wrong?
Thanks and best regards!
The issue may be you didn't specify chatlogs css class, you should add it as below:
<style type="text/css">
.chatlogs {
height: 210px !important;
max-height: 210px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
}
</style>
And if you would like to scroll to bottom, you can try:
chatContent.scrollTop(chatContent[0].scrollHeight);