I'm trying to build a todo list. http://d2burke.com/exp/todo/
I want my user to be able to mark items as complete, at which point the item is dropped down to the 'Complete' list, and vice versa. I also want each of these lists to be independently sortable.
I'm using a basic custom method to move the items back and forth, and I've used jQueryUI Sortable to sort them.
All of these things I've been able to accomplish; however, it doesn't seem as though the site (the DOM?) is registering that the items were moved from one list to the other. If I mark one item as 'Complete' it physically moves down...and becomes sortable in the 'Complete' list, but I'm echoing out the current positions in serialized format (because I'm going to record the order in a db) and the app doesn't seem to recognize that the item has moved.
I'd like to force the app to recalculate the list of items when an item is marked complete, or incomplete.
Help?
I looks to me like you should look at the resfresh methods of of the sortable: http://jqueryui.com/demos/sortable/
I would start with .refresh() too see if that also recalculates the positions. I assume it does but if not you might need to trigger the other one too.
There are few things that stand out that I would comment on:-
1) When you 'move' an item, you are moving more than you intend - the moved item has a 'tbody' around it - your code is very fragile, depending on parent.parent... which will be a nightmare to maintain.
2) You have various parent.parent constructs - lose these switch to '.closest()' to search up the tree to the class of item you wan to operate on.
3) You are doing things with binding/unbinding - lose them and switch to '$(document.body).on(,...)' then jquery will add/remove events automatically based on your selector - link once and forget.
Once this is done the bugs may go away - if not it will still be clearer so possible to debug properly!
Regards
ps. If it were me, I think I'd link the two list so they are sortable together, and toggle the completed flag if an item is moved from one list to the other.
This way the user has two ways of changing the status and jquery will do all the donkey work as you are simply sorting a normal linked list.
Related
I'm using and loving react-hook-form. I've run across an issue where I have a list of items (let's say in the left column), then when you click on any item it will display an edit component for the selected item in the right column. The issue is when I switch between items, nested array values don't seem to update the data correctly.
I think I understand that because a new edit component isn't created for each parent item (I'm just passing the selected index down) the nested useFieldArray in the edit component still references the first parent item. If that's the case, I'm not exactly sure how to make sure a new useFieldArray is created for each item that gets selected.
Here's a codesandbox replicating the issue:
https://codesandbox.io/s/dreamy-brattain-r74lx
Any help is much appreciated.
I think you can just map over the childItems prop of your watched item inside your <Details /> component instead of using fields. As you are using watch the <Details /> will be re-rendered after appending a new child item.
If your <Details /> component should get more complex i would also suggest to use useWatch here instead of passing watch. Check this quote from the documentation for useWatch:
Behaves similarly to the watch API, however, this will isolate
re-rendering at the component level and potentially result in better
performance for your application.
Here is an example using useWatch:
We have some code that has a custom web component to display each element in an observable list. It seems that when an element is added to the list, the Web-UI infrastructure sees fit to remove all of the DOM nodes that represent elements in the list, and then re-add them along with the new element.
Not knowing much about the internal workings of the Dart-UI code, I would actually expect the addition of an element in the observable list to simply add one (or more) nodes to the DOM, without removing any of the existing nodes from the DOM.
Is it possible to achieve this sort of behavior?
There is an open issue for this: https://github.com/dart-lang/web-ui/issues/431. John wrote
fwiw, I'm working on a data-binding overhaul right now. The new
implementation includes stable lists by default.
so this should be fixed eventually.
let's assume i have the following structure:
pageA.xhtml - Here we can select an item which will be needed within pageB and pageC but not in pageE.
pageB.xhtml - Here we use the Item which was selected from pageA. We
also have a selectBox and some Buttons on this page.
When selecting something from the selectBox some Buttons will be deactivated and some Text can be displayed.
(when refreshing this page we want the same state again). pageB includes
pageD which lists some stuff. Now we can navigate to pageC.
We also create some objects which are only relevant for pageC but not for other pages.
pageC.xhtml - here we get the object from pageB and depending on some User input we modify it and when we press apply we come back
to pageB which displays
our changes. From pageB we can press save which will save the changes and pageD (which is included in pageB) will be
updated.
pageD.xhtml - just lists some stuff. (will only included within pageB)
pageE.xhtml - This page will start something completely differend and does not need the input from pageA but you can navigate directly
to pageC. In this case pageC has to
hide some things.
I hope the example is somehow clear. Actually i just made it up to make my question a bit clearer: I want to know what the best practises are to pass data between different pages and save the actual state (also have the same state when coming back).
Also how to reset/clear data which are needed in some pages but not in different ones.
For example some data will be needed for several pages but some only within nested pages (in an optimal world the data within the nested pages should be cleared when leaving them)
Of course i could save stuff i need into the session, but then i have to be careful to remove those stuff again when i don't need it anymore. JSF and CDI support Conversations. But the problem here is that it is not possible to have nested conversations. Of course i also could pass everything with request parameters .. but in this case i have to be careful if i have ajax requests within my page (i guess i would have to send always all parameters).
I'm using JSF 2.0 with CDI. Any answer will be appreciated. Sadly i cannot provide any code example .. so i hope i was able to express my self clear enough.
greetings kukudas
You could create a new CDI scope or recreate the ViewScope in CDI. Take a look at CODI conversations as well.
On Telerik demo site we can see an example of how to implement kind of functionality: "check all checkbox in a grid's column". But in my case it has 2 disadvantages:
It didn't check all checkbox on all pages.
It didn't save a state of checkboxes on different pages.
Is anybody know how to resolve these issues? Thanks in advance.
As long as I know there's no built-in functionality to do so. The same problem happens when you select records on page one and change to page two, you loose whatever you selected before.
To achieve that functionality you have 2 options (I've used both on previous projects)
1) On each check make an Ajax call to one of your controllers and store whatever you selected on a Session Variable (This can be inefficient if you have a lot of records)
2) Create a javascript variable and store your selections there, and send back to the controller using a json variable or a comma separated values string
As I said, I've used both approachs so it depends on if this works for you or not
Hope it helps
I can't test this, so I'm not 100% sure, but looking at Telerik's example, one reason it's not persisted is because every "page" of the grid requires a postback, and in the controller action result method, they aren't passing in the model (or view model) for the items that are bound to the grid, they're only returning that list of items back to the view, so it will never "save" which items are checked/selected and which ones aren't. You should be able to get around this by making your view model a parameter into the HttpPost action result method and then passing that list back to the view after the post so that it retains which items are selected instead of creating a new one. This won't solve the issue with not selecting all the items, but it should at least retain which ones are selected throughout the pages. I think the reason for it not working with all items is it can only select the ones that are actually being displayed at the time. You may want to do a post (or ajax) to select "all" items.
One of the major reasons for using paging in grids is so that you don't have to retrieve all of the data from the data store and generate a lot of HTML to push to the client.
It's been my experience that most users understand that a "select all" check box only checks the items on the current page. I've not seen a site where checking such a check box would actually check all records, even those I can't see.
If you have an action which will affect more than the current page of records, I would suggest that you add a button which clearly indicates that the action will affect all records, then send a command to your data layer which will perform that action. This will perform better (you don't have to send a potentially long list of ids across the wire) and allow users to understand the repercussions of their action.
I am currently binding an IEnumerable collection to a ListBoxFor, which works as expected, sending the currently selected values on POST. However, I need to send all the values instead (essentially any value in a given ListBoxFor I consider to be required, whether selected or not). How would I go about doing this?
(I can probably rig something up in jQuery where, on-submit, it manually selects all the elements in a box, but was wondering if there was a better way.)
If you want to continue using normal browser form serialization on submit, write a javascript function to fire right before the submission (hook into an onclick event or something) which iterates through the list box control and concatenates the desired values (perhaps comma-delimited) and places it in a hidden field. The value of that hidden field will be submitted normally and you can parse the individual values from it on the server side. It's still some manual work, but you avoid messing with GUI state (i.e. selecting all desired list box items) which I agree is something you don't want to do.