jquery mobile collapsible and galaxy tab 10.1 json response gives random responses

Question

Fairly new to jquery mobile and new to parsing json - have done much research to no avail. Have tried 10sec delay in settimeout function

My app works correctly on my samsung galaxy s2 but on my samsung galaxy tablet 10.1 it does the following.

Using latest jquery 1.2.0 and jquery-1.7.2

I call getlocations2.php and if i return four items or less the collapsible set opens and closes correctly. If i return 5 or more items :

1. i click on the top collapsible to expand it - nothing happens
2. i click on second collapsible h3 and it opens first collapsible
3. after that it can get random re expanding h3's but usually it is the last h3 that was touched and failed to open.
4. it can work correctly for a short while.

Thanks for any tips:

Code :

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

Correct me if I'm wrong, as far as I could tell when reading your codes, there could be multiple issues

First of all, the reference of g_html variable, why don't you return the html in function lochtml and in your for loop, build up the HTML like this, it's more readable

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

Second, the initial value of g_html is being set to res[0].brand, what is it value?

Third, this is what's being generated for the 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> 

This was not what jQuery Mobile expect of content of a data-role="collapsible-set" I supposed, there should be only <div data-role="collapsible"> inside a <div data-role="collapsible-set">. I suggest that you move the <div class='locgoh'> inside <h3>

Forth, is there a need for <div class="clearfloat">? did you float tag p inside the collapsible? I had some issue when I used "float" with some jQM widgets before. Besides, if clearfloat doesn't need to be there, it's better to be removed.

Lastly, I think the collapsibleset('refresh') should be called on the <div data-role="collapsible-set"> not on its container.