Это пример мобильного приложения, которое я создаю. Проблема появляется на вкладке «Поиск». Когда пользователь нажимает «Отправить», к содержимому списка ul добавляется список объектов JSON. Но когда пользователь возвращается к форме поиска (например, чтобы изменить параметры поиска) и снова отправляет форму, мне нужно очистить список, добавить элементы еще раз и показать. Но всякий раз, когда я пытаюсь запустить какую-либо функцию listview для моего элемента ul, я оказываюсь на стартовой странице всего приложения. Я уже пробовал «обновить», «уничтожить» и различные комбинации, но без удовлетворительных результатов. Использование только одного вызова listview () прекрасно работает для первого отображения формы, но следующий не оформлен должным образом.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<style type="text/css">
p {
font-size: 11px;
}
.centered {
text-align:center;
}
.search-detail {
}
</style>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="menu">
<div data-role="header" data-position="fixed">
<h1>Menu</h1>
</div>
<div data-role="content">
<ul data-role="listview" role=listbox"" data-theme="c">
<li><a href="#page-1" data-transition="pop">About</a></li>
<li><a href="page-2" data-transition="slide">Contact</a></li>
<li><a href="page-3" data-transition="fade">Search</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<p class="centered">footer text</p>
</div>
</div>
<!-- Start of second page -->
<div data-role="page" id="page-1">
<div data-role="header" data-position="fixed">
<h1>O nas</h1>
</div>
<div data-role="content">
<p>Code blah blah...</p>
</div>
<div data-role="footer" data-position="fixed" data-id="myfooter">
<p class="centered">footer text</p>
</div>
</div>
<!-- Start of second page -->
<div data-role="page" id="page-2">
<div data-role="header" data-position="fixed">
<h1>Contact</h1>
</div>
<div data-role="content">
<p>Code blah blah...</p>
</div>
<div data-role="footer" data-position="fixed" data-id="myfooter">
<p class="centered">footer text</p>
</div>
</div>
<!-- Start of third page -->
<div data-role="page" id="page-3">
<div data-role="header" data-position="fixed">
<h1>Search</h1>
</div>
<div data-role="content">
<form action='' method='post' data-theme="d" id="search-form">
<!-- <div data-role="fieldcontain"> -->
<select multiple="multiple" id="select-choice-9" name="select-choice-9" tabindex="-1">
<option>Choose city</option>
<option value="warszawa">Warszawa</option>
<option value="katowice">Poznań</option>
<option value="krakow">Kraków</option>
</select>
<!-- </div> -->
<div data-role="fieldcontain">
<label for="slider-2">Available space :</label>
<input type="number" data-type="range" max="5000" min="0" value="500" id="slider-2" name="slider-2">
</div>
<button type="submit">Submit</button>
</form>
</div>
<div data-role="footer" data-position="fixed" data-id="myfooter">
<p class="centered">footer text</p>
</div>
</div>
<!-- Start of third page -->
<div data-role="page" id="page-4">
<div data-role="header" data-position="fixed">
<h1>Search results</h1>
</div>
<div data-role="content">
<ul role="listbox" id="search-results" data-theme="c">
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="myfooter">
<p class="centered">footer text</p>
</div>
</div>
<script type="text/javascript">
var data = [{
"id":"1",
"name":"City Point",
"city": "Warszawa",
"free_size": "23587",
"image": "http://magazyny.pl/static/realestate/wp/wpp157867149156355.jpg.75x46_q85_crop.jpg",
"developer": "VALAD"
},
{
"id":"2",
"name":"Point Park Poznań",
"city": "Poznań",
"free_size": "21600",
"image": "http://magazyny.pl/static/realestate/wp/wpp-210090413292956.jpg.75x46_q85_crop.jpg",
"developer": "Point Park Properties",
},
{
"id":"3",
"name":"City Point",
"city": "ProLogis Poznań Park II",
"free_size": "17775",
"image": "http://magazyny.pl/static/realestate/wp/wpp208075492646126.jpg.75x46_q85_crop.jpg",
"developer": "ProLogis"
},
{
"id":"4",
"name":"Żerań Park I",
"city": "Warszawa",
"free_size": "14010",
"image": "http://magazyny.pl/static/realestate/wp/wpp-98178239484070.jpg.75x46_q85_crop.jpg",
"developer": "Heitman"
},
{
"id":"5",
"name":"Manhattan Distribution Center",
"city": "Warszawa",
"free_size": "5184",
"image": "http://magazyny.pl/static/realestate/wp/wpp-93618025184421.jpg.75x46_q85_crop.jpg",
"developer": "Heitman"
},
{
"id":"6",
"name":"Tulipan Park Poznań II",
"city": "Poznań",
"free_size": "4860",
"image": "http://magazyny.pl/static/realestate/wp/wpp163586398858964.jpg.75x46_q85_crop.jpg",
"developer": "Segro"
},
{
"id":"7",
"name":"Platan Park",
"city": "Warszawa",
"free_size": "3915",
"image": "http://magazyny.pl/static/realestate/wp/wpp-137028541192797.jpg.75x46_q85_crop.jpg",
"developer": "Platan Group"
},
{
"id":"8",
"name":"ProLogis Park Poznań I",
"city": "Poznań",
"free_size": "3240",
"image": "http://magazyny.pl/static/realestate/wp/wpp154210374046076.jpg.75x46_q85_crop.jpg",
"developer": "ProLogis"
},
{
"id":"9",
"name":"Ursus Logistic Center",
"city": "Warszawa",
"free_size": "3240",
"image": "http://magazyny.pl/static/realestate/wp/wpp176885389187907.jpg.75x46_q85_crop.jpg",
"developer": "Orpol"
},
{
"id":"10",
"name":"Żerań Park II",
"city": "Warszawa",
"free_size": "3150",
"image": "http://magazyny.pl/static/realestate/wp/wpp-114950647511829.jpg.75x46_q85_crop.jpg",
"developer": "Apollo Rida"
}];
var clear = function(){
console.log('clear');
document.getElementById('search-results').innerHTML = '';
}
var searchObjects = [];
$(document).ready(function(){
//wrapper na submit formularza nadpisujacy domyslna akcje z jQm
$("#search-form").submit(function(){
$('#search-results').listview();
//$("#search-results").listview("destroy");
clear();
$.each(data, function(i, m) {
$('#search-results').append(''+
'<li class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option" tabindex="0" data-theme="c">'+
'<div>'+
'<img src=\"'+ m.image +'\" class="ui-li-thumb">'+
'<h3 class="ui-li-heading"><a href="index.html" class="ui-link-inherit">'+ m.name +'</a></h3>'+
'</div>'+
'<div class=\"search-detail\"><p>'+ m.developer +'</p></div>'+
'<div class=\"search-detail\"><p>'+ m.city +'</p></div>'+
'<span class="ui-icon ui-icon-arrow-r"></span></li>'
);
//$('#search-results').listview('refresh');
searchObjects.push(m);
});
//$("#search-results").listview('destroy');
$('#search-results').listview();
//$('#search-results').listview('refresh');
$.mobile.changePage('page-4', 0, 'page-3');
return false;
});
});
</script>
</body>