I have a list of items that I would like to present. I want to ajax load items as the user scrolls down (I have no problem doing this using JS). The problem that I am experiencing is that I can only re-render the whole ui:repeat and not just a component that contains new items.
Is there an common way to do this? Can I code a bean method that returns only the <li> part of the dom and handle the weaving on the client-side? Should I just write a method that returns raw data and then use JS to handle rendering?
PS .I am sure this has been asked before, but I can't find the relevant posts
Related
I'm trying to implement pagination with Grid component. I may be wrong, but unfortunately I'm unable to find a pagination component for Grid in the official Vaadin documentation https://vaadin.com/docs/latest/components/grid. Is there any particular reason why Vaadin Grid component doesn't have a pagination component? I'm only able to see the laze load. But what in case I have 1000k rows, and I'd like to move to the page #100 without scrolling to it though the data set? How to properly implement it with Vaadin Grid?
Another question regarding the com.vaadin.flow.data.provider.DataProvider Looks like I have to implement two different methods in order to return the count and the actual content. But my business service method already returns Page object which contains size and content. How to properly implement DataProvider in such case? I'd like to avoid the second call to database for performance purpose.
First of all: not native english speaker here, so sorry if I may sound a little confusing sometimes.
I'm looking for a way to persist a DataTable (that shows a query result list) state when I navigate through different views in my application (so it's not an Ajax call), in other words: I need to render a new page with a DataTable exactly as it was in the previous view. First thing you should know about this is that I have a way to transport objects through my views using ELFlash.getFlash().put(param, obj), so my problem is not recovering objects.
I was able to make the DataTable open with all the previous result list with no problems... BUT it has a paginator and I was supposed to get to the second view not only with the query results but also opened in the same page that it was before.
I already tried to keep the current page number in an object and put a code to change the paginator to that page in the post construct, but it didn't work:
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent(":form:dataTable");
String javaScript = "PF('widgetVarName').getPaginator().setPage(" + this.pageNumber + ")";
RequestContext.getCurrentInstance().execute(javaScript);
The saddest thing here is that It didn't work in post construct and the DataTable doesn't open in the right page, but if I call this code in another button, after the page is already rendered, it works.
Do you guys have any ideia?
I am working on something like this:
A JSF template has a side-navigation bar which contains links(either anchor or h:outputLink), and there are cases where two options lead to the same link(page), but with a different value in view parameter, and thus rendering different data being displayed on the page.
Is there a way to do this? Using commandLink or commandButton does not seem like an option to me since it will mess up the styling.
Thanks in advance.
An output link is just a normal HTML link, so a conventional way to do this is with a query parameter, e.g. /contentarea.xhtml?myparam=value.
I don't think you should bind a method to the output link. That would involve a Javascript onclick handler (commandLink), and I don't think that's necessary here. That said, I'm surprised you say commandLink messes with the styling, as it renders a normal HTML link.
See also
http://incepttechnologies.blogspot.ca/p/view-parameters-in-jsf-20.html (see the first technique using f:viewParam)
http://www.mkyong.com/jsf2/jsf-2-link-commandlink-and-outputlink-example/
OK, so I'll express what I'm doing in bullet points without code (as I'm in a massive muddle)...
Using a single-page application with <p:layout> consisting of <p:layoutUnit>s (in different pages brought to main page using <ui:include>)
One of these <p:layoutUnit>s is a single <p:dataTable> updating dynamically (also it's a dynamic dataTable based on selected single-row and associated <p:commandButton>
Rest of the <p:layoutUnit>s update dynamically based on actions happening in dataTable (they contain buttons whose actions (presently not defined) update with change in dataTable data and dynamic 'header text')
dataTable uses dynamic columns (as data to be shown changes, if it helps, data is in a 'tree structure' and I navigate 'up' and 'down using buttons (common 'back' in header) and 'next' <p:commandButton> for each row)
Now to the actual problem
When I use the 'next' button to go to the next level of data in the tree, let me illustrate what happens:
Root -> 'Next' -> Goes to Child -> data updated
Child -> 'Next' -> No action -> Use one of the non-dataTable buttons with no function defined -> default JSF/PF action is Page Refresh -> data updated
'Next' -> Goes to Child
Why does this happen? Why does the 'no action' period happen in between? I feel like I'm missing something here. It's never happened before. None of the controller's functions are triggerable at that time. I've checked this by using the debugger in my IDE. I'm 100% sure it's a problem with the dynamic dataTable. But I don't understand why as I've initiated Column Controller in the 'preRenderView' stage using <f:event>
Also using an 'id' for the body in the Main Index Page and updating using RequestContext just makes the page blank.
I've tried multiple combinations of View and Request Scopes for the Column Controller and used a 'PreViewRender' event listener in the dataTable to initiate the Column Controller. All of my efforts.
One particular combination (IIRC **NOT ** using the PreViewRender listener causing even the data to not be updated in the dataTable, forget non-functioning of <p:commandButton>s or <p:remoteCommand> on <a> onclicks.
As there is a huge amount of code spanning this and am in a muddle myself now, I'll add code when you make some headway.
OK, I found the answer!
https://stackoverflow.com/a/2120183/3488113
This is user BalusC's answer where one of the main reasons he suggests is JS error.
I am calling a JavaScript function from the Bean which does not exist/returns some error. Removing references to it in the Bean has solved the problem for the time-being.
I assume the rest of the update actions stop/frontend component JS action changes are not loaded/actions itself are not loaded if there is a JS error in the backend call, which is the real cause.
I have a form which one of it's fields is a code and description, also a button for opening a popup window that contains a list of all of the available codes.
when the user double clickes a row from that table i want to set these values to the code and description. - how can this be done?
Another question, I want to create this popup and table to be initialized dynamically - by that i mean that if i have a few forms in my application, when ever i have a field which has a description i want to be able to open this popup and to see the available list for that field. (every field can be from a diffrent table). is it possible to create something like that? if so, how?
Any help will be appritiated,
Thank's In Advance.
Yes, it is possible. Even more, many component libraries have ready to use popup/dialog components, such as RichFaces with <rich:popupPanel> and PrimeFaces with <p:dialog>.
If you do not want to use a component library for some reason, you would need to create a custom component for this which generates basically an absolutely positioned HTML <div> element with a CSS overlay which get shown/hidden by JS on a particular click/action. The HTML/CSS/JS part should be relatively simple if you are familiar with those languages. The JSF part is somewhat hard if you have never created a custom component before, but it should be possible with a composite component as well, so you could also just create one with pure XHTML. The updating/refreshing can just take place by the usual <f:ajax> means.