Why my listview style change when I loop the javascript twice? [closed]

Question

I develop an android native application using phonegap and jquery mobile. I've made a function to create a listview style dynamically using looping for... When I run the function for the first time, it works, the listview style is working, and match with the content. but when I press back button and run the function again, the style change (the listview style is gone) but the content still there. is my function wrong? how to solve this problem?

the screenshoot for more explanation:

• this is the result when I press the back button and run the function again

the codes for more detail:

function detail(kodenegara, koderesult)
        {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: "http://10.80.3.73/webservice/Service1.svc/json/weeklyflash/"+kodenegara,
                dataType: "json",
                success:function(data){
                    var result = koderesult;

                    maks = -1;
                    for(i = 0; i < data[result].length; i++) {
                        if(data[result][i].bulan > maks) 
                        maks = data[result][i].bulan;
                    }

                    var loop_tipe = countTypesForBulan(data[result], maks);
                    var innerHtml = "";

                    for (i = 0; i < loop_tipe; i++){
                        a=i+loop_tipe;
                        b=a+loop_tipe;
                        innerHtml += 
                        "<div data-role='collapsible' data-collapsed='true'>"+
                        "<h3>"+data[result][i].type+"</h3>"+
                        "<table width='100%' border='1'>"+
                            "<tr>"+
                                "<td>&nbsp;</td>"+
                                "<td style='text-align: center'>"+data[result][i].bulan+"/2012</td>"+
                                "<td style='text-align: center'>"+data[result][a].bulan+"/2012</td>"+
                                "<td style='text-align: center'>"+data[result][b].bulan+"/2012</td>"+
                            "</tr>"+
                            "<tr>"+
                                "<td>Cash</td>"+
                                "<td style='text-align: right'>"+data[result][i].uang+"</td>"+
                                "<td style='text-align: right'>"+data[result][a].uang+"</td>"+
                                "<td style='text-align: right'>"+data[result][b].uang+"</td>"+
                            "</tr>"+
                            "<tr>"+
                                "<td>Qty</td>"+
                                "<td style='text-align: right'>"+data[result][i].total+"</td>"+
                                "<td style='text-align: right'>"+data[result][a].total+"</td>"+
                                "<td style='text-align: right'>"+data[result][b].total+"</td>"+
                            "</tr>"+
                        "</table>"+
                        "</div>";
                    }
                    $('#tipe').html(innerHtml);
                    $.mobile.changePage("#detail", "slide", false, true);

                    //show the page
                },
                error: function () { 
                    alert("ERROR"); 
                }
            });
        }

        function countTypesForBulan(resultArray, bulanVal) {
            var i,
                types,
                count = 0;
            for (i=0, types = {}; i < resultArray.length; i++)
                if (resultArray[i].bulan === bulanVal && !types[resultArray[i].type]) {
                types[resultArray[i].type] = true;
                count++;
            }
            return count;
        }

• here is for simulation my project with jsfiddle

Answer 1

I can't see anything wrong with your code in terms of why it gives you different styles. I would however ensure you have a consistent coding standard.

For example my coding standards usually include:

1. Always declare variables. Variable maks is never declared here (I'm going to assume it is never declared.) Change it to var maks = -1;

2. Always use { and }. This will ensure you don't screw up a block.

   if(data[result][i].bulan > maks) 
       maks = data[result][i].bulan;
   

   would become:

   if(data[result][i].bulan > maks)
   {
       maks = data[result][i].bulan;
   }
   

   Its just proofing for us who make mistakes from time to time.

3. make local variables where possible

   if (resultArray[i].bulan === bulanVal && !types[resultArray[i].type]) {
       types[resultArray[i].type] = true;
       count++;
   }
   

   could be:

    var current = resultArray[i];
    if (current.bulan === bulanVal && !types[current.type]) {
       types[current.type] = true;
       count++;
   }
   

   It means less look ups. Most of the time its easier to read.