I have this webapp, which I'm creating with JQuery Mobile. On Page 9 the user can store his personal data and on page 4 the data can be retrieved in a html form. So this works fine. However, on page nine I have the field PLZ (Zip Code), Gemeinde (City) and Kanton (State). After entering PLZ the city and state are populated automatically. This worked fine before, but when I pasted in this webapp code, it doesn't work. I tried it also on Page 4, where normal the data are retrieved only and there the auto populate works. I cannot find the error. Can you help me?
I know there are some problems with the paths, e.g. under Phonegap in the head. This doesn't matter, because I normaly works with phonegap on local pc. This is just a copy on a testsserver to work online.
<!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>
