Archive for the ‘javascript’ Category

found this great plugin.

worked with no problems

 

http://paulirish.com/2009/jquery-idletimer-plugin/

$.mobile.changePage(“#page2”);

(from this post)

ok. this isn’t working. I’m getting the following error:

02-14 18:20:12.093: E/Web Console(17689): Uncaught TypeError: Cannot call method ‘changePage’ of undefined at file:///android_asset/www/goals.html:112

bad bad bad

need to find something else. so i tried this

$.mobile.back();

still not working i’m getting this error

02-14 18:23:16.082: E/Web Console(17915): Uncaught TypeError: Cannot call method ‘back’ of undefined at file:///android_asset/www/goals.html:112

i’ll try something else… following this site i’m trying

$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

shit. nothing seems to work. now i’m getting this error

02-14 18:27:24.265: E/Web Console(18181): Uncaught TypeError: Cannot call method ‘loadPage’ of undefined at file:///android_asset/www/goals.html:112

tried this:

$.mobile.changePage(“index.html”, null, true, true);

and got

02-14 18:30:33.429: E/Web Console(18465): Uncaught TypeError: Cannot call method ‘changePage’ of undefined at file:///android_asset/www/goals.html:112

it seems like $.mobile is not recognized…. 😦 what to do what to do?

i tried also to change the calling of this code not from deviceReady event of phonegap but with this:

$(document).bind(“pagecreate”, function(){

found it on this link. also not working… not even triggering…damn

also tried to change the calling to this

$(‘#goals-page’).live(“pageinit”, function() {

and failed. I’m getting this error

02-14 18:39:05.158: E/Web Console(19354): Uncaught TypeError: Object [object Object] has no method ‘live’ at file:///android_asset/www/goals.html:103

i’m strating to get pissed off.

OK. FOUND THE ANSWER HERE. I used this:

window.location.href = “index.html”;

I want to show the users progress over time with some charts. So here I am searching google again for some answers.

Found this link:

Create Quick and Easy Progress Bar Charts with HTML5 and CSS3

p1

This isn’t exactly what I was looking for but an easy progress bar can be quite handy. Its worth testing…

Fuck, this article has no demo. This is NOT COOL. But it was easy creating out of the code presented on the page. So I guess I will try.

Ok, got it. Here is the result:

p2

and the code is:

<html>
<body>
<style>
/* Firefox – value portion of progress bar */
progress#bar::-moz-progress-bar {
background-color: red;
-moz-box-shadow: 1px 1px 1px #333333;
}

/* Chrome, Safari – value portion of progress bar */
progress#bar::-webkit-progress-value {
background-color: red;
-webkit-box-shadow: 1px 1px 1px #333333;
}

/* All other attributes */
progress#bar {
background-color: #F0F0F0;
border: solid #808080 2px;
border-radius: 5px;
-moz-box-shadow: 3px 3px 3px #C0C0C0;
-webkit-box-shadow: 3px 3px 3px #C0C0C0;
box-shadow: 3px 3px 3px #C0C0C0;
padding: 3px;
width: 250px;
height: 20px;
}
</style>

<strong>Project Completion Status</strong><br />
<br />
Project #1<br />
<progress id=”bar” value=”6″ max=”9″>
<em>6 of 9 stages completed</em></progress>
<br />
Project #2<br />
<progress id=”bar” value=”20″ max=”100″>
<em>20% complete</em></progress>
<br />
Project #3<br />
<progress id=”bar” value=”12″ max=”20″>
<em>12/20 components completed</em></progress>
<br />
Project #4<br />
<progress id=”bar” value=”4″ max=”8″>
<em>50% complete</em></progress>
<br />
Project #5<br />
<progress id=”bar” value=”9″ max=”10″>
<em>9 out of 10 stages completed</em></progress>
</body>
</html>

This will be handy someday 🙂

The next google search result looks very good. Its specifically about jquery-mobile charting. Exactly what I need.

jQuery Mobile Charts

+ the source code on github

If this will be the result on my end, I will be a happy man indeed. Lets give it a try.

The example works just fine. Now I will try to embed this to my phonegap app. lets see how it goes…

ok. it took me 10 minutes to integrate the sample code to my html5 code. (just the sample, no functionallity yet).

I had one problem with the addition, at first it didn’t work and than I tried to add this code:

<script src=”JQMCharts/scripts/jquery.jqplot.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/jqplot.pieRenderer.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/jqplot.barRenderer.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/jqplot.categoryAxisRenderer.min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/underscore-min.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/hideAddressBar.js” type=”text/javascript”></script>
<script src=”JQMCharts/scripts/app.js” type=”text/javascript”></script>

to the end of the file instead of the beginning.

this what fixed my problem.

I have no idea why…

anyways i don’t like this code so much. not very scalable…

So I gonna try this library:

http://www.jqplot.com/

ok so i downloaded jquery.jqplot.1.0.5r1122 and I’m following the basic installation instructions from the jqueryPlot website I hope it will be easy as it looks.

I added two files to my project and added the following lines

<!– jqueryplot –>
<script language=”javascript” type=”text/javascript” src=”jqueryplot/jquery.jqplot.min.js”></script>
<link rel=”stylesheet” type=”text/css” href=”jqueryplot/jquery.jqplot.css” />

I added a chart container:

<div id="chartdiv" style="height:400px;width:300px; "></div>

. and added the graph creation code

$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

not worknig 😦

I will try to add

<script language=”javascript” type=”text/javascript” src=”jqueryplot/jquery.min.js”></script>

as well.

Still nothing.. the chart isn’t showing…

GOT IT!! The problem was as usual that my code aims for phonegap so the $.jqplot(‘chartdiv’,  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); code wasn’t triggered because it was in the deviceReady event function. When I created a window.onLoad function instead – everything worked on Chrome.

 

Now I need to create a vertical bar chart. So I found this link.

Also succeeded to create a BarRender chart with it. and found this pretty awsume link to how add dynamic data to a jqplot chart.

Good day,

I tried for two hours now to figure out how to programically set an option for a selectmenu by mobiscroll. I tried several suggetion found on my google searches and here are my conclusions.

mobiscroll, you need to provide a better api for this. It takes too much time to do this (very very) basic and simple task. WTF.

What i did was to set values with the val() function, than set the mobiscroll functionallity and finally loading the dialog.

$(“#updateDayOfWorkoutPlan”).val(row.dayoftheweek);
$(“#updateTimeOfWorkoutPlan”).val(row.time);
$(“#updateDurationOfWorkoutPlan”).val(row.duration);
$(“#updateAlertOfWorkoutPlan”).val(row.alert);

$(“#updateDayOfWorkoutPlan”).mobiscroll().select();
$(“#updateTimeOfWorkoutPlan”).mobiscroll().time();
$(“#updateDurationOfWorkoutPlan”).mobiscroll().select();
$(“#updateAlertOfWorkoutPlan”).mobiscroll().select();

$.mobile.changePage(“#update-page”);

this is not pretty but got to keep things moving.

I want that a user will be able to add more and more days of the week and time to workout.

For example, there is a combo-box (select) with a day of the week and a time of the day (for a reminder) and a time to workout. After it chooses it, a button will apear with an “add” label and it will be able to choose another time to workout (in addition to the previous ones). The workout times should be sorted.

I think that I will create a listview. That every LI contains an onClick to a javascript function with its id. When li clicked it will open a dialog/popup with options: edit, delete, alert x minutes before. Now it sounds like a scalable solution. will be able to add/remove features easily and the user is able to view its workout planning very nicely.

I can actually use my old code from this post.

i’m going to use the jquery mobile dialogs.

now i also need a jqm time picker, so i found this (10 JQUERY TIME PICKER PLUGINS) post with 10 different plugins links and reviews but its not jquery MOBILE… its for jquery…. 😦

so i encounter this post –

Awesome Date-Time Picker For Mobile: Mobiscroll

so i get to mobiscroll website, specifically to the 5-minutes guide. lets see if it truly takes 5 minutes.

ok, i download the mobiscroll.datetime-2.4 and extracted.

i added the sample code from this post and everything worked g8! great job mobiscroll! 🙂

i converted the code to show time only ($(“#i”).mobiscroll().time();). and i’m ready!!

it’s working on pc with chrome, but not on my phonegap app…  😦 shit….

now its working, the reason was that the page with the mobiscroll code was loaded via a link that needed the data-ajax=false to work. so now everything is ok (according to this post on phonegap, you need this to reload completely the linked page which is what i want). mobiscroll works on phonegap under android! 🙂 happy happy

It’s important to note if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.

For example, a link to a page containing multiple internal pages would look like this:

<a href="multipage.html" rel="external">Multi-page link</a>

The time picker worked so well with mobi so i decide to use its SELECT code as well (instead of the boring select of jqm). So I read this post

Hassle-free 5 minute guide to awesome Select

it looks good. lets try that.

this worked quite well. I just had to replace the names of the files given in the js code in the post.

The only thing is to add  data-role=”none” to the html select. otherwise the view gets messed up – both mobi view and jqm view at the same time – not pretty.

ok. now i’m going to put it in a pop dialog.

ok. so in the previous posts i:

  1. opened a native java UI Activity – see post
  2. created a plugin that uses CallbackContext and updates the phonegap database – see post

I want that every several seconds the database will be updated (in case of a crash, i want the data to be valid) so now I will connect the two.

The native Activity is going to trigger the callback function every some and some seconds so database is continuously updated.

 

so on the javascript side when user hits the “new” button:

function startWorkout ()
{
gCurrentWorkoutTimestamp = Number(Date.now())/1000;
// add a new item to database with the new workout
gWorkoutsTable.addWorkout({“date”: gCurrentWorkoutTimestamp, “duration”: 0});

// set a callback functionallity from native to phonegap to update database constantly during workout
window.registerWorkoutUpdate(
function(duration) {
gWorkoutsTable.updateWorkout({“date”: gCurrentWorkoutTimestamp, “duration”: duration});
loadWorkouts();
}
);

// now start native java activity
window.MainActivity.phonegapInterfaceLaunchTherapyUtility();
}

you can see that on a new workout, i’m starting a new timestamp (same as ID), adding a new sql INSERT statement and create the item in the database, registering in the phonegap plugin to get updates (on every update trigger an UPDATE sql statement with a new value) and finally – start the native UI java activity with phonegap js interface (same way i describe on this post).

 

Everything works just fine! 🙂

This post continues previous post where I wanted that after the user is done in the native activity he suppose to press the back button and the phonegap activity should understand that the native activity has finished and to try and grab a number from the native code from with javascript with the phonegap js interface. The final result is that phonegap saves in database the result of the native code.

My conclusion in the previous post was that  I will create me a phonegap plugin and use CallbackContext to update the phonegap code with new data.

found some links about phonegap plugins:

I guess i will follow the official tutorials from phonegap website.

I documented the process of first coping with the phonegap plugin in this video post: this is very basic i guess and u can do it on your own.

well, ofcourse I had to remove the brackets in the config.xml in the plugin value.

and i change the javascript code to call class MyPhonegapInterface instead of Echo.

window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback(‘Nothing to echo.’);
}, “MyPhonegapInterface”, “echo”, [str]);
};

ok so now i’m getting the following error

02-01 12:56:41.002: E/Web Console(5392): Uncaught TypeError: Object #<an Object> has no method ‘exec’ at file:///android_asset/www/workouts.html:90

I triggering the javascript function like this:

$(function(){

//loadWorkouts();

window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback(‘Nothing to echo.’);
}, “MyPhonegapInterface”, “echo”, [str]);
};

window.echo(“echome”, function(echoValue) {
alert(echoValue == “echome”); // should alert true.
});
});

i guess that the cordove variable wasn’t declare yet. so i’ll try the deviceready event

function onDeviceReady() {
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback(‘Nothing to echo.’);
}, “MyPhonegapInterface”, “echo”, [str]);
};

window.echo(“echome”, function(echoValue) {
alert(echoValue == “echome”); // should alert true.
});
}

and great!! it works! got on my phone an alert with TRUE written inside 🙂

now i can continue and try to use callback context (CallbackContext) to trigger an update from native java to phonehap javascript several times (not just once).

ok. so my conclusion for how to use the CallbackContext several times as an update mechanism is to create a PluginResult and use it like this:

PluginResult pluginResult = new PluginResult(PluginResult.Status.OK, message);

pluginResult.setKeepCallback(true);
callbackContext.sendPluginResult(pluginResult);

pluginResult.setKeepCallback(false);
callbackContext.sendPluginResult(pluginResult);

so the phonegap knows to keep the pointer to the callback success function alive so i can use it to update the database using phonegap sqlLite.