jquery mobile refresh issue

jquery mobile refresh issue

basically what i'm trying to do is to make a list items in a unorderedlist
tag.
<ul data-role="listview" id="places" data-inset="true">
</ul>
now each list item got a info and a picture - which is in a javascript file.
var listOfPlaces = [
{ place: "paris", visited: "no", pic: "1.jpg"},
{ place: "london", visited: "yes", pic: "2.jpg"}];
localStorage.setItem("placesList", JSON.stringify(listOfPlaces));
now what im trying to do is that by using a for loop i want to create a
item inside the list of the places with a value "yes" for the visited key.
but not only this, i also want to make the option that when pressed on the
list item, than a large pic will shown in a popup.
so what i've done is the this code -
<script>
var dataPlace = localStorage.getItem("placesList"); var placesInfo =
JSON.parse(dataPlace);
$(function () {
placelist();
$("#places ul").listview('refresh');
})
function placelist() {
var i = 0;
for (i = 0; i < placesInfo .length ; i++) {
if (placesInfo[i].visited == "yes") {
$("#places ul").append('
Place's name: ' + placesInfo [i].model + "
');
$("#poUp").append('<div data-role="popup" id="pic' + i +
'"data-overlay-theme="a" data-theme="d"
data-corners="false"><a href="#" data-rel="back"
data-role="button" data-theme="a" data-icon="delete"
data-iconpos="notext" class="ui-btn-right"> Close</a><img
class="photo" style="max-height:512px;" src="pics/' +
placesInfo[i].pic + '"/></a> </div>');
now from what i have tried this code "static" - i have put it in the body
of the html and it worked fine - but when im using it this way im getting
the list - and underneath it i see all the pics with a close kind of link
text next to it.
im guessing that the problem is because i need to use a code like the
listview('refresh'), that i have for the list item, the things is that i
am not sure how to use the refresh method with other elements.
so if anyone could help and explain what im doing wrong, and how can i
solve it, thank you for any kind of help