的 DEMO

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>
    ...

在可折叠的jquery-mobile中添加动态可过滤的控制组

1 个答案:

的 DEMO