How to programmatically select the first item in a jQuery Selectable list

Question

Possible Duplicate:
jQuery-ui: How to programatically select selectables

Having a bit of a time trying to get this to work.

How do I select the first(or for that matter any) item in a selectable list? Ideally, I'd like the event 'stop' to fire in response to it as I have logic that sets values in other controls.

Thank you, Stephen

$("#favoriteFolderSelectCopy").selectable({
    create: function () {
         // select the first item in the list??

    },
    stop: function () {

        var ar = $(".ui-selected", this);

        if (typeof (ar) === 'undefined') {
            return false;
        }

        if (ar.length === 1) {

            var folderName = $('.ui-selected', this).html();
            var ownerName = $('.ui-selected', this).attr('data-owner');
            var glCode = $('.ui-selected', this).attr('data-glcode');

            $("#favMaintName").val(folderName).removeClass("defaultTextActive").focus();
            $("#favMaintOwner").val(ownerName);
            $(".ui-autocomplete-input").val(glCode);

            return true;
        }


        if (ar.length > 1) {

            //$("#favMaintName").val(ar[0]["data-id"]);
            return true;
        }

    }

});

http://jqueryui.com/demos/selectable/#serialize

<ul class="ui-selectable" id="favoriteFolderSelectCopy">
    <li data-owner="" data-glcode="" data-id="2976199074" class="ui-widget-content ui-selectee ui-selected"> </li>
    <li data-owner="" data-glcode="" data-id="2977088462" class="ui-widget-content ui-selectee">ATLAS TEST Share</li>
    <li data-owner="" data-glcode="" data-id="2976171424" class="ui-widget-content ui-selectee">Food-Canned Goods</li>
    <li data-owner="" data-glcode="" data-id="2976199547" class="ui-widget-content ui-selectee">Food-Frozen</li>
    <li data-owner="" data-glcode="" data-id="2976199546" class="ui-widget-content ui-selectee">Food-Meat</li>
    <li data-owner="" data-glcode="" data-id="2977213083" class="ui-widget-content ui-selectee">HDS CANADA</li>
    <li data-owner="" data-glcode="" data-id="2977213137" class="ui-widget-content ui-selectee">HDS CANADA2</li>
    <li data-owner="" data-glcode="" data-id="2976539509" class="ui-widget-content ui-selectee">Kirsten Test</li>
    <li data-owner="" data-glcode="" data-id="2976380310" class="ui-widget-content ui-selectee">Light Bulbs</li>
    <li data-owner="" data-glcode="" data-id="2976377957" class="ui-widget-content ui-selectee">Office Supplies</li>
    <li data-owner="" data-glcode="" data-id="2003130884" class="ui-widget-content ui-selectee">Rooms - Appliances</li>
    <li data-owner="" data-glcode="" data-id="1776652731" class="ui-widget-content ui-selectee">Rooms - Chemicals</li>
    <li data-owner="" data-glcode="" data-id="1752600210" class="ui-widget-content ui-selectee">Rooms - Guest Supplies</li>
    <li data-owner="" data-glcode="" data-id="2165588708" class="ui-widget-content ui-selectee">Rooms - In-Room Coffee</li>
    <li data-owner="" data-glcode="" data-id="1771586932" class="ui-widget-content ui-selectee">Rooms - Linens</li>
    <li data-owner="" data-glcode="" data-id="2003130835" class="ui-widget-content ui-selectee">Rooms - Uniforms</li>
    <li data-owner="" data-glcode="" data-id="2977213478" class="ui-widget-content ui-selectee">SYSCO punchout test</li>
    <li data-owner="" data-glcode="" data-id="2976380420" class="ui-widget-content ui-selectee">Steve's Stuff</li>
    <li data-owner="" data-glcode="" data-id="2976377950" class="ui-widget-content ui-selectee">USFI</li>
    <li data-owner="" data-glcode="" data-id="2976490556" class="ui-widget-content ui-selectee">walk IN #1</li>
</ul>

Thye answer was found in this thread. http://stackoverflow.com/questions/3140017/jquery-ui-how-to-programatically-select-selectables — Stephen Patten, Feb 13 '12 at 19:00
It's great you found an answer. feel free to close the post. (You might even get a badge for it, I forget). Cheers. — Jordan Arsenault, Feb 14 '12 at 01:58

score 0 · Answer 1 · answered Feb 09 '12 at 01:28

0

I'm assuming you want it to go into the if (ar.length > 1) block - if so, something like this:

ar = $(ar).first();

will give you the first element. You can also use .eq() to get the zero-indexed element:

ar = $(ar).eq(0); // returns the first element

answered Feb 09 '12 at 01:28

Joe

15,669
4
48
83

`ar` is already a jquery object, no need to re-wrap it. – James Montagne Feb 09 '12 at 01:38
1

Normally I'd not bother, but 2 days ago I had a 3 hour debug-fest on an infinite loop that was caused by me trying to access `$something.text()` while iterating over a collection of `$('.someselector')`, because my `$something` wasn't a jQ object. I'm still having therapy for it, so I'm going heavy on wrapping this week :P – Joe Feb 09 '12 at 01:40

How to programmatically select the first item in a jQuery Selectable list

1 Answers1