I have a situation where I have a p:imageSwitch and a ui:repeat to show a few images and some image data.
They are placed in a p:panel like this:
<p:imageSwitch id="mediaSwitcher" effect="fade" widgetVar="switcher" slideshowAuto="false">
<ui:repeat value="#{mediaListBean.items}" var="item">
SHOW IMAGE
SHOW IMAGE DATA
</ui:repeat>
</p:imageSwitch>
The thing is that sometimes, not all the time, the image switcher will show no images even if there should be images in the items list.
When this happens a simple F5 is enough for it to show correctly.
So my thought is that the frontend doesnt wait for the backend to get all the data from the backend and instead it just thinks that it is empty and shows no list. Then the second time the data is already in my bean and can be loaded directly.
Is there a good way to make the frontend wait for the server? I have tried to do an update on the image switcher when the page has loaded but that doesnt help :(
So I figured it out. The problem was actually in the database. I did an insert that has a column with "validFrom" that had second precision. And when I inserted something and tried to view it the same second it would not show up. So all I had to do was add a >= to my sql query instead of just >.
Really silly error by me.
Related
I am developing a primefaces 5.2 application and using tomcat. I have a file upload component. For the file upload component to work, I changed the enctype. Later I decided to split the form into two. That's where my problems started. When I have two forms such as this
<h:form id="mainForm">
</h:form>
<h:form id="uploadForm" enctype="multipart/form-data">
</h:form>
does not work. Even the first form requests are not submitted anymore. If I take out the enctype from the second form, everything works.
I have looked at the data going across the network for the second form with and without the form-data. It looks like data is the same using Firebug.
Since it does not give me any error messages, I am kind of stuck. Where should I look? Thanks.
What's interesting is I add the enctype of form-data to the first form and remove from the second, things still work.
The problem is the fact that I have not added the primefaces filter. Now that I have added the filter to web.xml. My problem becomes why does it not work in IE 10 consistently. It works the first time, but does not work on subsequent refreshes.
I have not been able to figure it out yet. It seems if I change compatibility mode, the app starts working but after every page refresh (non-ajax), it goes back to a weird behaviour where first click does not work but second one does...Almost as if some javascript problem...
That's related to an IE problem/single sign on filter. Read more about it another question.
I am displaying records using datatable. I am showing a edit & delete button for each row. But now I want to show edit/delete button only for first 30 records. Can someone tell me how can I do this?
First of all define rowIndexVar attribute value for p:datatable
<p:dataTable rowIndexVar="rowIndex">
Now you can achieve it client side using rendered attribute :
rendered="#{rowIndex lt 30}"
Since you are using primefaces button then code would be :
<p:commandButton value="edit/delete" rendered="#{rowIndex lt 30}" />
Steps:
You want the button to conditionally render, so confirm that you
understand how to conditionally render a component (use rendered).
You want to only render the first 30 records, so confirm that you
understand how to access the loop index.
Combine the two, and you have a working solution.
If you have any specific problem performing these steps that you cannot solve yourself, please feel free to post another question.
I feel that your question lacks information but I'll try to be of some help..
You seem to be using JSF. Since you are using JSF you'd probably best solve this on the server side, in your backing-bean.
I'm using Primefaces 3.3.1 with Tomcat 7.0.22.0.
I have p:dataTable which has p:inputText in it. The id of that p:dataTable is "houseTabID:tabView:form0:table". This is copy-pasted from HTML source. And I let dialog (which is outside of the form dataTable resides) open by button in p:dataTable, and p:commandButton in that dialog updates the dataTable.
p:commandButton looks like this;
<p:commandButton ajax="true" action="#{myBean.setInputText()}"
value="OK"
update="#{myBean.getUpdateTarget(0)}"/>
myBean.getUpdateTarget(0) retruns proper string to point target component.
I can successfully update whole dataTable by specifying "houseTabID:tabView:form0:table" (meaning myBean.getUpdateTarget(0) returns that string). But I have many lines in the table so updating whole table takes longer to finish, and scroll position is reset which is really irritating. That makes me want to update only one row in the table, not whole.
So I first returned "houseTabID:tabView:form0:table:inputBox" to update p:inputText that I want to update. In p:dataTable I have something looks like this;
<p:column headerText="Value"
width="300" style="height:16px; font-size:9pt;">
<p:inputText id="inputBox" value="#{myItem.value}"
style="width:95%; height:11px; font-size:9pt;">
<f:ajax execute="#this" event="blur" />
</p:inputText>
</p:column>
Result: no update, no error log. I know "houseTabID:tabView:form0:table:inputBox" won't work since it does not specify row in table. So by using rowIndexVar, I tried with "houseTabID:tabView:form0:table:0:inputBox" with making :0: part from rowIndexVar. The string is copy-pasted from HTML source. But unfortunatelly, I got exception.
javax.faces.FacesException: Cannot find component with identifier ":houseTabID:tabView:form0:table:0:inputBox" referenced from "houseTabID:j_idt181:j_idt186".
Why? There is obviously "houseTabID:tabView:form0:table:0:inputBox", I see it on HTML source, and I can update whole talbe with "houseTabID:tabView:form0:table" but throw exception with "houseTabID:tabView:form0:table:0:inputBox"? It does not make sense to me. Also, then, why it won't throw any exception or spill out error log with "houseTabID:tabView:form0:table:inputBox"? I verified HTML source of that p:commandButton;
onclick="PrimeFaces.ab({source:'houseTabID:j_idt190:j_idt195',update:'houseTabID:tabView:form0:table:inputBox',
I desparately want to update just one row instead of whole p:dataTable. Please help me.
I found a solution. According to this conversation,
position = JQuery(".ui-datatable-scrollable-body").scrollTop();
JQuery(".ui-datatable-scrollable-body").scrollTop(position);
can do the trick. It seems this is the only way to get and set vertical scroll position of p:dataTable. I saved position before opening dialog, and set position after updating p:dataTable from dialog. It worked and this is what I wanted to do.
But above method has serious issue. That code scans given class ".ui-datatable-scrollable-body" from top and perform at the first found one. So it works only for one p:dataTable. Fortunately I could come up with 2nd solution.
<script type="text/javascript">
$ = jQuery;
var scrollPos;
function saveScrollPos()
{
scrollPos = $("#houseTabID\\:tabView\\:form0\\:table_data").parents(".ui-datatable-scrollable-body").scrollTop();
}
function getScrollPos()
{
$("#houseTabID\\:tabView\\:form0\\:table_data").parents(".ui-datatable-scrollable-body").scrollTop(scrollPos);
}
</script>
FireBug in FireFox helped me find out there is componnet id which "_data" is appedded by Primefaces. Please see my question, my data table's id is "table" and someone created "table_data". And I could point it with escaped syntax shown above and function parents() leads to that spot. It is working fine in my applictaion.
I really thank stier01 who posted his solution which is the only one I could find over the net. And I really feel sad that Primefaces p:dataTable does not support such a basic thing. I know many of us wanted to keep scroll position of p:dataTable when updating it. I hope it will be improved in near future.
I am teetering on the edge of what I know here but I suspect that it may be happening because of the timing of the page construction. When the DOM tree is built, your table rows do not yet exist so your button outside of the table cannot find the reference to the row (because it does not yet exist). After the tree is built and the data is filled in, the row is then there. That is why after the page renders you can look up the column id, but not reference it from outside of the table. I am not sure of a solution. Maybe you can put a remote command in the datatable tags to update it. Maybe can do something in JS.
I am currently introducing a mobile friendly version of our web-application.
In a first step I transformed a rich:dataTable with a lot of columns into a rich:dataList containing only a few columns as values.
The old table used pagination and I want to reuse this existing mechanism to some extend in the new list. In the new list, however, I don't want to paginate but append! So when I click on a "Load More" button, I want to append the new elements to the already existing ones.
However appending should not happen on the server side, but on the client side. Because the normal mechanism is to append elements on the backing bean's list on "Load More" and then trigger some reRendering (e.g. via ). The result of this, is that the old data is fetched from the server again, which I don't want. I just want the new data, which is the next pagination, to be appended to the already existing ones.
Does someone has an idea, how I can realize that?
(limiting factors: JSF 1.X and Richfaces 3.X [in combination with jQuery mobile])
An list pagination example (it's primefaces, cause I couldn't find a richface example): http://www.primefaces.org/showcase/ui/dataListAjax.jsf And something like this I want to transform into an infinite list with a "Load More" button.
Would really appreciate your help and/or ideas about that!
Thanks in advance!
Just in case somebody else is interested in this...
I found a solution or rather a workaround:
I introduced another rich:dataList, that gets rerendered every time I click on "Load More".
The "Load More" button is a "a4j:commandButton" and its action triggers pagination. Finally I use its oncomplete-attribute to call a JavaScript function, that moves the next pagination (temporary list) to my main list via jQuery DOM manipulation.
It works just fine
I have a jsp page which I'm using to display a datatable. If I look at the page in Google Chrome it displays fine, but If I click on the header to sort the column. All the data disappears and all I'm left with is the column headers and sorting icons. Sorting works fine in both Internet Explorer and Firefox. Has anyone seen this before?
I also had a similar problem with Chrome/Safari when I had <h:commandLink /> inside a <rich:column> in a <rich:dataTable> to open a detailed dataview of a listitem. I changed the <h:commandLink> tag to <a4j:commandLink> and the problem was gone.
If it works fine on other browsers, I'd first upgrade to the latest version of richfaces, and if it still fails, I'll issue a bug report (here), giving enough details to reproduce it (i.e. giving your code, not only explaining it)
Guys check if you are using <rich:toolTip> inside the <rich:column> for example a tool tip for an image or link inside a column, remove the tooltip and use the title attribute of the image or commandLink component.
Cheers for reply mate. turns out there's no bug at all. In one of my colums I had in the code (off screen). Deleted it and all is fine again. Thanks.