Refreshing dynamically generated listviews repeatedly not working
I am new in jQuery Mobile, and I am starting to develop an app and I am running into a problem of refreshing dynamically generated listviews. I have checked extensively on the net for solutions, and I have tried a lot of suggestions but with no success in my app.
I have two pages. The first page is to choose a tournament, and in javascript I will open the second page which has the following (simplified) structure:
<div data-role="page" id="pageAutoDiv" data-theme="a" data-add-back-btn="true">
<div data-role="content" data-theme="c" id="fmtList">
<ul id="fmtListView" data-role="listview"></ul>
</div>
</div>
In javascript I use ajax to get data and if success I will populate the list dynamically. I use the following syntax
listVar.append ( $('<li />' )
.html ( "new item" )
).trigger("create");
to add items. I tried without the trigger() method as well.
The first time the listview always comes out fine with correct styling. When I click the "Back" button to go back to choose another tournament, it goes through the same code to empty() the old list, call ajax to get new data and populate the list again. But the styling is gone.
I have tried every imaginable solution I could find and try to "refresh" the list with no success. Such as listview();
listview("refresh");
trigger("create");
jQuery just seems to ignore everything after the first iteration.
Please suggest what else I could do.
Thanks in advance.