jquery.sortable driving me nuts - jquery-ui

i'm trying to make a set of elements sortable. Each element is created after an ajax request, so basically nothing in the DOM is available to bind sortable() on DOM ready.
I managed to set a callback occuring after my json manipulations have ended and the dom is updated.
Here's a preview of what i'm doing now.
http://jsfiddle.net/zrFsT/
Am I missing something ? What could it be ? Thanks for the help.

You were missing jquery-ui from the jsfiddle.
I've added it here: http://jsfiddle.net/zrFsT/
And updated your question.
Is this all that was wrong or are you trying to accomplish more?
Update: http://jsfiddle.net/zrFsT/1/
Removed multiple "lines" and the connect with feature usage.

Related

Two BwuDatagrids on one page

I have polymer paper layout with paper-drawer-panel and two Polymer components contains BwuDatagrid elements. And I get some troubles when two components with bwu-datagrid tags rendered on one page:
But if didn't render component in paper-drawer-panel it's worked like so:
What it can be? And how I can fix that?
This is a known issue. There is a pull request https://github.com/bwu-dart/bwu_datagrid/pull/112 but I planned to implement this a bit differently.
I just didn't do it yet :-/
Thanks for using BWU Datagrid btw :)

Wicegrid pagination and filters not working after AJAX update

I have a wicegrid that I update via AJAX(based on the value selected by a drop down). Problem is that after the update, the filters and pagination stops working on left-mouse click(works on right click!). Does anyone have any idea why this is happening?
I have used wicegrid on a number of pages in the same project(without AJAX update), and this issue does not appear.
Try this (assuming you use jquery):
$( document ).ajaxComplete(function() {
put code you want to run;
});
probably your script is not working because it's in document.ready scope.
I had the same issue and found a straightforward workaround for this issue - call the initWiceGrid() function after you refresh the grid.

jQuery UI Autocomplete: How to target dropdown menu?

Problem: I have to color my results in the little dropdown based on their value.
Solution: Use the 'open' event hook to loop through options and assign a color.
Problem: So the documentation for the jQuery UI autocomplete says that the open event hook receives two arguments- 'ui' and 'event'. The problem is, 'ui' is just an empty object (someone filed a bug report about this, and the brilliant jQuery UI team said it's not a problem), and 'event' only has the input box, not the dropdown that's generated. At this point, the only way I can select my options list from here is to do this:
$( event.target ).nextUntil("ul.ui-autocomplete").last().next()
That's gross. Please tell me there's a better way?
PS: If anyone says "Just use $('ul.ui-autocomplete')!" you've obviously never worked on anything more complicated than.... something that's not complicated.
The official documentation is terrible, but after lots of exploring I figured it out:
$(event.target).data('autocomplete').menu.element
Are you writing a plugin? You can use this.element

TD reordering with jquery-ui sortable, chrome not rendering again

I am using jquery ui sortable to sort TD's in a TR. In chrome this seems to be indenting the TDs to the right. From a similar question found on SO, I reckon this is because of chrome adding an extra TD which is not even visible under console, and is only being rendered.
How do make this work?
I have found this snippet that tries to force chrome to render again, but this does not seem to work.
var n = document.createTextNode(' ');
$('TD:eq(0)').parent().get(0).appendChild(n);
n.parentNode.removeChild(n);
The similar question found on SO says that he was able to solve the issue by calling a function .render() on his view item, I presume this is a custom function for a library the asker was using.
Any ideas on how to force refresh the DOM?
To those who are facing a similar issue, I found that hiding the parent element and showing it after a small delay(10ms works), keeps things working.

How do I clear the JQuery Mobile list search filter?

I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?

Resources