jquery mobile可折叠和galaxy tab 10.1 json响应给出随机响应

Posted 2023-05-09

【中文标题】jquery mobile可折叠和galaxy tab 10.1 json响应给出随机响应

【英文标题】：jquery mobile collapsible and galaxy tab 10.1 json response gives random responses

【发布时间】：2012-11-29 12:55:51

【问题描述】：

jquery mobile 的新手和解析 json 的新手 - 做了很多研究但无济于事。 已尝试在 settimeout 功能中延迟 10 秒

我的应用程序在我的三星 Galaxy s2 上正常运行，但在我的三星 Galaxy 平板电脑 10.1 上它执行以下操作。

使用最新的jquery 1.2.0 和jquery-1.7.2

我打电话给getlocations2.php，如果我返回四个或更少的物品，可折叠套装会正确打开和关闭。如果我退回 5 件或更多物品：

我点击顶部的可折叠将其展开 - 没有任何反应 我点击第二个可折叠的 h3，它会打开第一个可折叠的 之后它可以随机重新扩展 h3，但通常是最后一个被触摸且无法打开的 h3。 它可以在短时间内正常工作。

感谢任何提示：

代码：

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"   /></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>';

【问题讨论】：

当事情没有正确更新时，我为 jQuery Mobile 找到的两种“包罗万象”的解决方案是 $.mobile.activePage.trigger('create') 和 $(parent div)。触发器（“更新布局”）。当我以这种方式得到结果时，我总是觉得有点 hackish，但是这两个（特别是 $.mobile.activePage.trigger('create') 在不同情况下解决了许多意想不到的故障。

当您退回 5 件以上的商品时，您的最终版本的“g_html”是有效的 HTML 吗？具体来说，所有标签都正确关闭了吗？

这已经快两年了，截至 2014 年 6 月 10 日，它在 Stackexchange 上被评为第二高投票未回答的 jQuery 问题。这已经解决了吗？我的猜测是您的问题背后有一些时髦的代码。第 12 行和第 40 行缺少两个分号 ;。我将从修复它开始。最好使用 x += y 运算符而不是 x = x + y，以避免错误代码因拼写错误而潜入。我将这些修复程序放在这个 JSFiddle 中：jsfiddle.net/ubLyoc99/2 很长一段时间没有任何活动我建议 OP 提供更新或管理员关闭此问题。

【参考方案1】：

如果我错了，请纠正我，据我在阅读您的代码时所知，可能存在多个问题

首先，g_html变量的引用，你为什么不在lochtml函数中返回html，在你的for循环中，像这样构建HTML ，更易读

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

第二，g_html的初始值被设置为res[0].brand，它的值是多少？

第三，这是为可折叠集 div 生成的内容：

    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>

这不是 jQuery Mobile 对 data-role="collapsible-set" 内容的期望，我认为应该只有 在 。我建议你把 移到

里面