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
Related
My repeater has enough data where I see my pagination. When I view the detail transformation for any items after the first page, the history.back() button gives me the form submission error.
Short of hard coding the back button, what's the easiest solution to avoid this?
I assume the "history.back()" is your javascript? The pagination is most likely occurring through postback, and any navigation back will require that same post data being sent.
One option is you can make the pagination not postback, but instead URL based. In the "Paging" area of your repeater, set the Mode to "QueryString" and set a querystring key (like "page"). Try that!
Otherwise you will need to do a window.location = "/The/Previous/Url" so it won't event attempt a postback and will simply direct them to the page, but your page you were last on will be lost.
Wrap the webpart in an update panel. In the webpart you can check the box to do this very easy and leave the rest of your configurations the way they are. If other elements on the page require a postback or rely on that webparts values then you may have to wrap all of them in an update panel.
I have set up the jQuery-Validation-Engine addon (https://github.com/posabsolute/jQuery-Validation-Engine) and it works great on the submit button.
However, since i invoked a tab-based interface, it doesn't really bring the user back to the proper tab with the error fields.
As a work around, i've decided its better to validate each tab when leaving to the next one (as it is a step-wise tab) so that the button click at the end will only 'really' need to correct any errors on the currently displayed tab.
I'm using a simple anchor to call some div swaps (using negative margins for content off-page).
I'd like to invoke the validation method to this as well.
Documentation says it can only be attached to a form element.
Any ideas?
Update- i ditched the tab idea and am now using one big form so this no longer really applies.
No support led to going after a different approach. No longer needed.
Background: Xpage with multiple data sources. Each row of tabbed table contains an edit panel bound to a different data source than the main page. Each page contains a table to enter new documents. These documents are children of the main document. There is a view control that shows the user created documents immediately. The button in the table saves the document in addition to adding some control fields. It does a partial refresh of the editPanel.
Recently I added validation to the fields in the entry table. I use a function, and prevent updating from anything but the button. I am using Tommy Valand's method from this blog post: http://dontpanic82.blogspot.com/2010/03/xpages-making-validation-behave.html. If I don't use Tommy's method, then the validators fire when switching tabs, and are useless.
All of this works sort of, but I am experiencing the following issues.
1) I have to push the button twice to get the partial refresh to fire. Not only that, but the validation messages to not fire until the button is pushed twice. The first part was still an issue prior to adding the validation.
2) The table values do not clear after the refresh does happen. This used to work prior to adding the validation. The only way to get the values to clear now, is to do a full refresh (F5).
I really just need partial refresh to behave like it should. Any help is greatly appreciated.
I am answering my own question because I think that I might have found out why the partial refresh was acting so flaky. Here is what I did that solved my issues: Each tab had an editPanel. If I make the edit panel do a partial refresh to itself then the buttons on that panel seems to behave as you would expect them to.
When I create a new core control panel, the default in No submission. I do not know whether this issue manifests itself only when using multiple data sources and/or tabbed tables. Hopefully this fix will be of use to someone down the road. It is worth a try if you are having issues with partial refresh working correctly.
I'm looking for a ready made, freely available component that provides the following features:
editing list entries
deleting entries
adding a new entry - possibly invoked multiple times
bind to property in managed bean of type List, or similar
optional: reordering entries
optional, simple: allow verification that at least one element is entered (required="true"? required="1"?)
optional, better: restrict by minimum and maximum allowed number of elements
The simplest way to allow editing entries would be to represent them as input element. Preferably the element won't need to sync to the server for every change in the number of elements.
Alternatively: is there a trivial way to create or compose such a component oneself?
If this if of importance: currently I'm using Richfaces 3.3.3 and MyFaces 2.0.
Edit: The component is expected mostly to be used for creating new lists from scratch, so that should be as simple for the user as possible. Preferably just tabbing to the next empty input element automatically created at the end of the list. I'd like to use the component for editing these lists, too, but that feature is expected to be used much less often.
You could take a look at Primefaces p:collector. The example in the Primefaces showcase is a good starting point. It can be used for adding elements to a list and for editing and removing these elements.
Probably the simplest way that I would know of going about almost all of these is the PrimeFaces dataTable component. With the exception of adding and deleting entries inline, all of this comes out of box. Deleting entries can be as simple as adding a delete button in a row and adding entries can be done through invoking a modal dialog with a form to create a new entry, add it to the backing bean list for the table, then asynchronously updating the dataTable.
http://www.primefaces.org/showcase/ui/datatableHome.jsf
It really does seem to be the most fully featured JSF dataTable component out there.
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.