jQuery .selectable(), Always returns the same ID?

Question

Below I have this little list:

<ul id="selectable">
    <li id='0'></li>
    <li id='1'></li> 
    <li id='2'></li>
    <li id='3'></li>
    <li id='4'></li>
</ul>
<span>You've selected:</span> 
<span id="select-result">none</span>.

Combined with jQuery, It should get the id of the selected element:

<script>
    $(function() {
        $( "#selectable" ).selectable({
             stop: function() {
                 var result = $( "#select-result" ).empty();
                 $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable li" ).attr( 'id' );
                     result.append( index );
                 });
             }
        });
    });
</script>

Every time, I click an element, it displays: 0

Why? When I click an list-element the second time, it should display: 1 etc, What did I do wrong?

You are getting attribute of the $( "#selectable li" ) which is the whole collection. Try getting attr of $(this) — Maxim Krizhanovsky, Nov 14 '13 at 15:19
Do NOT start an ID name with a number! http://www.w3schools.com/css/css_id_class.asp — Nicole Stutz, Nov 14 '13 at 15:20
@DanielStutz that holds for HTML4, [but not for HTML5](http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute) anymore. — moonwave99, Nov 14 '13 at 15:22
@DanielStutz, check it out. Good comment (I +1ed it), but don't use w3schools. Use the MDN instead — tjons, Nov 14 '13 at 15:24
@TjonS thank you for the MDN. It's basic to use good and correct documentation (so also a +1).Just checking out w3.org to see, if html5 name convention is different --> moonwave99 is right. — Nicole Stutz, Nov 14 '13 at 15:27
@DanielStutz, even if html5 is different, I wouldn't use it yet. There is no reason to do something SO UNNECESSARY AND AVOIDABLE as using a number. Glad you like the MDN :) — tjons, Nov 14 '13 at 15:29

MackieeE · Answer 1 · 2013-11-14T15:30:04.683

3

It's currently collecting the first node within your $('#selectable li') as it collects many nodes, adjust it to:

$('#selectable li.ui-selected');

Fiddle - Note, I've adjusted the IDs to letter + number W3 Spec

<ul id="selectable">
    <li id='i0'>Zero</li>
    <li id='i1'>One</li>
    <li id='i2'>Two</li>
    <li id='i3'>Three</li>
    <li id='i4'>Four</li>
</ul>
<span>You've selected:</span>  <span id="select-result">none</span>

<script>
    $("#selectable").selectable({
        stop: function () {
            var result = $("#select-result").empty();
            $(".ui-selected", this).each(function () {
                var index = $("#selectable li.ui-selected").attr('id');
                result.append(index);
            });
        }
    });
</script>

edited Nov 14 '13 at 15:30

answered Nov 14 '13 at 15:20

MackieeE

11,751
4
39
56

2

No need to adjust IDs as HTML5 supports numeric IDs. – VisioN Nov 14 '13 at 15:27
@VisioN This I didn't know! =] Thank you, although I think it won't be a habit I'll start anytime soon though – MackieeE Nov 14 '13 at 15:30

score 3 · Accepted Answer · edited Nov 14 '13 at 15:30

3

Why so difficult? Why not like this:

$('#selectable li').on('click', function(){
    // set the value of the clicked li to the result div
    $('#select-result').text( $(this).html() );

    // And optional:
    // set all true's to false:
    $('li[data-selected="true"]').attr('data-selected', 'false');
    // Set the clicked item to true
    $(this).attr('data-selected', 'true');
});

The optional part is very optional, your question doesnt need it :)

edited Nov 14 '13 at 15:30

VisioN

143,310
32
282
281

answered Nov 14 '13 at 15:21

Martijn

15,791
4
36
68

I was going to use `this.id`, but then realised he might change the html to something like `option 1`, or `blue`. Than he wants that value, not the idea. Same principle for the `.index()` – Martijn Nov 14 '13 at 15:26
i found the bug, just need to change { var index = $( "#selectable li" ).index( this ); } TO { var index = $(this).attr('id'); } working – user2972241 Nov 14 '13 at 15:43

Roemer · Answer 3 · 2013-11-14T15:40:49.857

2

I have modified the solution of MackieeE, since it misses the ability to select multiple items. With the following code this works.

Also on Fiddle: http://jsfiddle.net/CVks3/2/

$("#selectable").selectable({
stop: function () {
        var result = $("#select-result").empty();
        $(".ui-selected", this).each(function () {
            result.append(this.id);
        });
    }
});

edited Nov 14 '13 at 15:40

answered Nov 14 '13 at 15:34

Roemer

3,566
1
16
32

FiLeVeR10 · Answer 4 · 2013-11-14T15:51:00.537

this might be easier

$('#selectable li').each(function(i) {
    $(this).on('click', function() {
        $(this).attr('data-selected', 'true').siblings('li[data-selected="true"]').attr('data-selected', 'false');
        $('#select-result').text(i);
    });
});

Then you don't need the ids at all, and you could target the selected by $('#selectable li[data-selected="true"]') or by $('#selectable li').eq($('#select-result').text())

what about deselecting?

Just going to point out the elephant in the room and say this starts with nothing selected, and may need to be able to revert back.

Something like:

$('#selectable li').each(function(i) {//get eq
    $(this).on('click', function() {//on click
        if ($(this).attr('data-selected')==='true') {//if currently selected
            $(this).attr('data-selected', 'false');//unselect    
            $('#select-result').text('none');//no results
        } else {//if not currently selected
            $(this).attr('data-selected', 'true')//mark selected
            .siblings('li[data-selected="true"]').attr('data-selected', 'false');//unselect siblings
            $('#select-result').text(i);//change results
        }
    });
});

Made a fiddle: http://jsfiddle.net/filever10/vm9C2/

jQuery .selectable(), Always returns the same ID?

4 Answers4