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.
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 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)"
});
I have a view, say show.js.erb. And I have a link in another view such that
link_to "MyLink", my_object_path, :remote => true
successfully returns the show.js.erb view. My question is, from within that view, is there any way to access the element that triggered the AJAX call without having to resort to generating an id specific to individual elements a la ...
I want to be able to use this view callback to open a small dialog next to whatever element was clicked on, but I can't seem to find a way to access the triggering element.
I tried using $(this) but that doesn't work.
I'd like to do something along the lines of
$(this).after("some new html here");
My solution was to bind a pre-submit class to the element, in my case a popup modal window. It's a similar solution to the post linked to above in that it uses the pre-submit bindings, but tailored to use classes instead.
In public/javascripts/application.rb:
jQuery(function($) {
$(".poppable").bind("ajax:loading", function() { $(this).addClass("popped"); });
});
Then in my view for the popup content (e.g. app/views/mymodel/popup.js.erb):
var p = $(".poppable.popped");
p.removeClass("popped");
/* Do what I need to with p ... */
If this doesn't look kosher, I'm all ears but it works for now.
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()
I want to be able to create modal dialogs, with, for example
close: function() {
$(this).remove();
}
default option, without need to specify those on dialog creation, but somehow override those parameters on one place.
Is this possible?
I, too, needed to override default options and took me a while to figure out for jQuery UI 1.8:
$.extend($.ui.dialog.prototype.options, {
modal: true,
resizable: false,
draggable: false
});
The above code will allow you to drop anything on top of the dialog options. The above method should work for most UI components (it will also let you prototype over the functions that exist, or add to).
You should create an abstration that calls the jQuery dialog function then.
Basically, instead of creating the options literal everyplace you want to use the jQuery dialog, create a function which creates the options that you want and then call the jQuery dialog function from that.
Then, in all areas of your code, call the function you wrote that encapsulated the code.
This process is known as encapsulation and applies to most (if not all) software development languages. One of the major benefits is that it makes your code easier to maintain.
Dialog and other widgets in jQuery UI define a hash with their default values. You can override these after jQuery UI has been loaded.
Search through the javascript for the line where the defaults are set:
$.extend($.ui.dialog, {
version: "1.7.2",
defaults: {
...
As an example, in your javascript, you can turn autoOpen off with:
$.ui.dialog.defaults.autoOpen = false;
Or you can merge a hash of options:
$.extend($.ui.dialog.defaults, {
autoOpen: false,
title: 'Default title'
})