HTML5, javascript, spry datasets and sqlite localstorage

Discussion in 'Web Design and Development' started by TheCoupe, Jun 2, 2011.

  1. TheCoupe macrumors member

    Mar 4, 2009
    Northern Ireland

    I'm pulling my hair out on this one... I'm a newb at javascript and am trying to create an html5 page, that when loaded, will pull the contents of an xml file into a spry dataset and populate the page (the easy bit which I have done).

    What I am now trying to do, is to create an SQLite database that will cache the information from the dataset on load, then push the contents of that database back into the Spry, therefore the page will always work off content stored locally. This would allow the pages to continue to work, even when offline, and would allow the page(s) to also work as a web app for iPhone, Blackberry, Android etc.

    So far, I've been following numerous tutorials, which only seem to cover some of this, or are based on Adobe AIR.

    Can anyone suggest any tutorials, or shed some light on how I might achieve this.

    So far, I have been able to create the local Database, create a table with 3 fields - id, first_name, last_name - but can't for the life of me, work out how to get the loaded contents of the spry dataset inserted into the database using the 'ds1.getData()' function.

    I'm starting small on this just to get the hang of it, but I will need to use this on a massive scale in my project, so any help would be greatly appreciated.

  2. Ride9650 macrumors 6502

    Jun 29, 2007
    I found this after a bit of searching

    var dsPhotos = new Spry.Data.XMLDataSet("/photos.php?galleryid=2000""/gallery/photos/photo");
    rows dsPhotos.getData(); // Get all rows.
    var path rows[0]["@path"];   // Get the data in the "@path" column of the first row.

    this is the xml data they use
    <gallery id="12345">
    photographer id="4532">John Doe</photographer>
    photos id="2000">
    photo path="sun.jpg" width="16" height="16"/>
    photo path="tree.jpg" width="16" height="16"/>
    photo path="surf.jpg" width="16" height="16"/>
    once you call the ".getData()" function(notice I'm not using "ds1.getData()"... the reason it wasn't working is because you didn't have a variable called ds1), it basically turns your dataset into a associative array. In the example, they look for the tags called "photos" and all the information gets loaded into the "rows" variable.

    After that the "rows" variable is essentially a associative array.

    the 0 represents this first "photo" tag
    <photo path="sun.jpg" width="16" height="16"/>
    "@path" represents the "path" attribute so in the example the variable "path" would return "sun.jpg"

    After you do that, just use some kind of a loop to read the data into the DB

    I would however recommend not using WebSQL as it's no longer being maintained. I imagine, that with that being the case, support for it will eventually be dropped.

Share This Page