добавить динамически фильтруемую контрольную группу внутри разборчивого jquery-mobile

Question

Я пытаюсь создать коробку с коллабелем, в которой будет создана контрольная группа элементов, которые можно фильтровать. Материал внутри контрольной группы должен быть динамически получен из результатов базы данных. Проблема в том, что он не выводит его. Мне удается сделать работу контрольной группы вне складной коробки, но не внутри нее. Это не покажет никаких результатов.

HTML:

<div data-role="collapsible" id="collapsible_box"> 
    <form> 
     <input type="text" data-type="search" id="filter_input" placeholder="search content..."> 
    </form> 
    <form data-role="controlgroup" data-filter="true" data-filter-reveal="true" data-input="#filter_input" id="list_of_results"> 
     <!--here we get dynamically results from database--> 
    </form> 
</div> 

JAVASCRIPT: получение данных с помощью Ajax ответ. называется «pagebeforeshow» -event.

var data = response; 
var out = ""; 

for(var i=0; i < data.result.length; i++) { 
    out += '<input type="radio" name="result" id="' + data.result[i].name + '" value="' + data.result[i].name + '">'; 
} 
//add output to the page 
$("#list_of_results").html(out).enhanceWithin().controlgroup("refresh"); 

Я получаю эту ошибку:

Uncaught Error: cannot call methods on controlgroup prior to initialization; attempted to call method 'refresh' 

Answer 1

Вы должны обновить фильтруемый виджет тоже: http://api.jquerymobile.com/filterable/#method-refresh

$("#list_of_results").html(out).enhanceWithin().controlgroup("refresh").filterable("refresh"); 

Кроме того, складная виджет нуждается в заголовке

<div data-role="collapsible" id="collapsible_box"> 
    <h4>Heading</h4> 
    ... 

DEMO