JQuery UI selectable + dynamic list

Question

My problem: I generate my lists dynamically and I want make them selectable.

For example:

function gen() {
    //list generation
    $('#blank').append(listHtml);
}

$(function() {
    $('.mylist').selectable();
});

As a result, the lists are not selectable

I tried:

$('#blank').append(listHtml).selectable('refresh');

But I get this error:

Error: cannot call methods on the selectable prior to initialization; attempted to call method 'refresh'

score 1 · Accepted Answer · answered May 02 '14 at 09:23

There can be possibilities that initially in the first case the list isn't present in the DOM and you are calling selectable on it, which is of no effect. In second case, you are calling selectable with arguments without initialising. So that throws the error. The solution is to initialise the selectable after the list is appended into the DOM and then later call it using refresh if necessary. I created a fiddle for demo. In fiddle I initialised the selectable after the list is appended into the DOM.

$(document).ready(function () {
 $(document).on('click', '.add', function () {
    var listHTML = '<ol class="selectable"><li class="ui-widget-content">Item 1</li><li class="ui-widget-content">Item 2</li><li class="ui-widget-content">Item 3</li><li class="ui-widget-content">Item 4</li><li class="ui-widget-content">Item 5</li><li class="ui-widget-content">Item 6</li><li class="ui-widget-content">Item 7</li></ol>';
    $('.container').append(listHTML);
    $(".selectable").selectable();
    return false;
 });
});

Link :http://jsfiddle.net/lotusgodkk/GCu2D/66/

one probably will want to add a line to clear the container before appending a new list. Dynamically suggests the container will be appended to over and over. — midohioboarder, Mar 25 '18 at 19:00

score 0 · Answer 2 · answered May 02 '14 at 10:06

You need to call your append function in the ready.

function gen() {
   //list generation
   $('#blank').append(listHtml);
}

$(function() {
   gen();
   $('.mylist').selectable();
});

If you can't use call gen() in the ready. Maybe a solution can be to put a timeOut event checking if .mylist exist and then add selectable() to it. Something like this

$(function() {
    checkList();

});

function checkList(){
    if($('.mylist').lenght > 0){
        $('.mylist').selectable();
    }else{
        setTimeout(function(){checkList;},500);
    }
}

JQuery UI selectable + dynamic list

2 Answers2