Has anyone ever seen this? I am using knockout sortable and when I grab an LI element in my OL and drag it up the screen effectively moving it from a higher element in the knockout array to a lower element (move from 4 to 0) everything works fine.
However when I move from 0 up to 4 every item that is passed over seems to lose its knockout id in the markup when I look at it instead of the items having an attribute ko29481270e89u012987="ko234" it just reads null.
This only happens in IE8 and I am using:
knockout-sortable 0.8.1
jquery-ui 1.10.x
jquery 1.10.x
knockout 2.2.1
In latest Chrome, Firefox and IE9 there are no issues. I should also say that the page
that contains the sortable list is being hosted in SharePoint.
Related
I have nested jQuery accordions in my markup where I try to auto-open on page load according to the path that was last opened in previous sessions.
I saved the path into a cookie, loading the cookie and run the following code
path.forEach(function(label){
var element = root.find("[data-caption='"+label+"']");
element.parent().accordion( "option", "active", parseInt(element.attr('data-index')) );
root = element.children().eq(1);
});
The issue is that for some reason the 'active' takes effect only for the first accordion and non of the nested ones.
I checked several times and:
element.parent() is indeed an accordion (otherwise it would have thrown an error).
data-caption is a unique key for elements in each iteration.
element.children().eq(1) is the active panel (according to the structure of jQuery UI Accordion).
the active element I am asking to open indeed exists for each iteration.
I don't know what is the issue here, any ideas?
I found the problem by myself and post here for future reference.
The issue is this part of the code
parseInt(element.attr('data-index'))
And the reason lies with how accordion counts elements within its panel.
In my panel I had several html elements which were not accordion and several which were. Now the code above brought me the index of the accordion element in compare to the entire panel.
The issue is that for some reason .active only counts sub elements which are accordion themselves. So for example if the panel index of an element is 3 but it has 1 non-accordion element before it in the panel, then it's "active" index is actually 2.
I don't know why they chose for this behaviour, but there you have it.
My solution was to place a different attribute on the element with it's "active" index and use it instead of data-index.
Now everything works like a charm.
Basically ui:repeat produces a long list of divs. I would like to use something similar to jquery append() and ajax so that the entire list is not rerendered.
Basically like this:
Customer demand: CTRL + F must work so I cant lazy very well.
Render huge list as divs with panelGroup. Pay close attention to generated html because of the huge amount of data...
Get websocket call something changed and you need a new element after hugelistForm:div982. Basically jquery append would be great but not sure how to integrate it.
This will cause the List backing the ui:repeat and the view to become disconnected. However the list is updated in the "background" so F5 would make things normal...
I use latest versions of JSF, Primefaces, Omnifaces.
We have hierarchical items here with a series of TR structure and not in a nested table structure. So we need to have the functionality to drag and drop items with the same level or a function to sort same level items.
For example I'll try to move Item 1.1 below Item 1.4, that row must be displayed below Item 1.4 together with its children items(Item 1.1.1 and Item 1.1.2). It will work but if you will try to move the children items, it will not work.
And we should also be able to sort/move the Item 1, Item 2 and Item 3 together with its children.
Help with regards to these sorting in jQuery UI.
var tmpTr = jQuery(ui.item).clone(true, true);
var tmpParent = jQuery('tbody[data="'+ui.item[0].id+'"]').clone(true,true);
I think there's something wrong in my code for clone. By the way here's the jsFiddle link
[http://jsfiddle.net/UAcC7/403/ ]
Thanks,
After experimenting with jquery-ui Sortable for a recent implementation of a heirarchical list of items that are draggable/droppable/sortable, I ended up rolling my own implementation using Draggable and Droppable. It helped avoid a lot of squidgy issues with hierarchical and complex sorting/dragging/dropping interactions with Sortable. Even though I got less up front, I was able handle all the cases we needed to without understanding and hacking the default behavior of Sortable. This is not exactly an answer to your question about the behavior of clone, but it may help!
I've been using this knockout binding from this jsfiddle (from this initial SO question) for a while and it has been working.
After upgrading to jQuery 1.8.3 and jQuery UI 1.9.2 (jsfiddle), when typing text into the input, after the items list is populated (but not selected!), the input textbox is cleared and you have to restart typing from the beginning. That's annoying as you won't be able to complete your text input because you always have to start from scratch.
If the jqAutoSourceInputValue and the jqAutoSourceValue have the same property name, it works, but then either the id or the input value after the selection are not the desired one.
Looks like the issue is coming from the fact that the binding's update function has a dependency on the observableArray that is being updated. I am not quite sure what has changed in jQuery UI to make the actual behavior change from before, but one fix is to update to Knockout 2.2.1 and access the observableArray via the peek function to avoid a dependency. Something like:
var source = (ko.isObservable(allBindings.jqAutoSource) ? allBindings.jqAutoSource.peek() : allBindings.jqAutoSource) || [];
Updated fiddle: http://jsfiddle.net/rniemeyer/xXuq6/
If you can't update to KO 2.2.1, then there are some other ways to do it as well. Let me know.
http://jsfiddle.net/AYPze/9/
In this example I have two similar divs with the same goal. Bind the selected date from the datetimepicker and save it to the object binded by knockout js.
The problem with the first div is that the datetimepicker won't show up because i use the knockout "with" binding.
The second div uses the normal knockout js binding syntax, which works fine with the datetimepicker.
I experienced this behavior also with the jquery-ui Accordion
My Questions:
Is this a bug in knockout or jquery-ui?
Is there a work around, so I can use the "with" binding?
Your problem is related to the with binding, but not in the way you think.
The problem you have is that the with binding in this case will remove the jQuery datepicker from the DOM element and that is why you don't see the datepicker for the first textbox.
The main problem here is that you are breaking a very important rule when working with Knockout and the DOM. You shouldn't access the DOM directly with jQuery like you are doing now. You have to use a bindingHandler to bridge the gap between your data model and the DOM model.
The Binding Handlers seem complex at first, but they are pretty handy once you get to know them.
Here is an updated version of your fiddle with a working datepicker: http://jsfiddle.net/AYPze/10/