I use jsf with primefaces's graphicImage to show picture from a url,sometimes,it's work,and some time it show nothing.So i use developer tools and check it,and i found the src attribute append '?pfdrid_c=true' in the end,and if i remove it,it work.Then i try the img to replace graphicImage,it also appeared.Both of they are 400(bad request) in developer tools console,i'm sure the url is no problem,this is my code:
<p:dataTable value="#{myBean.urls}" var="url" emptyMessage=""
selection="#{myBean.selectedUrls}" rowSelectMode="checkbox"
style="text-align: center;" rowKey="#{url}">
<p:column selectionMode="multiple" style="width:16px;"/>
<p:column headerText="image" width="25%">
<p:graphicImage value="#{url}" width="64" height="64"/>
</p:column>
other colemns
</p:dataTable>
this is i use img element code,other things are the same:
<img alt="" src="#{url}" width="36" height="36"/>
what happend to it,how can i figure it out?
Related
I am trying to create OrderList with Primefaces.
This list would make possible changing order of items and allow setting some boolean with a checkbox. Changing the order is fine.
The problem is that every checkbox gets the same id.
When I am clicking on one of them, then the value of all of them change.
Here is my snippet:
<p:orderList id="OrderList" value="#{editBean.visibleitem}" var="item"
itemValue="#{item}" controlsLocation="left" responsive="true"
converter="converter">
<f:facet name="caption">
<div>
<div style="float: left">label</div>
<div style="text-align: right; padding-right: 15px">checkbox</div>
</div>
</f:facet>
<p:column style="width:80%">
<h:outputText value="item" styleClass="bst-text"/>
</p:column>
<p:column style="width:20%; text-align: center">
<p:selectBooleanCheckbox id="id_item"
valueChangeListener="editBean"
value="#{item.object.booleanObj}">
</p:selectBooleanCheckbox>
</p:column>
</p:orderList>
I will be happy if you could help me.
Greetings :)
It is an open enhancement request currently in PrimeFaces 6.2 found here:
https://github.com/primefaces/primefaces/issues/3781
I will see if we can get it implemented before the 7.0 release.
Thank you for your responses. I decided to redesign my UI and now I don't display checkboxes in OrderList Component.
I am trying to show/hide my panels based upon a boolean value present on the backing bean but it's not working as expected and there is no change on the UI.
This works fine for the first time (only one of the panels is shown) when the app loads but then after there is no update performed.
I know that for the update to be performed, the element should exist in the dom already so it doesn't update the panel which is not rendered by the server . But my query is why the other panel (shown when the app loads) doesn't get hidden when the boolean condition changes.
xhtml file
<p:panel>
<h6 align="center" style="width: 14.7em; background-color: #ACBECE;">Case
Type</h6>
<!-- comment type -->
<p:selectOneListbox id="caseTypeId"
value="#{treeBean.caseTypeOption}">
<f:selectItems value="#{treeBean.caseType}" var="X"
itemLabel="#{X}" itemValue="#{X}" />
<p:ajax listener="#{treeBean.caseTypeList}" update=":#{p:component('panel2')} :#{p:component('panel3')}"/>
</p:selectOneListbox>
</p:panel>
<p:panel id="panel2" rendered="#{treeBean.editmode}">
<h6 align="center" style="width: 14.7em; background-color: #ACBECE;">Something
</h6>
<p:selectOneListbox id="somethingId"
value="#{treeBean.somethingOption}">
<f:selectItems value="#{treeBean.something}" var="X"
itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel id="panel3" rendered="#{!treeBean.editmode}">
<h6 align="center" style="width: 14.7em; background-color: #ACBECE;">Anything
</h6>
<p:selectOneListbox id="anythingId"
value="#{treeBean.anythingOption}">
<f:selectItems value="#{treeBean.anything}" var="X"
itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
</h:panelGrid>
Backing bean (omitting details)
if (this.caseTypeOption.equalsIgnoreCase("XXX")) {
this.editmode = false;
} else {
this.editmode = true;
}
wher XXX is one of the options in caseTypeId select box.
How to make this work for both the panels ??
In the update action you should use only the name of the components that you want to update. In your case you should use update=":form:panel2, :form:panel3".
If this panels is in form you should use the form element before the name of the component, otherwise just the name of the component will make the trick.
Instead of rendered attribute , using visible attribute helped me to achieve what I wanted.
So instead of <p:panel id="panel2" rendered="#{treeBean.editmode}">
I used : <p:panel id="panel2" visible="#{treeBean.editmode}">
I want to get selected value of p:column of p:datatable by using javascript(jquery). Do you think is that possible ? I tried several ways but I could not succeed. Any help will be great.
Regards
Here is the sample Code :
<p:dataTable id="attachmentsTable" var="dataRow" value="#{taslakFaturaBean.attachments}" style="width:980px; text-align:center;">
<p:column headerText="ID">
#{dataRow.AttachID}
</p:column>
<p:column headerText="Dosya Tarihi">
#{dataRow.AttachDate}
</p:column>
<p:column headerText="Dosya">
<p:commandButton id="downloadLink" value="İndir" icon="ui-icon-arrowthichk-s" rendered="#{not empty dataRow.AttachData}" ajax="false">
</p:commandButton>
</p:column>
I want to get selected p:column's AttachId when I click downloadLink commondButton by javascript.
If you want pure javascript I think it can be by this way
<script type="text/javascript">
function test(attachId) {
// get attachId
}
</script>
and in your dataTable like this
<input type="button" onlcick="test(#{dataRow.AttachID});" value="GetID" />
if you want to use commandButton you can try to use onclick="test(#{dataRow.AttachID})" but not sure about that :)
Is first time when I am trying to use primefaces orderList component.
I try to add some values in it. I am inserting values but the orderList component doesn't display anything.
Here is how my page looks:
Before using this component, I used a selectManyListBox which displays the data. And looking with the chrome's developer tools, the code is the same:
The code of orderList is:
<p:orderList id="choices" value="#{questionnaireExtendedKeyAttribute.extendedKeyAttributeChoices}" var="item" itemLabel="#{item.text}" itemValue="#{item.code}" controlsLocation="left" responsive="true">
<f:facet name="caption">Available</f:facet>
</p:orderList>
and the code for selectOneListBox is:
<h:selectManyListbox id="choices1" size="10" styleClass="form-control input-sm" style="float: left;" readonly="#{not questionnaireExtendedKeyAttribute.templateSessionData.notPublished}">
<f:selectItems value="#{questionnaireExtendedKeyAttribute.extendedKeyAttributeChoices}"/>
</h:selectManyListbox>
For the orderList I was looking here
Could you tell me where the problem is?
As you can see in the link, that you shared, you have to define columns for oderList. In your case:
<p:column>
<h:outputText value="#{item.text}" />
</p:column>
I have a Primefaces datatable that is inside an accordionPanel
Now when I added a filter to one column, datatable is no more correctly displayed correclty when filter applied.
When debugging, I can see that the org.primefaces.component.datatable.DataTableRenderer is called and it seems to work correctly (adding tr elements), but when I inspect the html in my browser, there are only inputs and plain text.
Here is the rendering of the datatable before filtering:
And here is the rendering of the datatable after selecting a filter value:
And here is a little bit of code that can reproduce the issue:
<p:accordionPanel multiple="true" id="someId" activeIndex="1">
<p:tab title="title" id="tabId">
<p:dataTable var="item" widgetVar="itemTbl" id="itemTbl" value="#{managedBean.items}"
filteredValue="#{managedBean.filtered}" style="margin-top:20px;">
<p:column style="width: 129px !important">
<f:facet name="header">
<h:outputLabel value="Column1"></h:outputLabel>
</f:facet>
<h:outputText value="#{item.id}"></h:outputText>
</p:column>
<p:column style="width: 101px !important" filterBy="name"
filterOptions="#{managedBean.itemOptions}"
filterMatchMode="exact">
<f:facet name="header">
<h:outputLabel value="Column2"></h:outputLabel>
</f:facet>
<h:outputText value="#{item.name}"></h:outputText>
</p:column>
</p:dataTable>
</p:tab>
</p:accordionPanel>
I am using JSF 2.2 (Mojarra) and Primefaces 4.
Any help would be more than appreciated
I finally found out the cause behind this weird behaviour:
My datatable was placed inside a p:outputPanel with autoupdate set to true.
I hope this will be of some help