jQuery UI Selectable Not Working With .dialog open html

Question

I am opening a .dialog modal and loading html. I am applying jQuery selectable to a list that is in the html and displayed in the .dialog modal. Selectable is not working, the straight html for the list is being displayed.

Code:

  $jQuery('#calendar').fullCalendar({
       ...
       dayClick:

       ...


         var $test_dialog = jQuery('<div></div>').html('<ul id="selectable">
           <li>1</li>
           <li>2</li>
           <li>3</li>
        </ul>').dialog(//buttons);

    }) // end fullCalendar

    $test_dialog.dialog('open')

    jQuery('#selectable').selectable(); 

Other details:

I am loading fullCalendar on a page, and when the user clicks on the calendar, the .dialog modal with the list opens.

Thanks for any suggestions.

Answer 1

Always make sure you've loaded the html first before actually calling the selectable function.

$(function() {
  var html = '';
  html += '<ul id="selectable">';
  html += '<li>1</li>';
  html += '<li>2</li>';
  html += '<li>3</li>';
  html += '</ul>';
  $('#dialog').html(html).dialog();
  $('#selectable').selectable();
});

here's a jsfiddle example

Answer 2

Had a similar sounding issue but a different solution. For me, the issue was recognizing that I need to add the class ui-widget-content to the individual elements that were to be considered selectable. By contrast, I could just call .draggable() on them and they became draggable without adding any classes.