Jquery mobile losing formatting on a ul listview -

this listview element:

<ul data-role="listview" data-inset="true" id="acceptedcontent" data-theme="c"> </ul> 

create process works fine first time through , listview looks supposed , appears working great:

$('#acceptedcontent').append('<li><a href="#info' + results.rows.item(i).infoid + '" data-transition="flow">' + results.rows.item(i).info + '</a></li>'); 

i call empty div, works , clears div out:

$('#acceptedcontent').empty(); 

refresh page ajax post, when data read database rebuild pages. list page loses formatting. call same function built page first time with.

rebuilding section data populated loose formatting

$('#acceptedcontent').append('<li><a href="#info' + results.rows.item(i).infoid + '" data-transition="flow">' + results.rows.item(i).info + '</a></li>'); 

any suggestions appreciated ive been @ feels days trying figure 1 out.

ive tried following along mucking around order of execution nothing got work, put following listview refresh after made append call in rebuild section:

$("#acceptedcontent").listview('refresh'); $("#acceptedcontent ul").listview('refresh'); 

thanks help.

okay, here's how :

you've got listview :

<ul data-role="listview" data-inset="true" id="acceptedcontent" data-theme="c"> </ul> 

you've got data you'll loop through , format <li/>. instead of appending multiple times, collect li html in variable , append it, once :

var li = ""; //your loop, $.each, or for..in li += '<li><a href="#info' + results.rows.item(i).infoid + '" data-transition="flow">' + results.rows.item(i).info + '</a></li>'; //end of loop 

so now, youve got data in 1 variable called li. how use this? put in <ul/>

$('#acceptedcontent').html(li); 

this way cut down use of empty , append. use html() erase , re-write.

now comes important part. have refresh listview. you've got use listview("refresh"), not in way you've done it. have wait html() finish work. then, must use refresh api, :

$('#acceptedcontent').html(li).promise().done(function () {    //refresh here - $(this) refers ul here    $(this).listview("refresh"); }); 

you've got buttons in there. in case can refresh using trigger method. code :

$('#acceptedcontent').html(li).promise().done(function () {    //refresh here - $(this) refers ul here    $(this).listview("refresh");    //causes refresh happen on elements such button etc. lie inside ul    $(this).trigger("create"); }); 

note : if error

uncaught error: cannot call methods on listview prior initialization; attempted call method 'refresh'.

change

$(this).listview("refresh"); 

to

$(this).listview().listview("refresh");