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.

are you sure you applying selectable function after the html is fully loaded? — Luke
– Luke, Commented Feb 2, 2011 at 19:33
where is your selectable() being called? It's not in the code you pasted — Serge
– Serge, Commented Feb 2, 2011 at 22:13
forgot to add that line, the selectable() call is after the .dialog open, I added it in the sample code. — netefficacy
– netefficacy, Commented Feb 2, 2011 at 22:28

Serge · Accepted Answer · 2011-02-02 20:04:33Z

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

answered Feb 2, 2011 at 20:04

Serge

1,0662 gold badges7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

netefficacy Over a year ago

Ok, figured it out. Themeroller did not create chrome for the selectable classes. Thx for the help.

prototype · Accepted Answer · 2012-06-21 02:55:49Z

0

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.

answered Jun 21, 2012 at 2:55

prototype

8,19515 gold badges67 silver badges103 bronze badges

Collectives™ on Stack Overflow

jQuery UI Selectable Not Working With .dialog open html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related