how to find selected elements with Jquery UI selectable

Question

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.

Andy Gaskell · Accepted Answer · 2009-08-20 14:36:10Z

12

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

answered Aug 20, 2009 at 14:36

Andy Gaskell

31.8k6 gold badges79 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RYFN Over a year ago

is there any way to use the "ui" parameter to get the current selection? when using stop:funtion(event,ui){} in selectable the ui parameter always seems to be undefined...

Andy Gaskell Over a year ago

@nima I'm thinking that nearly 2.5 years ago that was not the case. Post an answer.

nima Over a year ago

@Andy Gaskell sorry I didn't notice the date.

Lukspa · Accepted Answer · 2011-08-10 10:02:29Z

12

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

answered Aug 10, 2011 at 10:02

Lukspa

1211 silver badge3 bronze badges

2 Comments

ses Over a year ago

what is "selected" in selected.push ?

kalibrain Over a year ago

selectable is an array to store selected ids. But what if a user does multiple selection and then changes selections. You need to come up with a mechanism to refresh the list so that only latest selection is actually the valid list of ids. Best way to do so would be calling a function and create an array that populates all the selected ids when an action needs to be taken on those selected ids such as changing their background color etc.

Gabber · Accepted Answer · 2012-09-30 21:17:54Z

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

dez · Accepted Answer · 2010-05-10 06:50:38Z

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

broom · Accepted Answer · 2011-12-19 09:13:27Z

-1

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

answered Dec 19, 2011 at 9:13

broom

11

Collectives™ on Stack Overflow

how to find selected elements with Jquery UI selectable

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related