Develop Reference

Use cookie to save the login information,but for android platform it cannot work

I use onsen-ui and angularjs to achieve a login function on Monaca, actually it works well when I debug on iphone and preview on the website, but when I try to use it on a android system, i find that cookies are not saved. The next time I access the login page, what I see is a welcome page, but on the android system, the system asked me to log in again.
When I login success , I save my information on cookie.
My code as follows:
$scope.login = function(){
$.ajax({
type: 'post',
url: 'https://www.xxxxxxx.com/api/public/user_login',
data:{
username:document.getElementById('login_username').value,
password:document.getElementById('login_password').value
},
success: function(data) {
if(data.error != "" & data.error != null ){
alert(data.error);
delCookie('username');
}else if(data.status == 0){
setCookie('username',data.username,365);
$scope.username = getCookie('username');
document.getElementById('loginInfo').style.display="none";
document.getElementById('welcome').style.display="block";
}
},
});
};
function getCookie(login_name){
if (document.cookie.length>0){
login_start=document.cookie.indexOf(login_name + "=")
if (login_start!=-1){
login_start=login_start + login_name.length+1;
login_end=document.cookie.indexOf(";",login_start);
if (login_end==-1){
login_end=document.cookie.length;
}
return unescape(document.cookie.substring(login_start,login_end));
}
}
return "";
}
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
}
function delCookie(name){
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
}

You can use the $cookieStore it seems deprecated now, instead `'$cookie is the one we need to use.
Instead of using the document.cookie, which is a web API, use the angular inbuilt service for the same, you won't have difficulties with this in android and ios.
You need to just inject the dependency in your controller:
as:
angular.module('sampleApp', ['ngCookies'])
.controller('AuthController', function ($scope,
$cookies,//injecting the dependency here
$timeout,
ngDialog) {
$scope.login = function(){
$.ajax({
type: 'post',
url: 'https://www.xxxxxxx.com/api/public/user_login',
data:{
username:document.getElementById('login_username').value,
password:document.getElementById('login_password').value
},
success: function(data) {
if(data.error != "" & data.error != null ){
alert(data.error);
delCookie('username');
}else if(data.status == 0){
setCookie('username',data.username,365);
$scope.username = getCookie('username');
document.getElementById('loginInfo').style.display="none";
document.getElementById('welcome').style.display="block";
}
},
});
};
function getCookie(login_name){
if (document.cookie.length>0){
login_start= document.cookie.indexOf(login_name + "=")
//use $cookies.get(login_name) to get value of the login_name param set in cookie
if (login_start!=-1){
login_start=login_start + login_name.length+1;
login_end=document.cookie.indexOf(";",login_start);
//use $cookies.get(login_name) to get value of the login_name param set in cookie
if (login_end==-1){
login_end=document.cookie.length;
//use $cookies.get(login_name) to get value of the login_name param set in cookie
}
return unescape(document.cookie.substring(login_start,login_end));
}
}
return "";
}
function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
//use $cookies.put(key, value) to get value of the login_name param set in cookie
}
function delCookie(name){
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = getCookie (name);
document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
//use $cookies.put(key, value) to get value of the login_name param set in cookie
}
}
It's easy to implement and use, please refer the Angular documentation for the same.

How to schedule data sync in PhoneGap app, retrieving JSON

I am building a PhoneGap app, and currently have setup some datasources that have a JSON feed I pull from, to populate my app with data. Right now, it only pulls that data once, the first time the app is run.
I would like to download data everytime the app first opens, and then if it stays open for longer than 15 minutes, it updates again. The json feed can be queried with a last_mod_day in the URL so it pulls only the data that has changed.
What would be recommended to go about this, and how to check for a WiFi/Data Connection on the phone, and if not it fails quietly?
Below is the code for my current function to grab the feed.
function downloadFileError(evt) {
console.log('downloadFileError: ');
console.log(evt.target.error);
}
function downloadFile(ep) {
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0,
function onFileSystemSuccess(fileSystem) {
fileSystem.root.getFile("dummy.json", {
create: true,
exclusive: false
},
function gotFileEntry(fileEntry) {
var filename = cordova.file.dataDirectory + 'assets/json/' + ep + '.json';
var fileTransfer = new FileTransfer();
fileEntry.remove();
console.log('looking at ' + filename);
fileTransfer.download(
encodeURI("http://www.myURL.com/theApp?ep=" + ep),
filename,
function(theFile) {
console.log("download complete: " + theFile.toURL());
},
function(error) {
console.log("DLERR: src=" + error.source + " t=" + error.target);
}
);
},
function(evt) {
console.log(evt);
console.log('fn: ' + filename);
}
);
},
downloadFileError);
}
function downloadDynamicPages() {
var deferred = $.Deferred();
var pages = ['setOne','setTwo','setThree','setFour','setFive','setSix'];
var cnt = 0;
var total_pages = pages.length;
//checkConnection();
$.each(pages,function(k,v) {
console.log('looking at ' + v);
downloadFile(v);
cnt++;
if(cnt >= total_pages) {
deferred.resolve('all done with files');
}
});
return deferred.promise();
}
Any help on any part of these questions would help me greatly. If needed, I can answer any questions. Thank you Stack.

LeafletJS - Cached tiles with local filesystem

I'm implementing a Cordova application (3.2) where I want to use LeafletJS and a map tile provider together with a local filesystem cache of the tiles.
My approach in an overview is the following:
Extend the Leaflet TileLayer
Overwrite the _loadTile method to retrieve the tile either from local filesystem or from remote
My code:
var StorageTileLayer = L.TileLayer.extend({
log: function (text) {
if (this.options.log)
this.options.log(text);
else
console.log("[StorageTileLayer]: " + text);
},
_setUpTile: function (tile, key, value, cache) {
try {
tile._layer = this;
tile.onload = this._tileOnLoad;
tile.onerror = this._tileOnError;
this._adjustTilePoint(tile);
tile.src = value;
this.fire('tileloadstart', {
tile: tile,
url: tile.src
});
this.log("Setting url to " + tile.src);
}
catch (e) {
this.log("ERROR in setUpTile: " + e.message);
}
},
_loadTile: function (tile, tilePoint) {
this._adjustTilePoint(tilePoint);
var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;
var self = this;
var tileUrl = self.getTileUrl(tilePoint);
console.log(tileUrl);
console.log(typeof tileUrl);
if (this.options.storage) {
this.log("Load Tile with storage");
this.options.storage.get(key, tileUrl).then(function (value) {
self.log("Tile URL to load: " + value.url);
self._setUpTile(tile, key, value.url, true);
});
} else {
this.log("Load Tile without storage");
self._setUpTile(tile, key, tileUrl, false);
}
}
});
options.storage is a storage which has the method get(key, remoteUrl) and returns either the cached tile from local filestorage (this implementation actual works fine, so here is not the problem) or the remote url but downloads the tile in the background, so that it will be available from local file storage on the next call.
Unfortunately I can see on my device when I use Charles (Web Debugging Proxy) that although the local map tiles are loaded (I can see it from the logs) that there are still a couple of requests to the map tiles provider.
Does anyone have an idea what I am doing wrong and what else I have to overwrite in my StorageTileLayer to prevent the calls to the remote? The real problem is, that the map should work in offline mode as well, but it is not.
Thanks for your help.
Libraries in the environment:
Leaflet (0.7.3)
angularJS (1.2.16)
Cordova (3.2)

I basically fixed it with this code (angular js):
(function (window, L) {
var isDebug = false;
var StorageTileLayer = L.TileLayer.extend({
log: function (text) {
if (!isDebug)
return;
if (this.options.log)
this.options.log(text);
else
console.log("[StorageTileLayer]: " + text);
},
_setUpTile: function (tile, key, value, cache) {
try {
tile._layer = this;
tile.onload = this._tileOnLoad;
tile.onerror = this._tileOnError;
this._adjustTilePoint(tile);
tile.src = value;
this.fire('tileloadstart', {
tile: tile,
url: tile.src
});
}
catch (e) {
this.log("ERROR in setUpTile: " + e.message);
}
},
_loadTile: function (tile, tilePoint) {
this._adjustTilePoint(tilePoint);
var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;
var self = this;
var tileUrl = self.getTileUrl(tilePoint);
if (isNaN(tilePoint.x) || isNaN(tilePoint.y)) {
this.log("TilePoint x or y is nan: " + tilePoint.x + "-" + tilePoint.y);
return;
}
if (this.options.storage) {
this.options.storage.get(key, tileUrl).then(function (value) {
self.log("Tile URL to load: " + value.url);
self._setUpTile(tile, key, value.url, true);
});
} else {
this.log("Load Tile without storage");
self._setUpTile(tile, key, tileUrl, false);
}
}
});
window.StorageTileLayer = StorageTileLayer;
})(window, L);
Adding the tile layer to the leaflet map is the important part! you have to prevent the load balancer from getting different urls for each tile. I did it by setting the url of the tole layer to a fixed value:
var url = 'https://a.tiles.mapbox.com/v3/<<YOUR ACCESS CODE>>/{z}/{x}/{y}.png';
var layer = new StorageTileLayer(url, {
storage: TileStorage
});
Of course you still have to implement the TileStorage in my case it has a single method get(key, url) and returns a $q-defer which is resolved with either the local available file. If the file is not available in the local storage it will be downloaded and then the promise is resolved.
Unfortunately this TileStorage is not public available because its an in-house development of my company so I can't share it.
Nevertheless I hope this helps you.

AJAX not being called on load in PhoneGap 2.9.1

I am trying to load and parse an XML file onto a page in my PhoneGap application. My XML file is in the correct directory.
When I run page in Google Chrome using a Local Apache Web Server, the file is loaded and Parsed, but when I run the application on my Device. (Samsung Galaxy SII GT-i9100p) The script doesn't run. I have tried everything I can think of. The thing that has stumped is that it was working a few days ago, up until I changed the script to parse the data into a jQuery Mobile Collapsible.
Any help would be much appreciated.
Here is my code:
$(function loadXml() {
load();
});
$(document).on('pagebeforecreate orientationchange', Application.updateIcons);
function load() {
$.ajax({
type: "GET",
url: "schooldata.xml",
dataType: "xml",
success: function (xml) {
var regionName;
var schoolName;
var schoolDescription;
var liHtml;
$(xml).find("REGION").each(function (index, Region) {
liHtml = "";
$(Region).find("SCHOOL").each(function (index, School) {
regionName = $(Region).find("REGIONNAME").text();
schoolName = $(School).find("NAME").text();
schoolDescription = $(School).find("DESCRIPTION").text();
liHtml +=
"<li>" +
schoolName +
"<br>" +
schoolDescription +
"</li>"
})
$('#schoolcontainer').append
(
"<div data-role='collapsible' data-theme='b'>" +
"<h3>" + regionName + "</h3>" +
"<ul data-role='listview' data-inset='false'>" +
liHtml +
"</ul>" +
"</div>"
)
});
$('#schoolcontainer').collapsibleset("refresh");
}
});
}
$(document).one('deviceready', Application.initApplication);

Android: Trigger AJAX function not working

I have an AJAX function I am building which makes a call on scroll or click/touchtstart to append some content to my HTML. Everything works great for me in the desktop environment, both on click and on scroll events. However neither of them work on my Android 2.3.7 HTC EVO or my Nexus 7 on Android 4.1.1.
Here is my click JavaScript event handler:
$('.loadMore').each(function() {
//Set URL and start on the first page
var self = this;
var path2root = ".";
var loc = window.location.origin;
var url = loc + "/process.php";
var subcategoryId = $(this).parent().attr('data-subcategoryId');
var page = 1;
// Build the updated URL
$(self).bind('touchstart', function(e) {
e.preventDefault();
page++;
// AJAX function for processing JSON
$.ajax({
url: url + "?subcategoryId=" + subcategoryId + "&page=" + page,
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (data) {
var i = 0;
for(i = 0 ; i < data.length; i++) {
var articleId = data[i].articleResult.articleId;
var title = data[i].articleResult.title;
var subhead = data[i].articleResult.subhead;
var image = data[i].articleResult.image;
var response = "<td><div class='articleResult'><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'><img src='" + image + "' width='120'/></a><br><h3><a href='" + path2root + "/article/article.php?articleId=" + articleId + "'>" + title.substring(0,25) + "</a></h3></div></td>";
$("table tr td:nth-last-child(2)").after(response);
};
}
});
});
});
My scroll function is very similar, only I bind the event to a different element, and on scroll:
// Collecting scroll info
$('.overthrow').each(function() {
// SAME VARIABLES
$(this).scroll(function () {
if ($(self).scrollLeft() >= parseInt($(document).width() - 50)) {
if (finished == 1) {
page++;
finished = 0;
// SAME AJAX FUNCTION
};
};
});
});
Keep in mind this is a mobile optimized webpage, not a native PhoneGap app, and I am using regular jQuery 1.8.0, not jQuery Mobile or PhoneGap.
I had found THIS issue over on Google Code in regards to Android 2.3 not receiving touchstart events very effectively, which led me to start building the on scroll function instead.

According to your link from Google Code the fix would be to include an e.preventDefault() at the start of your touchstart event like so:
$(self).bind('touchstart', function(e) { // include e as a reference to the event
e.preventDefault(); // prevents the default behaviour on this element
....
});
The above works on my Android 2.X devices; I hope it helps!

So I was able to get the AJAX call functioning properly for the on scroll event. I have abandoned the click/touchstart event all together as that seems to be buggy in Android.
For whatever reason, Android was not reading dynamic URL correctly when uploaded to the webserver:
var loc = window.location.origin;
var url = loc + "/process.php";
So when I was building my ajax call with the compiled URL:
$.ajax({
url: url + "?subcategoryId=" + subcategoryId + "&page=" + page,
the window.origin.location was being misinterpreted. Instead I needed to hard-code the location of my process.php file:
url: "process.php?subcategoryId=" + subcategoryId + "&page=" + page,
I discovered my solution through another SO post HERE
The only catch being my code was working on iPhone, but not on Android. If anyone knows the reason behind this, that would be great information to have.