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.
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.
We've been using Primefaces (v 3.5) and Primefaces Extensions (v 0.7.0) in our project and it's been great, cheers for the developers and community!
The inputNumber component takes care of pretty much all of our needs when dealing with decimal fields.
The one thing that isn't working is when the user paste a value into the field using the mouse right button then paste option.
When that happens, it seems these values aren't processed, since when I submit the form they are cleared, no matter it's a valid or unvalid value.
The user can even paste a text into the pe:inputNumber. The control c + control v works as expected, no problem at all.
The code we are using is like this:
<pe:inputNumber id="AmtInTxt" value="#{myController.amtField}" symbol="$ "/>
Any ideas of how can we make the context menu paste works like the control c + control v?
Community Post
Was this ever solved? For future viewers - this looks like an issue with not posting the data to the bean when using the mouse. Try putting an ajax event handler in your input field.
<pe:inputNumber ...>
<p:ajax event="blur"/>
</pe:inputNumber>
I've encountered same problem. At first I thought it happens only when using browser's autocomplete feature. From this post I've learned that it is strictly connected with just changing value via mouse. I am using <p:ajax event="blur" process="#this" /> and it doesn't change anything. More specifically, the value is empty within the InputNumberRenderer.getConvertedValue method and since then it passes null value to setter/listener.
EDIT: Also tried putting onstart="$(event.target).keypress()" within the ajax to simulate user's keypress. Sadly doesn't work.
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.
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.