javascript — мобильное локальное хранилище jquery & amp; автозаполнения
У меня есть это веб-приложение, которое я создаю с помощью JQuery Mobile. На странице 9 пользователь может хранить свои личные данные, а на странице 4 данные могут быть получены в виде HTML. Так что это работает отлично. Однако на девятой странице у меня есть поля PLZ (почтовый индекс), Gemeinde (город) и Kanton (штат). После ввода PLZ город и штат заполняются автоматически. Раньше это работало нормально, но когда я вставил этот код в веб-приложение, это не сработало. Я попробовал это также на странице 4, где обычно извлекаются только данные и там работает автозаполнение. Я не могу найти ошибку. Вы можете мне помочь?
Я знаю, что есть некоторые проблемы с путями, например, под PhoneGap в голове. Это не имеет значения, потому что я обычно работаю с PhoneGap на локальном ПК. Это просто копия на тестовом сервере для работы в сети.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IVZ Schweiz GmbH</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="apple-touch-icon" href="ivz.png" >
<link rel="apple-touch-startup-image" href="ivz.png">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--PhoneGap -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/index.js"></script>
<!-- Icon -->
<link rel="apple-touch-icon" href="images/Icon.png" >
<link rel="apple-touch-startup-image" href="images/ajax-loader.gif" >
<!--JQuery Mobile -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var ac_config = {
source: "plz.php",
select: function(event, ui){
$("#plz").val(ui.item.plz);
$("#gemeinde").val(ui.item.gemeinde);
$("#kanton").val(ui.item.kanton);
},
minLength:1
};
$("#plz").autocomplete(ac_config);
});
</script>
</head>
<body>
<!-- Personaldaten -->
<div data-role="page" id="p4">
<div data-role="header" data-position="fixed">
<a href="#p2" data-icon="arrow-l" data-transition="slide" data-direction="reverse">zurück</a>
<center>
<img class="logo" src="images/logo2.png" >
</center>
<a href="#p5" data-icon="arrow-r" data-transition="slide">weiter</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<h1>
Personalien
</h1>
<form name="signup-form">
<label for="name">Vornamen:</label>
<input type="text" name="vornamen" id="vornamen" value="" />
<br>
<label for="name">Nachnamen:</label>
<input type="text" name="nachnamen" id="nachnamen" value="" />
<br>
<label for="name">Adresse:</label>
<input type="text" name="adresse" id="adresse" value="" />
<br>
<label for="plz">PLZ</label>
<input type="text" name="plz" id="plz" value="" />
<br>
<label for="gemeinde">Ort</label>
<input type="text" name="gemeinde" id="gemeinde" value="" />
<br>
<label for="kanton">Kanton</label>
<input type="text" name="kanton" id="kanton" value="" />
<br>
<label for="name">Geburtsdatum</label>
<input type="date" name="geburtsdatum" id="geburtsdatum" value="" />
<br>
<label for="name">E-Mail</label>
<input type="email" name="email" id="email" value="" />
</form>
<script>
$(document).ready(function(){
$('form').FormCache();
});
</script>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#p1" data-icon="home" data-iconpos="top" data-transition="slide" data-direction="reverse">Home</a></li>
<li><a href="#p9" data-icon="gear" data-iconpos="top" data-transition="slideup">Meine Daten</a></li>
<li><a href="#p7" data-icon="info" data-iconpos="top" data-transition="slideup">Info</a></li>
</ul>
</div>
</div>
</div><!--End Page 4-->
<!-- Meine Daten -->
<div data-role="page" id="p9">
<div data-role="header" data-position="fixed">
<a href="#p2" data-icon="arrow-l" data-transition="slide" data-direction="reverse">zurück</a>
<center>
<img class="logo" src="images/logo2.png" >
</center>
<a href="#p5" data-icon="arrow-r" data-transition="slide">weiter</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<h1>
Meine Daten
</h1>
<form name="signup-form">
<label for="name">Vornamen:</label>
<input type="text" name="vornamen" id="vornamen" value="" />
<br>
<label for="name">Nachnamen:</label>
<input type="text" name="nachnamen" id="nachnamen" value="" />
<br>
<label for="name">Adresse:</label>
<input type="text" name="adresse" id="adresse" value="" />
<br>
<label for="plz">PLZ</label>
<input type="text" name="plz" id="plz" value="" />
<br>
<label for="gemeinde">Ort</label>
<input type="text" name="gemeinde" id="gemeinde" value="" />
<br>
<label for="kanton">Kanton</label>
<input type="text" name="kanton" id="kanton" value="" />
<br>
<label for="name">Geburtsdatum</label>
<input type="date" name="geburtsdatum" id="geburtsdatum" value="" />
<br>
<label for="name">E-Mail</label>
<input type="email" name="email" id="email" value="" />
<input type="submit" value="speichern" />
</form>
</div>
<script>
(function ( $ ) {
$.fn.FormCache = function( options ) {
var settings = $.extend({
}, options );
function on_change(event) {
var input = $(event.target);
var key = input.parents('form:first').attr('name');
var data = JSON.parse(localStorage[key]);
if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
data[input.attr('name')] = input.is(':checked');
}else {
data[input.attr('name')] = input.val();
}
localStorage[key] = JSON.stringify(data);
}
return this.each(function() {
var element = $(this);
if(typeof(Storage)!=="undefined"){
var key = element.attr('name');
var data = false;
if(localStorage[key]) {
data = JSON.parse(localStorage[key]);
}
if(!data) {
localStorage[key] = JSON.stringify({});
data = JSON.parse(localStorage[key]);
}
element.find('input, select').change(on_change);
element.find('input, select').each(function(){
if($(this).attr('type') != 'submit') {
var input = $(this);
var value = data[input.attr('name')];
if(input.attr('type') == 'radio' || input.attr('type') == 'checkbox') {
if(value) {
input.attr('checked', input.is(':checked'));
} else {
input.removeAttr('checked');
}
} else {
input.val(value);
}
}
});
}
else {
alert('local storage is not available');
}
});
};
}( jQuery ))
</script>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#p1" data-icon="home" data-iconpos="top" data-transition="slide" data-direction="reverse">Home</a></li>
<li><a href="#p9" data-icon="gear" data-iconpos="top" data-transition="slideup">Meine Daten</a></li>
<li><a href="#p7" data-icon="info" data-iconpos="top" data-transition="slideup">Info</a></li>
</ul>
</div>
</div>
</div><!--End Page 9-->
</body>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …