jquery-mobile - Symfony 和 JQueryMobile 内容加载

Question

我用 symfony2 和 jqueryMobile 开发了一个移动网站

我以可折叠的方式加载列表视图，但得到了类似图像中的响应

这是我在第一页的代码

{% block content %}
<h4>Les Categories</h4>

<div data-role="collapsible-set" data-theme="b" data-content-theme="d" class="ui-collapsible-set">
{% for Categorie in Categories %}
    <div data-role="collapsible" data-collapsed="true" class="info" data-record="{{Categorie.id}}"> 
        <h1>{{ Categorie.Libelle }}</h1> 
        <p class="catdetail">

        </p>
    </div>
{% endfor %}
</div>
    <script>
    $('div.info').live('expand', function(){
        //get the ID for this record
        var record = $(this).data("record");
        console.log('expanded '+record);
        $(".catdetail", this).load("{{ path('Ecommerceboutique_mobile')}}dscat/"+record);
    });
</script>

{% 端块 %}

这里是可折叠加载的第二页

<ul data-role="listview" class="ui-listview">
{% for souscategorie in souscategories %}
    <li>
        <a href="{{ path('Ecommerceboutique_mobile_lstprdsouscat', { 'id': souscategorie.id })}}">
            {{souscategorie.Libelle}}
        </a>
    </li>
{% endfor %}

---

编辑

我将脚本添加到第二页但仍然是同样的问题

<script>
$(function() {
    $('.selector').listview('refresh');
});

Answer 1

拉出列表视图后，可能会刷新它

$(".catdetail", this).load("{{ path('Ecommerceboutique_mobile')}}dscat/"+record).listview('refresh');

jQM 文档：

• http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html

Answer 2

我解决了这个问题

    {% for souscategorie in souscategories %}
    <li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
        <div class="ui-btn-inner ui-li">
            <div class="ui-btn-text">
                <a href="{{ path('Ecommerceboutique_mobile_lstprdsouscat', { 'id': souscategorie.id })}}" class="ui-link-inherit">
                    {{souscategorie.Libelle}}
                </a>
            </div>
            <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span>
        </div>
    </li>
{% endfor %}

感谢菲尔的帮助