CODEWITHSUNDEEP
javascriptjqueryjquery-uiperformance
Nick
Nick

Reputation: 5430

jQuery UI selection -- help with inefficiencies

I have a calendar, and the user should be able to select dates (they are basically table cells). The problem is that jQuery UI support for selection is a bit sketchy. In particular, if the user uses the CTRL key to select or unselect dates, I can't seem to get a total list of selected elements very easily upon the selection "stop" event. Here is what I am currently doing, but it seems very inefficient:

global.selected = [];


$('#calendar').selectable({filter: 'td',

selected: function(event, ui)
    {
    for (var a = 0, id = +ui.selected.children[0].id, found = false; a < global.selected.length; a++)
        {
        if (global.selected[a] == id)
            {
            found = true;
            break;
            }
        }
    !found && global.selected.push(id);
    },

unselected: function(event, ui)
    {
    for (var a = 0, id = +ui.unselected.children[0].id; a < global.selected.length; a++)
        {
        if (global.selected[a] == id)
            {
            global.selected.splice(a, 1);
            break;
            }
        }
    },

stop: function(event, ui)
    {
    console.log(global.selected);
    }
}

Upvotes: 2

Views: 252

Answers (1)

Hemlock
Hemlock

Reputation: 6210

I'm brand new to jQuery, but I'd approach it this way and avoid the global all together.

$('#calendar').selectable({
    filter: 'td',
    stop: function(event, ui) {
        var selected = $.map($('#calendar > tbody > tr > td.ui-selected'),function(el) {
            return el.id;
        });
        console.log(selected);
    }
});

Upvotes: 1

Related Questions