I'm using jQuery Selectable and would like to know whether is it possible to prevent Selected event to be triggered from Selecting event?
Actually, I want to show some popup/confirmation in Selecting event, and if user confirms that then I would like the Selected event to be triggered.
Any solution or workaround(or alternative) would be highly appreciated.
You can do it like this:
HTML
<ul id="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<input id="btnGet" type="button" value="get selected items" />
JS
$("#selectable").selectable({
selected: function(e, ui) {
if (confirm('Are you sure to select ' + $(ui.selected).html() + '?')) {
$(ui.selected).addClass("ui-state-highlight");
} else {
$(ui.selected).removeClass("ui-state-highlight");
}
}
});
$('#btnGet').click(function() {
var selectedItems = [];
$('.ui-state-highlight').each(function() {
selectedItems.push($(this).html());
});
alert(selectedItems.join(','));
});
Online demo (jsFiddle)
Related
I'm trying to use JQuery UI's drag/drop with sortable. When you sort the elements in a "drop zone", it appears to add another (null) element.
HTML
<ul id="sortable" class="drop">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
JS
$("#sortable").sortable();
$( '.drop' ).droppable({
drop: function (event, ui) {
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
}
});
You can try it out here: https://jsfiddle.net/udj6p93f/2/
Go ahead and sort the elements and you'll that length becomes 6, even though there are only 5 elements. What's going on here?
I have copied this line
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length;
just after
$("#sortable").sortable();
It's 5. And inspected element, drag and drop 1 element. It adds one more list item.
<li class="ui-sortable-placeholder ui-sortable-handle" style="visibility: hidden;"></li>
I think that happens because of this.
Fix suggestion:
$("#sortable").sortable();
$( '.drop' ).droppable({
drop: function (event, ui) {
document.getElementById('length').innerHTML = document.querySelectorAll('#sortable li').length - document.querySelectorAll('#sortable li.ui-sortable-placeholder').length;
}
});
I doing sorting of items and i want to show update button when sorting is done, when i have tried getting buttons repeated on number of time i am dragging and dropping the item.
here is my code what i have tried.
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<div align="center" id="sortOrder"></div>
<script>
$(function(){
$( "#sortable" ).sortable({
placeholder:"sortable-placeholder",
update: function( event, ui ) {
console.log($("#sortable").sortable("toArray",{attribute:"pageid"}));
},
stop: function(event, ui){
showButton();
}
});
$("button").click(function(){
var order = $("#sortable").sortable("toArray",{attribute:"pageid"});
$.post(
"/page.cfc",
{method:"Ordering",data:order}
);
});
});
function showButton(){
var field = '#sortOrder';
$node = '<button type="submit">Update</button>';
$(field).after($node);
};
</script>
can anyone tell me what's wrong with this code ? THanks
showButton is constantly adding a new button element, so every time it gets called, it will add the button.
You might just want to use $('button').show() and .hide()
I'm trying to implement drag/drop/sort between 2 list elements:
<ul id="first">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul id="second">
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
Basically I just want to be able to pass items between the lists and sort the items in each list. What's the simplest way to implement this using jQuery?
jQueryUI Sortable - this is exactly what you want.
Very simple:
<script>
$(function() {
$('#first').sortable( { connectWith : '#second' });
$('#second').sortable( { connectWith : '#first' });
});
</script>
I've noticed that an earlier version of jQuery-UI (1.6rc5) I tried this with didn't accept the css selector for connectWith. I threw a curve and got it to work with actual jQuery elements instead:
<script>
$(function() {
$('#first').sortable( { connectWith : $('#second') });
$('#second').sortable( { connectWith : $('#first') });
});
</script>
HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.
I am looking for info on the event and ui objects the jQuery selectable events: "selecting", and "start" take as parameters. I cannot find this in the documentation and looping through the properties is no help.
$('#content_td_account').selectable({
filter: 'li:not(".non_draggable")',
selecting: function(event, ui) {
}
});
Specifically I want to find what elements are being selected and check them to see if their parent elements are the same or not. I assumed this would be in the ui object some where.
When an element is selected it gets the ui-selected class added.
So you could get all selected elements with $(".ui-selected")
This might not work exactly but I think the idea would be something like this:
$('#content_td_account').selectable({
filter: 'li:not(".non_draggable")',
selecting: function(event, ui) {
var p = $(this).parent();
$(".ui-selected").each(obj, function() {
if(obj.parent() == p) {
// get rad
}
});
}
});
You have to use selected and unselected event which are fired for every selected item in group selection.
var selected = new Array();
$("#selectable").selectable({
selected: function(event, ui){
selected.push(ui.selected.id);
},
unselected: function(event, ui){
//ui.unselected.id
}
});
By using :last or :first the selection is not the first selected but the first in order of li
This is the solution I managed:
HTML
<ol class="selectable">
<li class="ui-widget-content"
id="selectable_1"
value="1"
> First Selectable </li>
<li class="ui-widget-content"
id="selectable_2"
value="2"
> Second Selectable </li>
</ol>
In this code I gave the li an id and a value, thus making them available to the ui property of the selecting event
JAVASCRIPT
//A place to put the last one
var last_selected_value;
var last_selected_id;
$( ".selectable" ).selectable({
selecting: function(event, ui) {
//In the selection event we can know wich is the last one, by getting the id on
//the ui.selecting.property
last_selected_value = ui.selecting.value;
last_selected_id = ui.selecting.id;
},
stop: function(event, ui) {
//Here the event ends, so that we can remove the selected
// class to all but the one we want
$(event.target).children('.ui-selected').not("#" + last_selected_id)
.removeClass('ui-selected');
//We can also put it on a input hidden
$( "#roles_hidden" ).val(last_selected_value);
}
});
this will solve your problem:
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(){
var result = $("#select-result").empty();
$(".ui-selected", this).each(function(){
var index = $("#selectable li").index(this);
result.append(" #" + (index + 1));
});
}
});
});
</script>
<div class="demo">
<p id="feedback">
You've selected: <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
check out http://jqueryui.com/demos/selectable/#serialize for more info
the ui argument in that event is the reference to the elemenent,
if it was the selected event ui.selected event will be the elemennt, if it was unselect unselected.ui.....etc