how to get json ajax data fast and store it in localstorage and display it in jquery mobile listview

Question

when I call ajax to my server I got 1000 up data, I store that data in my local storage and display it in jQuery mobile list-view, but this take almost 50-60 sec to display or load data. how to make this process fast?

Here is my code:

var PollChallengeVoterDataUrl = ROOT+'testmaster/view/'+intCLMid+'/'+intCLTid+'/?UserId='+intUserId+'&UserRole='+intUserRole;
var data = "CampaignId="+IntCampaignId;

jQuery.ajax({
    url: PollChallengeVoterDataUrl,
    type: "GET",
    async: false,
    dataType: 'jsonp',
    jsonpCallback: 'Cconnect',
    data: data,
    success: function(response,request)
    {
        var statusresult=response.success;

        if(statusresult)
        {
            var data_arr = response.pollChallengeDetail[0];
            var data_len = response.pollChallengeDetail[0]['pollChallengeCount'];

            localStorage.removeItem(PollChallengeVoterList);
            if(data_len > 0)
            {
                $.each(data_arr, function(k, v) {

                    if(k == 0)
                    {

                    }
                    addToStorage(k,v,PollChallengeVoterList);
                });
            }
        }
    },
    error: function(e){
        alert('Error: ' + e);
    }
});
$.mobile.changePage('test.html', { transition:"slide" ,changeHash : true });

Test.html Display Code

 <div data-role="content">   
 <ul data-role="listview" id="pollChallengeVoterList" data-divider-theme="b" data-inset="true"></ul>
 </div>

<script type="text/javascript" src="js/test.js"></script>

test.js Code

var strDataResult = hasInStorage("PollChallengeCount",PollChallengeVoterList);
var strDataList = '';
$("#pollChallengeVoterList").html(strDataList);
var arrMainDataDetail = getArrayStorage(PollChallengeVoterList);

var intDataCount = arrMainDataDetail.pollChallengeCount;
for(j = 0; j < intDataCount; j++)
{
var intClmId = arrMainDataDetail.CLMid;
var intCvdId = arrMainDataDetail[j].CVDId;
var intCltId = arrMainDataDetail[j].CLTId;
var intPollChallengeVoterId = arrMainDataDetail[j].VoterId;
if(arrMainDataDetail[j].Voted == 0)
{
    var intFlg = 1;
}
else
{
    var intFlg = 0;
}

if(arrMainDataDetail[j].Challenged==1)
{
    var strChallengedColor = "#9F1335" ;
}
else
{
    var strChallengedColor = "" ;
}

if(arrMainDataDetail[j].AptUnitNo == "")
{
    strAddressRecord =arrMainDataDetail[j].AddressLine1;
}
else
{
    strAddressRecord =arrMainDataDetail[j].AddressLine1+' ,  # '+arrMainDataDetail[j].AptUnitNo;
}

if(arrMainDataDetail[j].Challenged==1)
{
    strVoterClass = "voted";
    strVoterStatus ='Challenged';
}
else
{
    if(arrMainDataDetail[j].Voted == 0)
    {
        strVoterClass = "voted";
        strVoterStatus ='Voted';
    }
    else
    {
        strVoterStatus ='Undo</span><span class="ui-li-count unvoted">Voted</span>';

    }
}

$('#pollChallengeVoterList').append('<li data-theme="c" data-icon="false"><a href="javascript:void(0)" style="color :'+strChallengedColor+'" data-transition="slide" onclick=ajaxupdatevote("'+intClmId+'","'+intCvdId+'","'+intCltId+'","'+intPollChallengeVoterId+'","'+intFlg+'","'+j+'")>'+arrMainDataDetail[j].LastName+', '+arrMainDataDetail[j].FirstName+'<span class="address" style="color :'+strChallengedColor+'">'+strAddressRecord+'</span><span class="ui-li-count '+strVoterClass+'">'+strVoterStatus+'</span></a></li>');
}

$("#pollChallengeVoterList").listview("refresh");

Answer 1

First of all there isn't anything much you can do here. If I understood you correctly you are displaying a listview of 1000 items and this is a problem.

Think about it, you are forcing jQuery Mobile to generate and enhance a huge listview. By some measurements jQuery Mobile works best with listview of max. 50-60 items.

To fix this problem you will need to redesign your listview logic. First pull only 50 items from a server. Second implement a pagination. Basically you will need to send one more parameter to a server and it is a page number, use it to calculate which data range you should send back.

On a client side you need also to implement pagination. There are two possible solutions. You can do it with buttons, like on a normal web page. This is probably easiest solution but at the same time it is not the best.

Best solution would be to pull new set of data when page bottom has been reached. This cn be easily done. I will even give you 2 working examples of how this can be achieved. You can implement listview infinite-scroll with a help of a jQuery plugin called Waypoints. It can be used to detect listview has reached bottom, it will then trigger an event which can be used to pull another set of dynamic data and enhancement process will start again.

This will detect bottom end:

$('#example-offset-pixels').waypoint(function() {
    //notify('100 pixels from the top');
}, { offset: 100 });

Or you can take a look at my older example and see how it can be done manually (I prefer this solution over waypoints, it has a better bottom detection): jsFiddle