CODEWITHSUNDEEP
jquery-uiselectablejquery-ui-selectable
dmr
dmr

Reputation: 22323

jQuery UI selectable- what am I doing wrong?

I know I'm doing something wrong with the jQuery UI selectable code but I can't figure out exactly what. Also, how can I condense the two parts of the jQuery UI selectable code into one function?

Thank you!

HTML:

<ul id="monthPicker">
    <li class="month ui-selectable">January</li>
    <li class="month ui-selectable">February</li>
    <li class="month ui-selectable">March</li>
    <li class="month ui-selectable">April</li>
    <li class="month ui-selectable">May</li>
    <li class="month ui-selectable">June</li>
    <li class="month ui-selectable">July</li>
    <li class="month ui-selectable">August</li>
    <li class="month ui-selectable">September</li>
    <li class="month ui-selectable">October</li>
    <li class="month ui-selectable">November</li>
    <li class="month ui-selectable">December</li>
</ul>

jQuery: 

$(document).ready(function() {

    //works
    $('.month').bind('click', function() {
        $(this).toggleClass('picked');
    });

    //doesn't work 
    $('.month').selectable({ 
        selected: function(event, ui) { 
            if($(this).hasClass('picked')){
                $(this).removeClass('picked');
            }                       
            else{
                $(this).addClass('picked');
            }
        }
    });

    //doesn't work
     $('.month').selectable({   
        unselected:function(event, ui) { 
            if($(this).hasClass('picked')){
                $(this).removeClass('picked');
            }                       
            else{
                $(this).addClass('picked');
            }
        }
    });

});

Upvotes: 0

Views: 184

Answers (1)

Luke Girvin
Luke Girvin

Reputation: 13432

You should be calling selectable on the parent element, not the children:

$('#monthPicker').selectable();

The selected items are then given the class ui-selected when the user selects them.

If you want to style the list items (<li> elements), they are given the class ui-selectee.

Upvotes: 2

Related Questions