0

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'
J-ho
  • 238
  • 3
  • 17

1 Answers1

2

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

ezanker
  • 24,628
  • 1
  • 20
  • 35
  • I get this error "Uncaught Error: cannot call methods on controlgroup prior to initialization; attempted to call method 'refresh'" I'm calling the javascript function in pagebeforeshow method. – J-ho Aug 20 '16 at 10:02
  • @J-ho, I changed the codepen to use pagebeforeshow and it still works fine. Can you edit the codepen to reproduce your error? – ezanker Aug 20 '16 at 19:53
  • If I just do `$("#list_of_results").html(out).enhanceWithin();` it shows the results, but doesn't update it when trying to filter them. If I do however put `$("#list_of_results").html(out).enhanceWithin().controlgroup("refresh").filterable("refresh");`, it doesn't show anything and I don't get even a error.. – J-ho Aug 21 '16 at 07:11
  • @J-ho, with data-filter-reveal="true" nothing will show until you type in search criteria... – ezanker Aug 21 '16 at 10:56
  • I finally found the problem: I had that filters id-tag named with "something-something", which ruined it because it had that "-" doh. changed it simply to "_". dummy typos.. Oddly enough I think it works in your demo though if you change "_" from id-tags to "-". – J-ho Aug 21 '16 at 11:57