jQuery mobile list functions not working
This is the sample mobile app I'm building. Problem appears in the 'Search' tab. When user clicks 'Submit' a JSON objects list is added to the content of the ul list. But when user travels back to the search form (for example to change searching parameters) and submits the form again I need to clear the list, append elements once again and show. But whenever I try to run any listview function on my ul element, I end up on the start page of the whole application. I've already tried 'refresh', 'destroy' and different combinations but without satisfying results. Using just one listview() call works fine for the first displaying of the form but next one is not styled properly.
<!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>
Try cloning the initial element and replacing it with a clone of the saved clone each time before you do anything to it.
Something like this should work:
window.store=$('#search-results').clone();
$("#search-form").submit(function(){
$('#search-results').after(window.store.clone()).remove();
$('#search-results').listview();
//no clear needed
Powodzenia ;)
加载中,请稍侯......
精彩评论