I have the current code to get a list of item using a picklist in Primefaces:
<p:pickList showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" label="#{msg.dataview_label_net}" id="pickListNet" converter="firstItemConverter" value="#{dataViewBean.net}" var="node" itemLabel="#{item.name}" itemValue="#{item}" />
But, I have an issue with performance at the Google Chrome to show this list.
My backend is fast, but, to show all item in Primefaces there is a long time to render. Is it possible using some pagination in a picklist or some like lazy load?
I have around 3000 items in my list. I tried a js fix to improve in here:
https://code.google.com/p/primefaces/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Priority%20TargetVersion%20Reporter%20Owner%20Summary&groupby=&sort=&id=7655
but it's not working good for me.
The best solution for this issue is try another component like a DataTable.
I used a DataTable with a multiple checkbox and a lazy scroll to show only a partial list. My time to load reduce from 1min15s to 15s.
No, sorry this is not supported in the versions of PrimeFaces at this time of writing (5.1/5.2-SNAPSHOT). As could have been found out by lookin at the PrimeFaces documentation
i'm using primeng and i've faced the problem of pagination, i bring data from API, by 20 elements each call, the solution was to get the list element UL of the source by className and check if scroll is in the limit, if yes i make a new call of the api with page+1 and concatenate the data
Related
Hi my angular form is getting hanged when am try to scroll up and down and try to select drop down options, selecting items in list control. My form contains input controls which has regex patterns, controls. All these controls are in my child html form.
And if i clear cache its working fine.
Please suggest me to fix this issue.
Calling a method function from direct html can be costlier Operation which might have called your application function multiple times apart of life cycle hooks.
It's better to use always variable instead of functions if you are not using it already. Please share your code snippet or stackblitz url for better help from community
I am using the dataTable component with the paginator in a search utility which works great but having a problem to reset paginator page to the first page.
for example you are on page 6 of the paginator and you perform a new search, the dataTable gets reloaded with the new data but, the page number is not reset to 1 it remains on 6.
I'm using PF 3.4.2.
any idea?
Add the following javascript to the action which updates the DataTable's model:
onclick="myWidgetVar.getPaginator().setPage(0);"
Where myWidgerVar is the WidgetVar for the DataTable.
Ensure that the DataTable has a WidgetVar set. For further context, see this post by Optimus Prime.
The above causes the grid to make a call to refresh data with existing filters. If you explicitly want the grid to load new data from page one, you can reset the datatable on server side
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("dialogSelectionForm:carSelectDialogTable");
dataTable.reset();
Reference - http://forum.primefaces.org/viewtopic.php?f=3&t=5807
I solved with widgetVarDataTable.clearFilters(); in primefaces 3.5,
and PF('widgetVarDataTable').clearFilters(); in primefaces 5.0
I solved my problem using PF('dataTableWidgetVar').paginator.setPage(0); in Primefaces 6.0
I had to solve this need in the back-end. To solve the problem without executing some sort of "duplicated refresh" I did implement this:
<p:commandButton ... update="dataTable" actionListener="#{myController.bindingDataTable.setFirst(0)}" oncomplete="someClientJS();" ... />
This code assumes the dataTable in the front-end is binding to the back-end reference variable myController.bindingDataTable. The ActionListener executes before the dataTable gets refreshed, so for that moment the paging is set with '0' as value for the first row/record (hence, first page as well).
I am stuck when it comes to adding more than one search element. I can get 1 search element to work using the Fusion tables layer wizard but any others added don't function? My website is called earthquakedamagemap.com. I'm trying to build a similar search function to that of newspapermap.com
It is my university project. Any advice would be much appreciated!
Try changing the id of your second select menu to search-string1. Then, in your changeMap1 function, pass 'search-string1' to the method document.getElementById().
I have this problem, in a form I have a list of customers that could be more than 300 and, for me, it isn't very simple find over there because I should scroll all results for find a single row!
On the old technology I had a button that opened a pop up where I should research which customer I should select and than I used a javascript for recording the selection on the first form, but It could be a good solution with new technology!
How can I resolve this doubt? What is the best solution for big <select> tag?
You basically want an autocomplete dropdown list. This does not exist in the standard JSF component set and it is also not exactly trivial to implement with JavaScript/jQuery on top of the standard JSF component set because the available values have to be present in the server side's state. You also basically want a dropdown list which is represented by a <div><input><ul><li> instead of a <select><option> because a normal <select> doesn't allow the enduser to type text in. The standard JSF component set does not have a component which renders the desired HTML markup. You'd basically need to create a custom JSF component.
There are 3rd party JSF component libraries which already offer a fullworthy JSF autocomplete dropdown list. It would be easier to use either of them instead of reinventing the wheel by a custom JSF component. Take your pick:
PrimeFaces - the <p:autoComplete> component
RichFaces - the <rich:autocomplete> component
OpenFaces - the <o:suggestionField> component
ICEfaces - the <ice:selectInputText> component
you can try jquery ajax autocomplete
Refer to:
http://docs.jquery.com/Plugins/Autocomplete
http://jqueryui.com/demos/autocomplete/
Yes, the jQuery autocomplete plugin is the best solution for you while you have a large number of items.
By the way, imagine that you would like to select an item with specific letters. While you are using drop down lists, you can point to your wanted items by typing their names from the first letter of each one. But using jQuery autocomplete, you can search a string or a group of letters in everywhere. it does not matter if are your inserted letters located at the first of your item names or in other places.
As ShantanuD said, you can find this plugin in http://jqueryui.com/demos/autocomplete/
HTML form has some text boxes and a drop down box.
Drop down has huge values, and takes lot of time to fetch from database.
So I want to load the page first and while the user fills the form (text boxes) I want to load the drop down box (without his knowledge :-) ).
But without any event trigger, how do I make call to database again ?
I am using JSF with RichFaces, Servlet.
The following code is not working
<h:selectOneMenu value="#{obj.selectedValue}">
<f:selectItems value="#{obj.allValues}" />
<a4j:support selfRendered="true" action="#{bean.action}"/>
</h:selectOneMenu>
Thanks,
+1 for using Ajax - but if you have a very large number of values,t hen you might want to consider using an auto completion dropdown - where the the user starts typing what they need and after they have typed a few characters, you kick off your ajax reqeuest and just load those requests that match.
have a look at "google suggest" if you want to see this in action
-Ace
As already mentioned you can use AJAX to load the dropdown items asynchronously, but I would suggest redesigning the form so that the huge dropdown is not required. Perhaps let the user search for the correct value on a previous or subsequent screen? Long dropdowns are not easy to use as they require lots of scrolling and it can be hard to find the correct value on a large list.
At the bottom of your page put the following:
<a4j:jsFunction name="yourJsFunction" action="#{bean.fetchSelectItems}"
reRender="yourDropdown" />
window.onload = yourJsFunction();
You will have to use AJAX. When the page loads display a empty select box. Then write some JavaScript that will call some URL on your server that will return the options for the select box. And when you get that just populate the select box with those values.
Be advised that your form will be useless to those without JavaScript.