Phonegap Jquery Mobile Saving Data to Phone

Question

Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.

Where am I going wrong below?

Do i need to put this code block somewhere else?

 <script type="text/javascript">

$(function(){
$('#saveButton').click(function() {
        window.localStorage.setItem("name", $('#name').val());
});
    $('#newpage').live('pageshow', function() {
        var personName = window.localStorage.getItem("name");
        if(personName.length>0){
                $('#name').val(personName);
        }
    });

});
</script>

Full html file

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>


<script type="text/javascript">

$(function(){
$('#saveButton').click(function() {
        window.localStorage.setItem("name", $('#name').val());
});
    $('#newpage').live('pageshow', function() {
        var personName = window.localStorage.getItem("name");
        if(personName.length>0){
                $('#name').val(personName);
        }
    });

});
</script>


<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
    <div data-role="header">
        <h1>
            Home Page</h1>
    </div>
    <div data-role="content">
        hello Phone Gap and JQuery Mobile! <a href="#newpage" data-role="button">new page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>
            footer</h4>
    </div>
</div>


<div id="newpage" data-role="page">
    <div data-role="header">
        <h1>
            new Page</h1>
    </div>
    <div data-role="content">
        <label for="name">what is your name?</label>
        <input id="name" type="text" name="name" value="" />
        <a id="saveButton" href="" data-role="button">Save</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>
            footer</h4>
    </div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</body>
</html>

score 6 · Accepted Answer · edited May 23 '17 at 10:27

6

Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs

$(document).on("pageinit","#newpage",function(){
    $('#saveButton').click(function() {
        localStorage.setItem("name", $('#name').val());
    });
});


$(document).on('pageshow','#newpage', function() {
    var personName = localStorage.getItem("name");
    if(personName.length>0){
            $('#name').val(personName);
    }
});

For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. Phonegap's default project template already does this, but their command does not work for me. See my answer: https://stackoverflow.com/a/12707386/561545

edited May 23 '17 at 10:27

Community

1
1

answered Oct 25 '12 at 13:42

Jeff

12,085
12
82
152

Thanks for giving that a shot. I recompiled and It still does not save my name. After i revisit the app it does not display yet. – CsharpBeginner Oct 25 '12 at 13:58
Make sure the recompiled files are actually being copied, I had trouble with this once - you really want to check that. :) – Jeff Oct 25 '12 at 14:00
See my edit - apologies, forgot to move the pageshow event :) – Jeff Oct 25 '12 at 14:01
Thanks that seems to work when I test in Chrome but when i push to an apk and test on phone it does not save my name. – CsharpBeginner Oct 25 '12 at 14:15
1

Make sure you are using the latest Phonegap, and, as I said, make sure the files being used on your phone are the latest ones. I will add this to my answer. – Jeff Oct 25 '12 at 14:35
Thanks I did make sure its the latest version i changed some text to be sure. – CsharpBeginner Oct 25 '12 at 14:55
No It does not I tested it on my tablet also. very weird. works in chrome but not on android phones or tablets. – CsharpBeginner Oct 25 '12 at 14:59
That's strange - I think you should post a bug to Phonegap if you dont figure this out. – Jeff Oct 25 '12 at 15:02

score 0 · Answer 2 · edited Oct 23 '15 at 17:14

0

Small correction! .val should be .html. Please see the below code.

$('#my_name').html(personName);

add:

div id="my_name"

edited Oct 23 '15 at 17:14

rp.

3,435
1
21
29

answered May 21 '13 at 12:50

tuvboy

109
1
1
9

Phonegap Jquery Mobile Saving Data to Phone

2 Answers2