Develop Reference

How to retrieve data from SQLite on Android

I am working on a project that uses Ionic 1 and AngularJS. I have successfully stored data in SQLite. On the simulator of the Ionic (using ionic serve --lab) the data is displayed (console.log()) as follows:
SQLResultSetRowList {0: {…}, length: 1}
0: { // data }
length: 1
So I can get the data easily from accessing the object in the result array. However, on real mobile device (I am testing on Android), the data is displayed like this.
The problem is in here. I want to access the rows inside the Closure of that <function scope> that is inside the item: function, which I really don't know how it is generated (and I mean all of these) because the only result I want is as how I got just like in the simulator.
This is how I inserted the data.
$cordovaSQLite.execute(db, "INSERT OR REPLACE INTO token (token) VALUES (?)", [myData]).then(function (res) {
callback();
}, function (error) {
ErrorHandler.handle(error);
});
This is how I query the data.
$cordovaSQLite.execute(db, "SELECT * FROM token").then(function (res) {
console.log(res);
}, function (error) {
ErrorHandler.handle(error);
});
Anyone has an idea to solve this?
Any way is acceptable.

Okay. I have found the solution to solve this problem myself from this.
I need to use it like this.
if (res.rows.length > 0){
if (window.cordova) {
// Mobile Device
console.log(JSON.parse(res.rows.item(0)));
} else {
// Web
console.log(JSON.parse(res.rows[0]));
}
}

Uploadprogress in Ionic

I have a form in which user can add information and add images. The images are base64 encoded so everything is stored in a json object. This object is sent to the server (with $resource) when the user submits it.
If a user adds for example 3 Images with about 2MB per Image, has a shitty connection like Edge, and wants to upload it it seems like it's taking forever. The user just sees the $ionicLoading overlay without information how long it will take or how much % are already uploaded.
The UX is bad because the user could assume, that the app froze or is in an endless loop and that it's just a bad app.
I have the following ideas but no idea if they are possible or
Is there a way in angular, cordova or ionic to get the browserinformation how much % are already uploaded?
Is there a way to get the current uploadspeed? I could get the size of my object by getting the length of my stringified JSON Object, divide it 1024 to get the kB. Then i would check the current uploadSpeed every second and add the current uploadspeed to a variable. With this information i could calculate the uploaded % approximately
JQuery ajaxForm Plugin?

Sounds like what you are looking for is progress events from XHR2.
Assuming your server is setup to handle XHR2 and return content-length, In plain JavaScript:
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
// Listen to the upload progress.
var progressBar = document.querySelector('progress');
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
progressBar.value = (e.loaded / e.total) * 100;
progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
}
};
xhr.send(blobOrFile);
}
upload(new Blob(['hello world'], {type: 'text/plain'}));
Upload speed is also calculable using the information returned in the progress event, as you described.
As for this implementation in AngularJS/Ionic, it seems like this is a longstanding issue within the framework that $http doesn't really support progress events.
I have seen implementations that utilize a special angular directive written for this, or even utilize a jQuery file upload implementation.

Setting dajax cache false

I'm using django v.1.6 and dajaxice v.0.6. I've run into a problem with ajax not functioning on some android devices running Chrome.
From what I understand, this is a caching problem. People using ajax on it's own seem to be getting round the problem by setting the cache to false within the ajax function. An example from here shows how you might normally go about this with ajax.
$.ajax({
url: "yoururl.html",
context: document.body,
cache : false,
data: {
username : $('#username').val(),
password : $('#password').val(),
},
success: function ( data ) {
// do something
}
});
And apparently that doesn't always work as in a reply to the previous code segment, someone has responded that after jQuery 1.7.1 you may need to add a timestamp like so:
$.ajax( { url: "someserver/somepath/blah" + "?_=" + jQuery.now(), type: "PUT", data: somedata});
Here is an example of the code I'm trying to get to work:
function refresh_word(){
Dajaxice.game.refreshWord(Dajax.process,{'game_id':{{game.id}},'player_id':{{player.id}}});
}
Like I said, this works on iPhones and desktop browsers but fails on some android devices.
I'm clutching at straws, I tried disabling the cache for the entire page but it still doesn't seem to work.
$(document).ready(function() {
$.ajaxSetup({ cache: false });
});
Is there a way to do this with dajax?
Thanks in advance for any help!

Titanium.Network.HTTPClient caches responseData. How do I prevent that?

I was wondering how to prevent Titanium.Network.HTTPClient from caching my responseData? This is happening on android in the directory /sdcard/Android/data/com.packagename/cache/_tmp the files follow this pattern for their filename tihttp-XXXXXXXXXXXtmp. I've already implemented a custom cache in the apps private data directory. So I don't need it to happen twice and waste the users precious data space on their sdcard. Plus the cache in the sdcard isn't always there.

var client = Ti.Network.createHTTPClient({
onload : function(e) {
Ti.API.info("Received text: " + this.responseText);
alert('success');
},
timeout : 5000,
cache : false,
});
The above works for iPhone only after a bit of looking, but if you set the headers directly to the request, it should work for both iPhone and Android:
client.setRequestHeader('Cache-Control','no-cache');
client.setRequestHeader('Cache-Control','no-store');
This must be called after open, but before the request is sent, i.e.:
var client = Ti.Network.createHTTPClient();
client.open('GET','http://google.com/');
client.setRequestHeader('Cache-Control','no-cache');
client.setRequestHeader('Cache-Control','no-store');
client.send('nice');

JSfiddle : how to create multi-JS/CSS/HTML files project?

Is there a way to create a serious HTML/CSS/JS project with multiple HTML, CSS, JS files on JSfiddle.net ?
If yes, how to do it ?
I want to create a basic mobile apps based on HTML/CSS/JS, about a dozen of HTML/CSS/JS files. I would like to develop it all on JSfiddle, my favorite Online JavaScript IDE. But JSfiddle.net while a clean way to test projects stays limited to:
1 html file (personal)
1 CSS file (personal)
1 JS file (personal)
several external resources (CSS, JS libs, data) which request you another webhosting.
The official doc suggesting Github hosting for 1HTML/1JS/1CSS/someDataFiles is not satisfying. I wish all on JSFiddle, and more files in my project.

You can do it inside a jsFiddle but there are few limitations, and you are probably not going to be satisfied with it.
You can test only 1 HTML multiple pages template. But in case of jQuery Mobile framework this will be enough, as you can place numerous jQM pages inside a 1 html file.
For example, this is my jsFiddle template when helping to this group: http://jsfiddle.net/Gajotres/yWTG2/
You cant use normal form submitting. Instead you should use ajax to sumbit form data.
In my other answer you can find solutions for ajax form submitting and how to send parameters during the page transition: jQuery Mobile: Sending data from one page to the another
In case you want to communicate with an remote host:
var ajax = {
sendRequest:function(save_data){
$.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
data: save_data,
async: true,
beforeSend: function() {
// This callback function will trigger before data is sent
$.mobile.showPageLoadingMsg(true); // This will show ajax spinner
},
complete: function() {
// This callback function will trigger on data sent/received complete
$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
},
success: function (result) {
if(result == "true") {
$.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
} else {
alert('Login unsuccessful, please try again!'); // In case result is false throw an error
}
// This callback function will trigger on successful action
},
error: function (request,error) {
// This callback function will trigger on unsuccessful action
alert('Network error has occurred please try again!');
}
});
}
}
jsFiddle has a stupid policy where they want to prevent usage of full HTML files. They are trying to enforce this with stupid error warnings in HTML content part. You will need to have something like firebug plugin for Firefox or Chrome to remove this stupidity. Or you can even do it with Grease Monkey plugin.
In case you want to use full HTML template like in this example: http://jsfiddle.net/Gajotres/yWTG2/ you will need to use your javascript code in onDomready state.
Some functionalities are not going to work. Like window.orientationchange event.