Upon selecting open jquery dialog

Question

I have the following code:

$(document).ready(function () {

    $('.rota  td').live('click', function (event) {

        var $target = $(this);
        var $bf = $target.find('.booking_form');
        var hospital = $target.data('hospital-id');

        $bf.dialog();
        $bf.find('input#hospital_id').val(hospital);
        event.preventDefault();
    });

    $('.booking_form .user_full_name').on('change', function (e) {
        this.form.submit();
    });

     $('.rota td').addClass("Half Full Semi-Foo");
});

What happens is that upon clicking the table cell the jquery dialog appears which enabling you to submit a booking form once selecting an employee. What I am trying to do now is extend this by using the jQuery selectable so that upon selecting a number of cells this would open a dialog so that you can submit a form multiple times. Example being that upon highlighting 3 cells this opens a dialog, upons selecting the user_full_name this submits the form 3 times.

Would this be easy as changing the following

$('.rota  td').live('click', function (event) {

to

$( "#rota td" ).selectable('click', function (event) {

Answer 1

According to the documentation, you need to handle the selected event

$("#rota td").selectable({
   selected: function(event, ui) { ... }
});