CODEWITHSUNDEEP
javascriptjqueryjquery-uidynamicjquery-ui-selectable
Vilix
Vilix

Reputation: 101

JQuery UI selectable + dynamic list

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'

Upvotes: 0

Views: 2030

Answers (2)

keypaul
keypaul

Reputation: 497

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);
    }
}

Upvotes: 0

K K
K K

Reputation: 18099

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/

Upvotes: 1

Related Questions