Develop Reference

Ionic + Cordova + Facebook login: 51 F02 FacebookConnectPlugin sClass not found

I am trying to add facebook login to my application. I followed the same process as mentioned in this blog of ionic "https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework"
But somehow its not working.
Its failing at $cordovaFacebook.login. Its not going inside.
$scope.fbLogin = function(){
$cordovaFacebook.login(["public_profile", "email", "user_friends"]) //Failing in this step
.then(function(success) {
$cordovaFacebook.api("me?fields=id,name,picture", [])
.then(function(result){
var userData = {
id: result.id,
name: result.name,
pic: result.picture.data.url
}
//Do what you wish to do with user data. Here we are just displaying it in the view
$scope.fbData = JSON.stringify(userData, null, 4);
}, function(error){
// Error message
console.log(error);
})
}, function (error) {
console.log(error); // error comes as "Class not found"
});
}
What i am missing here. After debugging i found it says
51 F02 FacebookConnectPlugin sClass not found
See attached image. What is wrong here.

Damm...Issue is with cordova 5.4.1. I degraded to version 5.3.3 and it started working.

phonegap WFS proxy issue

I encountered a problem when I try to package my sencha-touch app using phonegap. Everything works fine except accessing WFS in phonegap. (And the app has no problem running in browser, WFS access is OK)
My phonegap version is 2.9; openlayer version is 2.13
Here I present my simple code. You can also check the example codes in the following site: http://openlayers.org/dev/examples/wfs-filter.html
var rootUrl = window.location.protocol + "//" + window.location.host + '/';
var map;
function init() {
map = new OpenLayers.Map({
div: "map",
layers: [
new OpenLayers.Layer.WMS(
"Natural Earth",
"http://demo.opengeo.org/geoserver/wms",
{ layers: "topp:naturalearth" }
),
new OpenLayers.Layer.Vector("WFS", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
url: rootUrl + 'proxy.py?url=http://demo.opengeo.org/geoserver/wfs',
featureType: "tasmania_roads",
featureNS: "http://www.openplans.org/topp"
}),
styleMap: new OpenLayers.StyleMap({
strokeWidth: 3,
strokeColor: "#333333"
}),
})
],
center: new OpenLayers.LonLat(146.7, -41.8),
zoom: 6
});
}
In phonegap there's no problem accessing WMS, but when I try WFS, it never work.
Comparing to the link I showed you before, there's a road displayed in the map, and it is obtained through WFS. In my phonegap app, the road will not be displayed.
I'm wondering whether it is a WFS issue, or phonegap issue. Something is blocking my access to WFS in my phonegap app.
Please give me some suggestions and hints, guys! I will really appreciate it.
function getLayerList() {
$.ajax({ url: rootUrl + 'proxy.py?url=http://192.168.0.23/LBEService/Service1.svc/GetEventList',
//async: false,
data: JSON.stringify({}),
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log(result);
$("#demo").html(result[0].event_NAME);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
}).done(function () {
});
}

Have you added the domain that is hosting the WFS to the white list?
http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html

On android PhoneGap window.location.protocol is 'file:' and window.location.hostname is "", so your app will probably be looking for file://proxy.py? which doesn't exist on your device.
To solve this issue I test the protocol, and set up OpenLayers.Proxy accordingly, thus:
if( location.protocol == 'file:' ) {
OpenLayers.ProxyHost = "";
} else {
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
}
So in your case, if protocol is 'file:', I think you need to drop 'proxy.py?'
Tip: debug your android app using Chrome on your PC (chrome://inspect/#devices) and you'll see the request that android is making.

Android browser times out Ajax request

I am submitting a form via ajax (using JQuery) and the time taken for the response to be received can be anything from a few seconds to a few minutes. This is expected and cannot be changed. This is working fine in all browsers except the stock Android browser which is timing out my request after 120 seconds, no matter what I set the timeout to in the ajax constructor. Is there a way around this?
The code for the Ajax request is quite simple:
var jqxhr = $.ajax({
type: 'post',
timeout: 500000,
url: 'process.php',
data: $('form').serialize(),
success: function (data) {
alert("success" + data);
},
error: function(xhr, error){
alert("Error: " + error + ", XHR status: " + xhr.status);
},
});
When submitted on Android with a script that takes over 120 seconds, the error handler is hit with the following message:
Error: error, XHR status: 0

Please have a look at this article indicating that the error may arise from the presence of a HTTP Expires header.
Use a tool like Fiddler to monitor the HTTP network traffic and present the results for further analysis.
You have a syntax error.
var jqxhr = $.ajax({
type: 'post',
timeout: 500000,
url: 'process.php',
data: $('form').serialize(),
success: function (data) {
alert("success" + data"); <------- HERE
},
error: function(xhr, error){
alert("Error: " + error + ", XHR status: " + xhr.status);
},
});
Try your code with this on-line JavaScript runner but remove the extra double qoute.
var jqxhr = $.ajax({
type: 'post',
timeout: 500000,
url: 'process.php',
data: $('form').serialize(),
success: function (data) {
alert("success" + data);
},
error: function(xhr, error){
alert("Error: " + error + ", XHR status: " + xhr.status);
},
});

After some research it appears that others have had similar issues with AJAX timeouts at ~60ms and ~120ms. Those seem like very deliberate values (like internal browser settings), and I am going to go ahead and assume from the lack of responses/solutions that we can't get around those timeouts.
Have you considered posting your AJAX request to a separate server/service which does not do any processing and can return a quick 200 OK response. Then let this second server handle the communication with the slow server. I know this sucks, but it might be your only solution (and might result in a snappier app and happier users).
Can you give any more insight into your app? Is this a PhoneGap app or is the app hosted at some domain that you can access from the browser? Are you able to provide a URL?

Have you seen the below thread.
AJAX (XmlHttpRequest) timeout length by browser
Regards,
SP

Try inserting your code on a separate blank html page with nothing but your ajax request, jquery attached and some basic alerts like success, status code or errors etc. Put the correct file path in url handler, in data handler, put some static values like name:"Macros",site:"stackoverflow". When all gets ready, you should get alert message on desktop browser, if its success, try running that html page on stock android browser. If that works as well.. The problem might be jquery conflict with some other script or your $("form#testform").serialize() function.

How about if you retry after the timeout?
$("form#testform").submit(function(){
var allFormValues = $("form#testform").serialize();
$.ajax({
cache:false,
timeout:8000, // I chose 8 secs for kicks
tryCount : 0,
retryLimit : 5,
type:"POST",
url:"someurl.php",
data:allFormValues,
error:function(xhr, status, error) {
if (status == 'timeout') {
this.tryCount++;
if (this.tryCount <= this.retryLimit) {
alert("Timeout! Retrying now!");
//try again
$.ajax(this);
return;
}
return;
} else {
// not a timeout? not a problem
alert("Error: " + status + ", XHR status: " + xhr.status);
}
},
success:function(response){
alert(response);
}
});
});

Phonegap XMLHttpRequest upload progress

In my Phonegap 3.0.0 application I occasionally upload/download data.
As the upload migth sometimes reach up to couple of MB, I'd like to show to the user that progress is being made.
I wanted to accomplish this using xhr.upload "progress" event using code I found on the web
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
//Do something success-ish
}
});
No event on upload progress is however received when I test my app on Android 4.1.2 [S3 mini] and 2.3.4 [Xperia].
I should probably also mention that the upload is done cross-platform. and jQuery version is 2.0.3
Am I doing something wrong, or the built-in Android browser simply does not support this? Is there a way I could get this working?
Thanx for help

SoundCloud Stream in Phonegap under Android

I'm currently trying to get the SoundCloud API working under PhoneGap/Cordova and Android. Here's the code that is working fine within the browser:
var track_url = 'http://soundcloud.com/mymusic/mymusic'
;
SC.get('/resolve', {
url : track_url
}, function(track) {
$("#stream").live("click", function() {
SC.stream("/tracks/" + track.id, function(sound) {
sound.play();
$("#stop").live("click", function() {
sound.stop();
});
});
});
});
On my android debug device however there is no sound. LogCat doesn't give any standard or cordova errors. Has anyone encountered this before?
Many Thanks in advance

Your code looks okay and I was able to test it successfully on Android. The only thing I can think of is that the resolve call is returning a 404 or similar. Have you tried checking for an error?
var track_url = 'http://soundcloud.com/your/track';
SC.initialize({
client_id: 'YOUR_CLIENT_ID'
});
SC.get('/resolve', { url: track_url }, function(track, error) {
if (error) {
alert("Error: " + error.message);
return;
}
// ... rest of your code
});
Try that and see if you get anything, if not, leave a comment.