listview into collapsible set不刷新

时间:2013-09-20 09:59:46

标签: jquery jquery-mobile

我有一个Jquery移动项目,其中一些页面为main,其中一个具有以下结构:

    @*Pagina componentes del documento*@
    <div id="PagDocumentoComponentes" data-role="page" data-theme="a">
        <div data-role="header" data-position="fixed">
            <a id="BtnVolverPagComponentes" href="#" data-rel="back" data-icon="back">Volver</a>
            <span id="PagDocumentoComponentesAdvertencia" style="color:red">Kit Incompleto</span>
            <h3 id="PagDocumentoComponentesTitulo">Componentes del Kit</h3>
        </div>
        <div data-role="content">
            <p>
                <div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="ComponentesDocumentoDisponibles">
                    <div data-role="collapsible" data-theme="e">
                        <h2>No hay componentes</h2>
                    </div>
                </div>
            </p>
        </div>
    </div>

使用此代码动态填充标记为id =“ComponentesDocumentoDisponibles”的可折叠集:

function mostrarComponentes(tcLink) {

$.post(tcLink, function (dataComponentes) {
    $('#ComponentesDocumentoDisponibles').children('.ui-collapsible').children('ul').remove('li',false);
    $('#ComponentesDocumentoDisponibles').children('.ui-collapsible').remove();
    //  Se recorre cada item del kit que tiene componentes variables
}).error(function (dataError) {
    alert('No se pudo caragr la información el kit (' + dataError + ')');
}).success(function (dataComponentes) {

    var kitNode = ''
    var ItemNode = '';
    $(dataComponentes).each(function (object) {
        var kit = $(this)[0];
        var idComponente = kit.id;
        kitNode += format('<div data-role="collapsible" data-max="1" id ="{0}" data-theme="e">', idComponente + "Collapsible");
        kitNode += format('   <h2>{0}</h2>', kit.StrDescripcion);
        kitNode += format('   <ul data-role="listview" data-inset="true" id="{0}">', idComponente);
        //  Se recorre cada item que compone el kit  
        $(kit.ItemsEnKit).each(function (object) {

            var item = $(this)[0];
            var iconoResta = '<image src="' + item.Image.toString() + '" class="ui-li-icon" style="width:22px;height:22px" />'

            ItemNode = format('<li data-cantidad="{0}" data-icon="plus" id="{1}">', item.NumCantidadAsignada.toString().trim(), item.Id);
            ItemNode += format('    <a href="#" onclick="modificarComponentes({0},{1});">{2} {3}</a>', quote(item.AccionDisminuir), quote(item.IdCantidad), iconoResta, item.StrDescripcion);
            ItemNode += format('    <a href="#" onclick="modificarComponentes({0},{1});"></a>', quote(item.AccionAumentar), quote(item.IdCantidad));
            ItemNode += format('    <span id="{0}" class="ui-li-count">{1}</span>', item.IdCantidad, item.NumCantidadAsignada);
            ItemNode += format('</li>');
            kitNode  += ItemNode;
        });
        kitNode += format('   </ul>');
        kitNode += format('</div>');
    });
    $('#ComponentesDocumentoDisponibles').html(kitNode);
    $('#ComponentesDocumentoDisponibles').collapsible();
    $('#ComponentesDocumentoDisponibles').find('div[data-role=collapsible]').collapsible();
    $(dataComponentes).each(function (object) {
        var kit = $(this)[0];
        $("#" + kit.id  + "Collapsible" ).collapsible();
        try
        {
            $("#" + kit.id).listview();
        } catch (e) {
            alert(e.message);
        }
    });
});
//PagDocumentoComponentes
//ComponentesDocumentoDisponibles
}

在一个典型的情况下,这个函数必须构建一个两个可折叠的项目,并在每个项目中都有一个列表视图。

我的问题出现在try catch块中,有时它工作正常,但有时会抛出此异常:

Unable to get the property 'jQuery182044178615987382985' not defined or null reference 

尝试初始化每个列表时。

可折叠元素总是很好地初始化,

注意:如果我至少访问一次可折叠集的父页面,那么一切都会好起来的。

1 个答案:

答案 0 :(得分:1)

最后找到了一个修复:我的数据的所有过程都是在jQuery success的{​​{1}}事件上执行的,只需将其移至post事件即可。

这似乎是我的应用程序和jQuery时间之间同步的问题。