ajax - data - jquery mobile collapsible y galaxy tab 10.1 json response da respuestas aleatorias

jquery mobile accordion

Question

Bastante nuevo en jquery mobile y nuevo en analizar json: he investigado mucho en vano. Han intentado 10 segundos de retraso en la función settimeout

Mi aplicación funciona correctamente en mi samsung galaxy s2 pero en mi Samsung Galaxy Tablet 10.1 hace lo siguiente.

Usando los últimos jquery 1.2.0 y jquery-1.7.2

Llamo a getlocations2.php y si devuelvo cuatro elementos o menos, el conjunto plegable se abre y cierra correctamente. Si devuelvo 5 o más artículos:

1. hago clic en la parte superior plegable para expandirlo - no pasa nada
2. hago clic en el segundo colapsable h3 y se abre primero colapsable
3. después de eso puede volver a expandirse aleatoriamente h3, pero generalmente es el último h3 que se tocó y no se pudo abrir.
4. puede funcionar correctamente por un corto tiempo.

Gracias por cualquier consejo:

Código:

function doajax2($vurl,$vdata,$vtype,$vfrom){   
    $.ajax({
        url: $vurl,
        dataType: ''json'',
        data:$vdata,
        async: false,
        success: function(rtndata) {
            $.mobile.hidePageLoadingMsg(); //alert(result.toSource())   
            rtndata2=(JSON.stringify(rtndata, null, 4));
            rtndata2=rtndata2.substring(13);
            rtndata2=rtndata2.slice(0, -2)

            var res = eval(rtndata2);           
            $(''.displaylocations'').html('''');    
            g_html=res[0].brand;

            if (res[0].id> -1){
                g_html=g_html+''<div data-role="collapsible-set" data-theme="f" >'';
                for (var i=0;i<res.length;i++){
                //for (var i=0;i<6;i++){            
                    lochtml(''loc'',i,res[i].locid,res[i].loccode1,res[i].head,res[i].desc,res[i].lang,res[i].lat1,res[i].long1,res[i].img1,res[i].limit);        
                }
                g_html=g_html+''</div>'';
            }

            console.log(''g_html''+g_html);
            $(''.displaylocations'').css(''display'',''none'');           
            $(".displaylocations").html(g_html);    
                    //  $(".displaylocations").html(str);   


            setTimeout(function(){ //make sure displaylocations has been updated
                $(''#lhead2'').html(''Tuhura <span lang="en">Locations</span>'');
                $(''.displaylocations'').trigger(''create'');
                $(''.displaylocations'').css(''display'',''block'');
                $( ".displaylocations" ).collapsibleset( "refresh" );

            },300);
        },
        error: function(faildata){
            switch ($vfrom) {
                case "region"   : $("#lhead3").html(''Region Info Unavailable...'');break
                case "locs"     :   $("#lhead2").html(''Locations Unavailable...'');break;
            }
        }
    });
}

function lochtml($vtype,$vno,$locid,$loccode1,$head,$desc,$vlang,$vlat1,$vlong1,$img1,$limit) {
console.log(''lochtml ''+$desc);
        g_html=g_html+  "<div class=''locgoh''>";
        g_html=g_html+      ''<a href="#" onclick="getsitedetails(''+"''gps'',''"+$locid+"'',''"+$loccode1+"'',''s'',''sites'',''"+$vlang+"'',1,0,''x'',"+$vlat1+","+$vlong1+'')">'';
        g_html=g_html+ ''<img src="http://tuhtop.co.nz/images/rightarrow.png" width="30px" height="30px" /></a>'';                                                                            
        g_html=g_html+  ''</div>'';
        g_html=g_html+''<div data-role="collapsible" class="loccollapse" data-theme="f" div="coldiv">'';              
        g_html=g_html+  ''<h3>''+$head+''</h3>'';                                               
        g_html=g_html+  ''<p><div class="locli0">'';                                  
        g_html=g_html+      ''<span class="li1">'' +$desc+ ''</span>'';                     
        g_html=g_html+      ''<span class="li2"><a href="#" onclick="getsitedetails(''+"''gps'',''"+$locid+"'',''"+$loccode1+"'',''s'',''sites'',''"+$vlang+"'',1,0,''x'',"+$vlat1+","+$vlong1+'')">'';
        g_html=g_html+      ''<img src=/'''+$img1+''/' width=/'120"/' height=/'120/' alt=/'''+$img1+''/'/></a>'';         
        g_html=g_html+      ''</span>'';      
        g_html=g_html+  ''</div></p>'';       
        g_html=g_html+''<div class="clearfloat"></div>'';             
        g_html=g_html+''</div>'';

}

Answer 1

Corrígeme si me equivoco, por lo que pude ver al leer sus códigos, podría haber múltiples problemas

Antes que nada, la referencia de la variable g_html , ¿por qué no devuelves el html en la función lochtml y en tu ciclo for, construyes el HTML así, es más legible?

    for (var i=0;i<res.length;i++){
        g_html=g_html+lochtml(''loc'',i,r...)
    }

En segundo lugar, el valor inicial de g_html se establece en res [0] .brand , ¿qué valor tiene?

En tercer lugar, esto es lo que se genera para la div del conjunto contraíble:

    the res[0].brand above 
    <div data-role="collapsible-set" data-theme="f">
        <div class=''locgoh''>
            <a ...>
                <img />
            </a>
        </div>
        <div data-role="collapsible" class="loccollapse" data-theme="f" div="coldiv">
            <h3>...</h3>
            <p>...</p>
            <div class="clearfloat"></div>
        </div>
        ...
        ...
    </div>

Esto no era lo que jQuery Mobile esperaba del contenido de un data-role = "collapsible-set", supongo, solo debería haber <div data-role = "collapsible"> dentro de un <div data-role = "collapsible-set" > . Le sugiero que mueva la <div class = ''locgoh''> dentro de <h3>

Adelante, ¿hay una necesidad de <div class = "clearfloat"> ? ¿Flotaste la etiqueta p dentro de lo plegable? Tuve un problema cuando usé "flotar" con algunos widgets jQM antes. Además, si clearfloat no necesita estar allí, es mejor eliminarlo.

Por último, creo que el collapsibleset (''refresh'') debería invocarse en el <div data-role = "collapsible-set"> que no está en su contenedor.