JQuery Mobile Dynamic Listview Loses Style (data-inset) After Updating

I am creating a mobile app (Phonegap/Cordova 1.5.0, JQM 1.1.0) and testing on iOS 5.1. I have a list of items that the user 'owns' or wants to own. Throughout the app, the user can

Solution 1:

I figured out the answer to my question, but not a solution (yet).

$(list).listview('refresh') was getting called on some elements before they had been put on the page, so it was essentially being called on nothing (or another way to think about it is that each list item being appended happens after the refresh call, so it overrides some of the visual styling).

I know the problem has to do with asynchronous loading in javascript. Essentially, the .listview('refresh) executes before the earlier code, which creates the elements but takes longer to execute. I understand the reasoning behind the design, but is there some way to get around this in this case?

I am thinking some conditional that I could set, like:

var doneLoading = false;
//Then when finished set doneLoading to 'true'
if(doneLoading) $(list).listview('refresh');

but if the refresh gets called first, I figure that doneLoading will just evaluate to false and then not execute once the list is actually done loading.

Is there any kind of onComplete callback I can use, or a way to make it happen synchronously?

Solution 2:

Try calling listview(refresh) after updating the HTML.