Data Persistence with jqMobi

Question

Data Persistence with jqMobi

1.9k views Asked by Rift At 01 February 2012 at 00:42

Well, I've sorted through the Google search and I've sorted through stack overflow and as of yet I don't have a good idea of how to do about this.

I'd like to build a To Do program for the iphone using jqMobi + CSS + HTML 5. I've worked with jQuery a bunch, spent some time with jQuery Mobile and have done tons of css and HTML, (though little work with HTML5). What I need to be able to do is save lists that the user generates when they open up the program.

I'm having no problem dynamically generating and linking pages... but when you open up the program a second time all of the pages (IE To Do Items) that I've generated disappear. I understand that this is because they weren't written in as part of the base program. It occurs to me that the way around this is to save those lists into a file or a DB and then load them when the program starts up.

I've seen documentation to do this using Titanium Studio, (it supports SQL lite) but the generation of pages and general UI suck. Additionally getting an emulator to run from that code has given me a lot of trouble. At least I can say that using appMobi's app to test gives you a decent emulator to work with before you've ported code to a compiled state.

In any case, does anyone know how to set up data persistence (between program restarts) for jqMobi + CSS + HTML 5 with either a DB or file generation?

EDIT x2: Since I've got you on the hook @ian can you take a look a this code and tell me why the $.ui.addContentDiv() doesn't appear to be updating the content? $(#content).append(string); doesn't appear to want to cooperate either. Is there some function I need to call to make it refresh? Stripped it down a bit still having issues. Oddly enough the append to the list works just fine, but when I try to add that div layer it doesn't exist...

code is as follows:

function genPage( id, list, parent ) {
    var content = '<div id="' + id + '" class="panel">' + id + '</div>';    
    var threadLink='<li><a href="#' + id +'">' + id + '</a></li>';      
    $("#" + list).append(threadLink);
    $("#content").append(content);

    //$.ui.addContentDiv(id, content, id);
}

Original Q&A

There are 3 answers

**Rift** · Answer 1 · 2012-02-02 01:07:29

Here's my first hack at getting json and cookies to work to whoever might find it helpful. It's just a prototype so it doesn't do much. I've cut out the extra javascript added by AppMobi's dev environment for the sake of simplicity.

EDIT: It looks like JSON works pretty good for a data structure, so long as you're not trying to do anything particularly data intensive. Also it looks like appMobi's AppMobi.cache works pretty well for cookies. Here's my mini script to demo basic cookie manipulation/JSON strings.

code:

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }

    /* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 
<script type="text/javascript">

function setCookie() {
    var value = document.getElementById('cookie').value;
    AppMobi.cache.setCookie("test", value, 1);
}

function testbed() {
alert("Trying new things!");
var jsonobj = {"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

var test = jsonobj.bindings[0].method;
alert(test);
}

function getCookie(){
    var cookie = AppMobi.cache.getCookie("test");
    document.getElementById("cookievalue").innerHTML = cookie;
}

</script>

</head>
<body>
<form action="javascript: setCookie()">
<input type="text" id="cookie" value="set a cookie">
<input type="submit">
</form>

<p id="cookievalue"></p>

<form action="javascript: getCookie()">
<input type="submit" value="Get a Cookie">
</form>

<form action="javascript: testbed()">
<input type="submit" value="try new things">
</form>
</body>
</html>

**AudioBubble** · Answer 2 · 2012-02-01 13:01:11

I'm the lead dev on jqMobi, so I'd be happy to help with questions.

I'm working on a mini todo-list as a demo for the 1.0 release. What I would do is store the data as a stringified JSON object in window.localStorage

But if this is an appMobi app, then we have AppMobi.cache.cookies which are similar. The only difference is AppMobi.cache allows you to store more data.

Feel free to check out http://forums.appmobi.com to get more help.

**TrippRitter** · Answer 3 · 2012-04-09 14:13:57

TrippRitter On 09 April 2012 at 14:13

Have you thought about using PhoneGap? It has a database library that you could use to save all your data to a sqlite database. http://docs.phonegap.com/en/1.5.0/phonegap_storage_storage.md.html#Database

TechQA.

Data Persistence with jqMobi

There are 3 answers

Related Questions in JQUERY

Related Questions in MOBILE

Related Questions in JQMOBI

Related Questions in DATA-PERSISTENCE

Popular Questions

Popular Tags

Trending Questions