Search code examples
jqueryuser-interfacedialogselectable

jQuery UI Selectable Not Working With .dialog open html

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.

Solution

  • 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