how to find selected elements with Jquery UI selectable - javascript

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

Related

JQ Selectable Cancel Selected in Selecting Event

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)

JQuery UI sortable adds an element?

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;
}
});

buttons gets repeated on every sorting of an item?

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()

Access newly created DOM elements for looping

I'm using jQuery sortable + jQuery draggable to put together a page that adds and removes images to a slideshow. I have it set up now such that I can drag in new screens and drop them into the named sequences I want, and it'll create the DOM elements I need.
I am successfully scanning the page for the necessary elements and committing them to an array, but it never picks up the newly added items. So for example, I have the following elements to begin with:
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
<li data-screen="screen1">Screen 1</li>
<li data-screen="screen2">Screen 2</li>
<li data-screen="screen3">Screen 3</li>
</ul>
...and I then add a row:
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
<li data-screen="screen1">Screen 1</li>
<li data-screen="screen2">Screen 2</li>
<li data-screen="screen3">Screen 3</li>
<li data-screen="screen4">Screen 4</li>
</ul>
jQuery will only ever return the first elements, not the updated ones. Here's the js I'm using:
$( document.body ).on('click', '.submit', function(){
// Build nested array from DOM elements
var jsonObj = [];
$('.sortable').prev('h3').each(function(){
var obj = {
title: $(this).data("sequence-title"),
Screens: []
};
$(this).next("ul").children('li').each(function() {
obj.Screens.push({
image: $(this).data("screen")
});
});
jsonObj.push(obj);
});
});
Code that adds new LIs:
// Initialize draggable / droppable functionality
$('.sortable').sortable({
placeholder: 'ui-state-highlight',
revert: true
});
$('.draggable li').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid'
});
$('.sortable').disableSelection();
I need to return the modified DOM, not the elements that were there when I loaded the page.
After you add an element to your sortable you have to update the component:
$(".sortable").sortable("refresh");
I did a quick experiment based on your code. I am able to drag elements from below and add them to the first sequence. Then they are accessible when the clicky button is clicked.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="moo">clicky</div>
<ul class="sortable connectedSortable ui-sortable">
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<li data-screen="s1screen1">Seq 1 Screen 1</li>
<li data-screen="s1screen2">Seq 1 Screen 2</li>
<li data-screen="s1screen3">Seq 1 Screen 3</li>
</ul>
<ul class="draggable">
<h3 data-sequence-title="sequence2">Dragable Sequence (Drag these elements up and assign to sequence 1)</h3>
<li data-screen="s2screen1">Seq 2 Screen 1</li>
<li data-screen="s2screen2">Seq 2 Screen 2</li>
<li data-screen="s2screen3">Seq 2 Screen 3</li>
</ul>
<script>
$(document.getElementById('moo')).on('click', function(){
// Build nested array from DOM elements
var jsonObj = [];
$('.sortable h3').each(function(){
var obj = {
title: $(this).data("sequence-title"),
Screens: []
};
$(this).siblings("li").each(function() {
obj.Screens.push({
image: $(this).data("screen")
});
});
jsonObj.push(obj);
});
alert(JSON.stringify(jsonObj));
});
// Initialize draggable / droppable functionality
$('.sortable').sortable({
placeholder: 'ui-state-highlight',
revert: true
});
$('.draggable li').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid'
});
$('.sortable').disableSelection();
</script>
</body>
</html>

add a current state to each list item

I have an unordered list with some items that leads to another div I show on hover.
html
<div class="dotdiv">
<ul>
<li>Item</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<div class="info-1"></div>
<div class="info-2"></div>
<div class="info-3"></div>
</div>
javascript
$(function(){
$('.dotdiv li').hover(function(){
$('.info-' + $(this).attr('id').replace('li','')).show();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');
},function(){
$('.info-' + $(this).attr('id').replace('li','')).hide();
$('.info-' + $(this).attr('id').replace('li','')).css('display', 'block');
});
});
Right now when I hover over item 1, 2 , ... it is displayed, and when I hover out the item still stays there exactly like i want it to. But now If I go back and try to show any of the items the last one is only visible. So I am guessing that i need to update my script, and make sure that it works regardless of the order of the items you hover over.
UPDATE
Here is the jsfiddle http://fiddle.jshell.net/7QmR5/
If you do not want to modify the html:
$('#pop li').each(function(i, el){
$(this).hover(
function(){
$("[id^='info']").eq(i).show().siblings("[id^='info']").hide();
},
function(){
$("[id^='info']").eq(i).show().siblings("[id^='info']").hide();
}
)
});
You could format your elements as follows
HTML
<li id="1">Item</li>
<div id="info-1"></div>
Which allows you to do the following
$(".dotdiv > ul > li").hover( function( ) {
$(".dotdiv > div").hide();
$("#info-" + $(this).attr("id") ).show();
});
Fiddle here

Categories

Resources