相当新的jquery移动和新的解析json – 做了很多研究没有用。
已尝试10秒延迟settimeout功能
已尝试10秒延迟settimeout功能
我的应用程序在我的三星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,'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',"+$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>'; }
纠正我,如果我错了,据我可以告诉当你读代码,可能有多个问题
首先,参考g_html变量,为什么不在函数lochtml中返回html,并在你的for循环中,建立这样的HTML,它更可读
for (var i=0;i<res.length;i++){ g_html=g_html+lochtml('loc',r...) }
第二,g_html的初始值设置为res [0] .brand,它的值是多少?
第三,这是为collapsible-set 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”的内容我应该只有< div data-role =“collapsible”>在< div data-role =“collapsible-set”>中。我建议您移动< div class ='locgoh'>内< h3>
第四,是否需要< div class =“clearfloat”> ;?你浮动标签p内可折叠?我有一些问题,当我使用“浮动”与一些jQM小部件之前。此外,如果clearfloat不需要在那里,最好是被删除。 最后,我认为collapsibleset(‘refresh’)应该在< div data-role =“collapsible-set”>不在其容器上。