jquery移动本地存储＆amp;自动完成

时间：2015-05-21 13:33:29

标签： javascript php jquery jquery-mobile phonegap-build

我有这个webapp，我用JQuery Mobile创建。在第9页上，用户可以存储他的个人数据，在第4页上，可以以html格式检索数据。所以这很好。但是，在第9页，我有PLZ（邮政编码），Gemeinde（市）和Kanton（州）。进入PLZ后，城市和州将自动填充。这之前工作正常，但是当我粘贴在这个webapp代码中时，它不起作用。我也尝试了第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>

0 个答案:

没有答案
相关问题
最新问题