Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 166
Registered: ‎02-15-2012
My Device: Playbook 16GB
My Carrier: Bags are useful

Local Database help

Hi everyone,

 

I got a slight problem which I am unable to fix. What I am trying to do is create an event manager so I have created a local database. I then ask the user to enter some details about the event which should save into the database but it does not work. Can anyone tell me where I am going wrong?

 

function addEvent(){
	eventdatabase.transaction(
	    function (transaction) {
		var added_on   = new Date();
		var event  = document.forms[0].event.value;
		var data = [event, added_on]; 
		transaction.executeSql("INSERT INTO events_table(event, added_on) VALUES (?, ?)", [data[0], data[1]]);
	    }
	);
}


</script>

  <body onload="initDatabase();">

<form name="eventform" onSubmit="addEvent()" method="post">
 <textarea name="event" id = "event"></textarea>
<input type="submit" value="Save event">
 </form>
</body>

 I just can't get the form values to save in the database.

 

Any help appreciated,

 

Regards,

Flow

If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Local Database help

Hello,

 

I don't see a initDatabase() function in your code snippet, so I can't say what the issue is.

 

I can suggest you check out the following WebDB demo page, for which the source code is also available for download in Github.

 

Live demo:

http://blackberry.github.com/WebWorks-Samples/kitchenSink/html/html5/db.html

 

Source code:

https://github.com/blackberry/WebWorks-Samples/tree/master/kitchenSink

 

 

 

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Developer
Posts: 166
Registered: ‎02-15-2012
My Device: Playbook 16GB
My Carrier: Bags are useful

Re: Local Database help

Thanks for replying,

 

I did have a look at the source code but I couldn't see what I was doing wrong. Here is the the rest of the code snippet:

function initDatabase() {
	try {
	    if (!window.openDatabase) {
	        alert('Databases are not supported in this browser.');
	    } else {
	        var shortName = 'eventdatabase';
	        var version = '1.0';
	        var displayName = 'Events';
	        var maxSize = 5 * 1024 * 1024; //  bytes
	        dreamdatabase = openDatabase(shortName, version, displayName, maxSize);
			createTables();
	    }
	} catch(e) {

	    if (e == 2) {
	        // Version number mismatch.
	        console.log("Invalid database version.");
	    } else {
	        console.log("Unknown error "+e+".");
	    }
	    return;
	}
}

function createTables(){
	eventdatabase.transaction(
        function (transaction) {
        	transaction.executeSql('CREATE TABLE IF NOT EXISTS events_table (event TEXT , added_on DATE);', []);
        }
    );

}

 I have no clue what I am doing wrong?

If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!

Developer
Posts: 60
Registered: ‎06-08-2011
My Device: n/a
My Carrier: n/a

Re: Local Database help

[ Edited ]

The openDatabase accepts a fifth creationCallback argument. See this link for more details: https://bdsc.webapps.blackberry.com/html5/apis/Database.html

 

Try passing the createTables function to openDatabase instead of after the call. Where you have it now is not guaranteed to yet have an open database to work with.

 

dreamdatabase = openDatabase(shortName, version, displayName, maxSize, createTables);

 

You will need to change your createTables function to accept a database argument and work with it from there.

 

function createTables(database){...

 

Developer
Posts: 166
Registered: ‎02-15-2012
My Device: Playbook 16GB
My Carrier: Bags are useful

Re: Local Database help

Just did what you told me, and made a few adjustments. I have managed to save the date, but not the event. I tried typing in 'Hello World' and when I viewed the data saved in Chrome All I saw was the date, and 'undefined'.

 

Hope that makes sense.

 

Any solution for that?

If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!

Developer
Posts: 60
Registered: ‎06-08-2011
My Device: n/a
My Carrier: n/a

Re: Local Database help

That is great that you managed to get further.

 

What is the difference between the eventdatabase and dreamdatabase? Do you actually have two databases?

 

Please post your code if you would like help with it. Otherwise it is very difficult to figure out how to help.

Developer
Posts: 166
Registered: ‎02-15-2012
My Device: Playbook 16GB
My Carrier: Bags are useful

Re: Local Database help

I actually only have one database, but at the time of posting my snippet I was using a tester 'eventdatabase' which I then adapted for my actual app.

 

What this currently does is when the user presses save, only the time is saved.  But I want the value in the textfield to be saved as well:

<body>
<style type="text/css">
body {
	background-image: url(bg.png);
}
</style>
 
<script type language="javascript">



function initDatabase() {
	try {
	    if (!window.openDatabase) {
	        alert('Databases are not supported in this browser.');
	    } else {
	        var shortName = 'dreamdatabase';
	        var version = '1.0';
	        var displayName = 'Dreams';
	        var maxSize = 5 * 1024 * 1024; //  bytes
	        dreamdatabase = openDatabase(shortName, version, displayName, maxSize);
			createTables();
			selectAll();
	    }
	} catch(e) {

	    if (e == 2) {
	        // Version number mismatch.
	        console.log("Invalid database version.");
	    } else {
	        console.log("Unknown error "+e+".");
	    }
	    return;
	}
}

function createTables(){
	dreamdatabase.transaction(
        function (transaction) {
        	transaction.executeSql('CREATE TABLE IF NOT EXISTS dreams (dream TEXT , added_on DATE);', []);
        }
    );
addDream();
}


function selectAll(){
	dreamdatabase.transaction(
	    function (transaction) {
	        transaction.executeSql("SELECT * FROM dreams;", []
                );
	    }
	);
}

function addDream(){
	dreamdatabase.transaction(
	    function (transaction) {
		//Optional Starter Data when page is initialized
		var added_on   = new Date();
		var dream  = document.forms[0].dream.value;
		var data = [dream, added_on]; 
		transaction.executeSql("INSERT INTO dreams(dream, added_on) VALUES (?, ?)", [data[0], data[1]]);
	    }
	);
}


</script>

  <body onload="initDatabase();">

<form name="dreamform" onSubmit="addDream()" method="POST">
 <textarea name="dream" id = "dream"></textarea>
<input type="submit" value="Save">
 </form>
</body>

</html>

 Thanks for your prompt response btw.

If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!

Developer
Posts: 60
Registered: ‎06-08-2011
My Device: n/a
My Carrier: n/a

Re: Local Database help

Not sure if you have resolved this yet. When you step through the code does the dream variable get populated (var dream  = document.forms[0].dream.valueSmiley Wink?

 

 

dreamdatabase.transaction(
    function (transaction) {
	//Optional Starter Data when page is initialized
	var dream  = document.getElementById('dream').value;
	if (dream) {
		transaction.executeSql("INSERT INTO dreams(dream, added_on) VALUES (?, ?)", [dream, new Date()]);
    } else {
        alert("Dream is undefined or empty");
    }
    });

 

Developer
Posts: 166
Registered: ‎02-15-2012
My Device: Playbook 16GB
My Carrier: Bags are useful

Re: Local Database help

Oh thanks no it doesn't! Is it becasue I have addDream(); in createTables();? I removed that line of code but nothing,

 

The form does not get populated?

 

 

If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!

Developer
Posts: 60
Registered: ‎06-08-2011
My Device: n/a
My Carrier: n/a

Re: Local Database help

When you are creating the table and running addDream() for the first time, the text area is empty. So the dream column that is saved is blank because the text area is blank. If you want to initially load a dream you will either have to add text to the text area before the page loads or insert it from code the first time you load. 

 

Here's a demo to go through that you might find helpful:

 

http://playground.html5rocks.com/#async_transactions