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

}

Meilen

Two sort of 'catch-all' solutions that I have found for jQuery Mobile when things are not updating properly are $.mobile.activePage.trigger('create') AND $(parent div).trigger('updatelayout'). I always feel kind of hackish when I get the result this way, but these two (particularly $.mobile.activePage.trigger('create') have solved many unexpected glitches in different situations. – Article

When you return 5+ items, is your final version of 'g_html' valid HTML? specifically, are all tags being closed properly? – Benito

This is almost two years old and as of 10/06/2014 is rated as the second highest voted unanswered jQuery question on Stackexchange. Has this been resolved yet? My guess is there is some funky code behind your issues. There are two missing semi-colons ; on line 12 & 40. I'd start by fixing that. It's preferable to use the x += y operator instead of x = x + y, to avoid bad code sneaking in with typos. I put these fixes in this JSFiddle: jsfiddle.net/ubLyoc99/2 There hasn't been any activity on this for a long time I suggest OP gives an update or an admin closes this question. – Yoakum

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.

Coats