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

add dynamically filterable controlgroup inside collapsible jquery-mobile

本文关键字：动态 过滤 控件 添加 可折叠 jquery-mobile      更新时间：2023-09-26

我试图使可折叠框，这将有项目的控制组，可以通过过滤。控件组中的内容应该从数据库结果动态生成。问题是它没有输出。我设法使controlgroup在可折叠盒外工作，但不在里面。它不会显示任何结果。

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"事件中调用。

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'

您也应该刷新可过滤的小部件: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>
    ...

相关文章：