Javascript jquery移动本地存储&；自动完成_Javascript_Php_Jquery_Jquery Mobile_Phonegap Build

Javascript jquery移动本地存储&；自动完成

javascript php jquery jquery-mobile

Javascript jquery移动本地存储&；自动完成,javascript,php,jquery,jquery-mobile,phonegap-build,Javascript,Php,Jquery,Jquery Mobile,Phonegap Build,我有这个webapp，我正在用JQuery Mobile创建它。在第9页，用户可以存储其个人数据，在第4页，可以以html格式检索数据。所以这很好用。然而，在第九页，我有字段PLZ（邮政编码）、Gemeinde（城市）和Kanton（州）。进入PLZ后，城市和州将自动填充。这在以前工作得很好，但是当我粘贴这个webapp代码时，它就不工作了。我在第4页上也尝试了这个方法，在那里只检索正常的数据，自动填充在那里工作。我找不到错误。你能帮我吗我知道路径存在一些问题，例如，在头部的Phonegap下

我有这个webapp，我正在用JQuery Mobile创建它。在第9页，用户可以存储其个人数据，在第4页，可以以html格式检索数据。所以这很好用。然而，在第九页，我有字段PLZ（邮政编码）、Gemeinde（城市）和Kanton（州）。进入PLZ后，城市和州将自动填充。这在以前工作得很好，但是当我粘贴这个webapp代码时，它就不工作了。我在第4页上也尝试了这个方法，在那里只检索正常的数据，自动填充在那里工作。我找不到错误。你能帮我吗

我知道路径存在一些问题，例如，在头部的Phonegap下。这没关系，因为我通常在本地pc上使用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>


斯威兹有限公司
$（文档）.ready（函数（）{
var ac_config={
来源：“plz.php”，
选择：功能（事件、用户界面）{
$（“#plz”）.val（ui.item.plz）；
$（“#gemeinde”）.val（ui.item.gemeinde）；
$（“#kanton”）.val（ui.item.kanton）；
}, 
最小长度：1
}; 
$（“#plz”）.autocomplete（ac#U配置）；
}); 
个性化
沃纳曼：


纳希纳曼：


地址：


请


奥特


坎顿


Geburtsdatum


电子邮件
$（文档）.ready（函数（）{
$（'form'）.FormCache（）；
});





梅恩·达滕
沃纳曼：


纳希纳曼：


地址：


请


奥特


坎顿


Geburtsdatum


电子邮件
（函数（$）{
$.fn.FormCache=函数（选项）{
变量设置=$.extend({
}，选项）；
更改功能（事件）{
var输入=$（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'））{
数据[input.attr（'name'）]=input.is（':checked'）；
}否则{
数据[input.attr（'name'）]=input.val（）；
}
localStorage[key]=JSON.stringify（数据）；
}
返回此.each（函数（）{
var元素=$（此）；
if（类型（存储）！=“未定义”）{
var key=element.attr（'name'）；
var数据=假；
if（localStorage[key]）{
data=JSON.parse（localStorage[key]）；
}
如果（！数据）{
localStorage[key]=JSON.stringify（{}）；
data=JSON.parse（localStorage[key]）；
}
元素。查找（'input，select'）。更改（在更改时）；
元素。查找（'input，select'）。每个（函数（）{
if（$（this.attr（'type'）！='submit'）{
var输入=$（此）；
var value=data[input.attr（'name'）；
if（input.attr（'type'）='radio'| | input.attr（'type'）='checkbox'））{
如果（值）{
input.attr（'checked'，input.is（'：checked'）；
}否则{
input.removeAttr（'checked'）；
}
}否则{
输入.val（值）；
}
}
});
}
否则{
警报（“本地存储不可用”）；
}
});
};     
}（jQuery）

检查浏览器控制台。你看到错误了吗。一些版本的JQM，尤其是新版本的JQM，不能很好地与jqueryui配合使用。jqmv2将包括jqueryui。因此，您的代码可能是正常的，但由于这些框架之前的错误，它没有运行。另外，您正在加载jQuery1.11和1.4。加载同一jquery的不同版本的任何原因都看不到任何错误。我昨天也在phonegap进行了测试。我也有同样的问题。我想我必须给表格一个身份证，你觉得怎么样？我不确定身份证是否会有帮助，但请尝试一下