white screen appears during Scroll in phonegap -2.9.0?

Question

i am using:

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
 <head>    
    <link rel="stylesheet" href="css/lib/jquery.mobile.structure-1.3.2.min.css"/>
    <link rel="stylesheet" href="css/lib/jquery.mobile.theme-1.3.2.min.css"/>
    <link rel="stylesheet" href="css/lib/jquery.mobile-1.3.2.min.css"/> 
    <script type="text/javascript" src="js/lib/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/lib/jquery.mobile-1.3.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/lib/cordova.js"></script>
</head>
<body>
    <div data-role="page" id="assignedProposalPg" style="margin-top: 0px;">
    <div data-role="content">
    <div id="assignedPropList"> </div>
    </div>
    </div>
</body>

in file.js i have written following code getting all values but only WHITE SCREEN APPEARS DURING SCROLL

function fillData()
{ 
     for (var i = 0;i < obj.Proposal.length; i++) 
{
     var htmlString = '<fieldset data-role="controlgroup">';    
     var fieldId = 'ap' + i;
     proposalIds += obj.Proposal[i].id + ',';
     htmlString += '<input type="radio" name="assigned_proposal_id" id="' + fieldId + '" value="' +          obj.Proposal[i].enquiry_no + ',' + obj.Proposal[i].id + '"/><label for="' + fieldId + '" >' + obj.Proposal[i].enquiry_no + '-' + obj.Proposal[i].caller_name + '-' + obj.Proposal[i].post_code + '</label>';
}
     htmlString += '</fieldset>';
     $("#assignedPropList").empty().append(htmlString).trigger('create');
}

why this is happening? added video of situation issue description

So when you dont scroll, the data is there and when you do scroll it is just white and then data returns when you stop scrolling again? — Dom, Sep 13 '13 at 12:06
yes when i dont scroll, the data is there and when i do scroll it is combination of white and my data as well 50% data and 50% white after some time white disappears and my data fully visible — nida, Sep 13 '13 at 12:43
pls see the edited question have added issue video is it accessible to u ? — nida, Sep 13 '13 at 12:48

score 0 · Accepted Answer · answered Sep 13 '13 at 12:53

0

Video really helped me understand. Thanks. The issue is that there is so much data the device is having trouble keeping up with it and rendering it due to memory. Your best bet would be to paginate the data and only load 25 records or so at a time. Then add forward and back buttons to load next/previous set of records. If the data is stored locally then you have no issue. If you are getting the data remotely, via json for example, then only get the data once and load it into an array. Then just iterate through the array with your pagination setup.

answered Sep 13 '13 at 12:53

Dom

2,561
1
16
28

thanks a lot for your reply will try to do but is there any simple possibility to resolve this issue in short time – nida Sep 13 '13 at 12:54
Adam's answer below is a quick fix but with the amount of data you have you really want to go to a pagination system. From a UX perspective anyways. jQuery Mobile offers a really cool search system with their listviews. Might be worth checking out for your long-term fix. – Dom Sep 13 '13 at 13:13

white screen appears during Scroll in phonegap -2.9.0?

1 Answers1