Search code examples
javascriptjqueryjquery-mobilejquery-mobile-collapsible

add dynamically filterable controlgroup inside collapsible jquery-mobile

I'm trying to make collabsible box, which will have controlgroup of items that can be filtered through. Stuff inside controlgroup should be made dynamically from database results. Problem is it doesn't output it. I manage to make controlgroup work outside collapsible-box, but not inside it. It won't show any results.

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: getting data with ajax response. is called on "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");

I get this error:

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

  • You should refresh the filterable widget too: http://api.jquerymobile.com/filterable/#method-refresh

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

    Also, the collapsible widget needs a heading 

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

    DEMO