I have a working example of the jQuery UI Sortable function. I'm applying it to a HTML table to drag and drop and sort table rows. It works great except I want to exclude certain classes of row from being sortable. Using the items parameter, I can successfully exclude ONE class (the "list-button-bar" class), but I can't for the life of me figure out the syntax for how to exclude more than one class. For example, I want to exclude <th> and other classes of <tr>.
This is probably one of those ones that is in the documentation but I'm not familiar enough yet with jQuery UI to know even what to search for.
Here's the working code:
<script>
$(function() {
$("#applications_list tbody.list-tbody").sortable({
items: "tr:not(.list-button-bar)",
cursor: 'crosshair'
});
$("#applications_list tbody.list-tbody").disableSelection();
});
</script>
Have you tried using a comma? The items option takes a jQuery selector:
$("#applications_list tbody.list-tbody").sortable({
items: "tr:not(.list-button-bar), :not(th)", // Excludes <tr>s without a class and <th>s
cursor: 'crosshair'
});
To exclude multiple classes of tr use:
$("#applications_list tbody.list-tbody").sortable({
items: "tr:not(.list-button-bar,.other-class1,.other-class2)",
cursor: 'crosshair'
});
In Jquery UI 1.8 use the following:
$("#applications_list tbody.list-tbody").sortable({
// Excludes <tr>s without a class and <th>s
filter: "tr:not(.list-button-bar), :not(th)"
});
Related
I am using ASP.Net MVC and JQuery UI autocomplete.
I have a number of input-boxes set up in a table and I have this JavaScript code.
$('.searchfield').autocomplete({
source: '#Url.Action("AutoCompleteFunction")'
});
Which works perfectly. The controller reads from a database and returns a list of matches.
Now I have another column of fields that also need autocomplete. However, these autocomplete lists have to be dependent on what is already in the table.
How can I pass DOM elements to the autocomplete controller?
I have tried something like this. As long as I only pass a string it will work, but not when I try to pass it a DOM element.
$('.newsearch').autocomplete({
source: '#Url.Action("NewAutoCompleteFunction", new { firstParameter = "testing"})'.replace("testing", "'$document.activeElement.value'")
});
I use tablesorter (mottie's fork v2.23.0) by the gem jquery-tablesorter-rails
I have a table where I use the classes filter-select filter-onlyAvail to get a dropdown of only available options in the column.
Recently I added jeditable to the column which adds a script tag to the cells (and maybe also embed the value in a span) like this:
<td>
<span class="editable" data-id="15" data-name="user[route]" title="Click to edit..">1</span>
<script type="text/javascript">
...script for jeditable....
</script>
</td>
The result is that the select filter dropdown shows all variants of values including the script contents.
I tried using filter_selectSource with the filter-match class added, but the contents of the filter is so common (like 1,2 99 etc) I get lots of false hits in the script.
Any pointers on how to ditch the contents of the script tags both in select population and in search results?
I ended up using data-text="value" on the element I want to use for filter and sorting.
In my case the tag.
This does not, however, update tablesorter's filter values or search content for an updated cell.
Use the filter_selectSource option to populate the filter dropdown.
Set it as an array
filter_selectSource : {
0 : [ "abc", "def", "ghi", "xyz" ]
}
or a function:
filter_selectSource : function(table, column, onlyAvail){
// get an array of all table cell contents for a table column
var array = $.tablesorter.filter.getOptions(table, column, onlyAvail);
// manipulate the array as desired, then return it
return array;
}
Also, since it is not ideal to have inline scripts in table rows which are dynamically sorted, please check out the editable widget which uses HTML5 contenteditable to allow user interaction.
I'm trying to dynamically add checkbox and label elements to the document. Checkbox element has Knockout's data-bind attribute to bind its value to an observable value in the ViewModel. However when I try to style the checkboxes with jQuery Mobile by executing
$('input[type="checkbox"]').checkboxradio();
data-bind attributes will be removed. If I leave out the above line, data-bind attributes are properly set and the binding works.
Is there a way to have both jQuery Mobile styling and Knockout bindings at the same time?
I'm using jQuery Mobile RC1 and Knockout 1.2.1.
I have also encountered this problem. Unfortunately, all the suggestions here either did not work for me or had other issues. So I have created a simple custom binding that works in all versions of KO (including the latest v3):
ko.bindingHandlers.jqmChecked = {
init: ko.bindingHandlers.checked.init,
update: function (element, valueAccessor) {
//KO v3 and previous versions of KO handle this differently
//KO v3 does not use 'update' for 'checked' binding
if (ko.bindingHandlers.checked.update)
ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
else
ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates
if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
$(element).checkboxradio('refresh');
}
};
Should be used like this:
<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>
See a complete working example here:
http://jsfiddle.net/srgstm/ub6sq/
See: https://gist.github.com/1006808
Then you can do something like the following:
var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
your options..
});
Hope this'll help!
There is a problem with using knockouts default checked binding with styled objects like jQuery mobile does. It has the same issues that jQueryUi's Button/Buttonset functions. There is a label over the checkbox that indicates what is happening and it doesn't get updated properly via standard knockout checked binding.
It is discussed at http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.
To use knockout directly with these styled objects from jQuery Mobile, the demonstrated code will have to be modified to handle the different DOM context. I'll post an update to the code when I can get some free time to do it.
EDIT
In Google Groups - Knockout, luv2hike posted a solution. You can see it working at http://jsfiddle.net/luv2hike/nrJBC/. Looks like a working fix for your problem.
I created a simple binding that works with jQuery Mobile 1.2.0 and Knockout 2.2.1 and works with default jQuery mobile checkboxes. This binding has no dependency on custom icons or JQuery Mobile's CSS styles. It also allows the use of regular checkbox markup in your HTML (<input type="checkbox" ... />) as opposed to using an alternate markup element like a div.
Here's the fiddle: http://jsfiddle.net/thedude458/52baX/
Note: Presently, the example only supports a single checkbox, not a list, as that is all I currently have a need for. It also assumes that the bound property is an observable.
Here is my heavily commented code on a custom handler I built for jQueryMobile checkboxes:
ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {
// set the dom element to a checkbox and initialize it (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio();
checkbox.attr('type', 'checkbox');
// register change event to update the model on changes to the dom
ko.utils.registerEventHandler(element, "change", function() {
valueAccessor()(
// off because it is before the ui has refreshed
$(this).siblings('label.ui-checkbox-off').length > 0
);
});
},
update: function(element, valueAccessor) {
// update the checked binding, i.e., check or uncheck the checkbox
ko.bindingHandlers.checked.update(element, valueAccessor)
// and refresh the element (for jquerymobile)
var checkbox = $(element);
checkbox.checkboxradio('refresh')
}
};
I have 2 sortable lists, let's say "modules" and "available-modules"
$(".available-modules").sortable({
// helper: 'clone'
// or
helper: function(e, elt) {
return elt.clone(true);
}
})
None of this work: when I drop an item from "available-modules" to "modules", the item from "available-modules" is removed. I thought that using helper: clone would just insert the clone, not the actual item.
Is this my responsability to reinsert the element in the "available-modules" list after inserting it in the other one or is there a problem with my helper option?
Thanks.
It seems like you need something a bit like this demo:
http://jqueryui.com/demos/draggable/#sortable
The drag "source" isn't sortable, just draggable, and makes use of the connectToSortable option.
http://jqueryui.com/demos/accordion/#event-changestart
I'm trying to have an JQuery ajax request get some data and populate the body of a div inside each of my JQueryUI accordion rows when the row is expanded. My intention is to have a hidden field, or some such, within the clickable h3's of the accordion and when the changestart event fires the ajax will go off and get a unique page for that accordion row and fill it with useful html.
My problem is that I can't seem to find any information about the properties or values attached to the objects returned in the changestart event function parameters. Does anyone know how to do this or get those values?
The code I have right now is this:
$("#accordion").accordion({
collapsible: true,
active: false,
changestart: function(event, ui) {
alert('hello:' + event.target.id + ':' + ui.id);
}
});
Which throws up an alert displaying the message hello:accordion:undefined
I've seen this post which seems to be along the lines of what I'm trying to figure out...
jQuery UI object type for "ui" object passed to the callback function?
Thanks,
Matt.
Looks like ui holds this:
$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
ui.newHeader // jQuery object, activated header
ui.oldHeader // jQuery object, previous header
ui.newContent // jQuery object, activated content
ui.oldContent // jQuery object, previous content
});
You can access the contents of those ui.new|old elements easily.
They are jQuery elements, that is why they look a bit odd.
jQuery way
ui.newHeader.first().html()
And if you need access to the dom element use .get()
ui.newHeader.get().first()