0
Kann mir jemand helfen, was ich tun soll, um die Dropdown-Liste zu aktualisieren, die auf der Seite Standorte entfernen angezeigt wird. Es ist von localstorage.city besetzt.Die dynamische Liste der Kontrollkästchen kann nicht aktualisiert werden
Klicken Sie auf "Panel öffnen" und dann auf Standorte entfernen. Hier sehen Sie eine Liste der Städte, die ich hinzugefügt habe, indem Sie auf die Schaltfläche Orte hinzufügen klicken.
Löschen Sie einige Standorte und klicken Sie dann auf die Schaltfläche Standorte entfernen. Sie werden feststellen, dass zuvor gelöschte Orte noch vorhanden sind.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" /> <!-- came from cordova -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" data-semver="2.1.3" data-require="jquery"></script>
<script>
var SectedCityCode, URL, prov;
$(document).bind('mobileinit',function(){
$.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- <script src="js/cities.js"></script> -->
<script>
$(document).on("pagecreate", function() {
// Save settings
$("#myPanel").panel({
beforeopen: function(event, ui) {}
});
$("#myPanel").on("panelbeforeopen", function(event, ui) {});
$("#myPanel").on("panelclose", function(event, ui) {
if (typeof(Storage) !== "undefined") {
localStorage.adl = $("#checkbox-h-2a").is(":checked");
}
});
$('#btnDelCity').click(function() {
var list = '';
$("#delcity input:checkbox:not(:checked)").each(function() {
if (list == '')
list = $(this).val();
else
list = list + ',' + $(this).val();
});
//localStorage.clear();
localStorage.city = list;
alert(localStorage.city);
$.mobile.changePage("#home", { reloadPage: true });
//$.mobile.navigate("#home");
});
$('#btnRemoveCity').click(function() {
$.mobile.changePage("#delLocations", { reloadPage: true });
//$.mobile.navigate("#home");
});
});
</script>
</head>
<body>
<!-- Start of first page -->
div data-role="page" id="home">
<div data-role="panel" id="myPanel" data-display="overlay">
<!-- panel content goes here -->
<fieldset data-role="controlgroup" data-type="horizontal">
<input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">Auto Detect Location</label>
<a href="#addLocations" class="ui-btn">Add Locations</a>
<a href="#delLocations" id='btnRemoveCity' class="ui-btn">Remove Locations</a>
</fieldset>
</div><!-- /panel -->
<div data-role="header">
<h1>Test</h1>
<a href="#myPanel" data-icon="gear" class="ui-btn-right">Open Panel</a>
</div><!-- /header -->
<div data-role="content">
<div data-role="main" class="ui-content">
<p>content will go here</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- end of first page -->
<div data-role="page" id="addLocations" data-cache="false">
<div data-role="header">
<h1>Add Locations</h1>
<a href="#home" data-icon="home" class="ui-btn-right">Home</a>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" id="citynames">
</ul>
</div>
<div data-role="footer">
<h1>Locations Footer</h1>
</div>
<script>
$(document).on('pagebeforecreate', '#addLocations', function(){
var cities = [{
"code": "s0000768",
"englishnames": "City 1"
}, {
"code": "s0000001",
"englishnames": "City 2"
}, {
"code": "s0000404",
"englishnames": "City 3"
}];
//bind cities to addLocations
cities.sort(function(a, b) {
return a.englishnames.localeCompare(b.englishnames);
});
$.each(cities, function(i, obj) {
$("#citynames").append("<li data-name='" + obj.englishnames + "'>" + obj.englishnames + "</li>");
});
/* delegation */
//localStorage.clear();
$("#citynames").on("click", "li", function() {
if (localStorage.city == '')
localStorage.city = $(this).attr('data-name');
else
localStorage.city = localStorage.city + ',' + $(this).attr('data-name');
alert(localStorage.city);
});
});
</script>
</div>
<div data-role="page" id="delLocations">
<div data-role="header">
<h1>Remove Locations</h1>
<a href="#home" data-icon="gear" class="ui-btn-right">Home</a>
</div>
<div data-role="main" class="ui-content">
<form id='delcity'>
</form>
</div>
<div data-role="footer">
<h1>Locations Footer</h1>
</div>
<script>
//$(document).on('pagebeforeshow', '#delLocations', function(){
$(document).on('pagebeforecreate', '#delLocations', function(){
if (typeof(Storage) !== "undefined") {
if (!(localStorage.city == '')){
alert("about to create checkboxes");
var savedCities = localStorage.city;
alert(savedCities);
var arr = [];
arr.length = 0;
$("#delcity").trigger('reset');
$("#delcity").empty();
arr = savedCities.split(',');
$.each(arr, function(i, val){
$("#delcity").append("<label><input id='chk" + i + "' type='checkbox' value='" + val + "'>" + val + "</label>");
});
$("#delcity").append("<a href='#delLocations' id='btnDelCity' class='ui-btn'>Remove</a>");
}
}
});
</script>
</div>
</body>
</html>
https://jsfiddle.net/dLsLo94r/13/
Joe
Während die Geige eine schöne Referenz, aktualisieren Sie bitte Ihre Frage und fügen Sie den relevanten Code hinzu. –