Im using Phonegap 2.9.0 in ios, i have gone through the tutorial for inappbrowser .and i have tried the following to in my application
App.js Calling method
indexpnl.element.on({
tap: function (e) {
var el = Ext.get(e.target);
var bval = el.getId();
if (bval == "btnfacebook") {
// onDeviceReady()//using this application screen its self loading the site view not in inappbrowser
document.addEventListener("deviceready",onDeviceReady, false);//here nothing happening
}
}
});
jsfunction.js Method
function onDeviceReady()
{
var ref = window.open('http://www.facebook.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
ref.addEventListener('exit', function() { alert(event.type); });
}
And i have include the plug in config.xml
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
When i call using the above method nothing happens.When i call On onDeviceReady() the site is loading in application itslef but not in the inapp browser.What wrong with my code
Dunno but have you checked you have a
<script src="phonegap.js"></script>
in your script as in
https://build.phonegap.com/docs/plugins-using
Leaving it out can produce those kind of errors
Related
i am trying to use the cordova printer plugin from: https://github.com/katzer/cordova-plugin-printer/tree/master
I have followed the installation instructions and have this in index.html:
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
Here is my controller call:
$scope.printTable = function(){
$ionicPlatform.ready(function() {
cordova.plugins.printer.isAvailable(
function (isAvailable) {
alert(isAvailable ? 'Service is available' : 'Service NOT available');
});
})
};
i get this error on phonegap app:
Error: undefined is not an object (evaluating 'cordova.plugins.printer')
I have this added in my config.xml file:
<gap:plugin name="de.appplant.cordova.plugin.printer" version="0.7.0" />
What am i missing here
$scope.print = function() {
if ($cordovaPrinter.isAvailable()) {
$cordovaPrinter.print(//type what to display);
} else {
alert("Printing is not available on device");
}
}
just try like this
I am developing an Phonegap (3.3.0) + Jquery Mobile (1.4) app.
I get an infinite loading page (white page with ui-loader icon). This is erratic and sometimes the app starts well.
I see a very strange bug: none of the first "console.logs" I use in my js file are displayed in the Phonegap Build Weinre debug console.
Only after a certain line (which contain by the way the first asynchronous function) the console.log are displayed in the Weinre console.
So I guess I have a binding order problem related to Jquery Mobile and Phonegap, but I can't find what's wrong in my initialization.
Can I be also due to the order in which I call js files in my index.html ?
I followed this post to register Phonegap and JQM : Correct way of using JQuery-Mobile/Phonegap together?
recommended here : jQuery Mobile : What is the order of page events triggering?
by #Gajotres.
Can you help ?
Thanks
HTML:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- SPLASH PAGE -->
<div id="splash-page" data-role="page">
<div class='toastenjs' style='display:none'></div>
<center id="splashLogoCenter">
<img src="images/splash.png" width="200" />
</center>
</div>
<!-- WELCOME PAGE -->
<div id="welcome-page" data-role="page">
...
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.jsonp-2.4.0.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/functionCUgly.js"></script>
<script src="js/boardDims.js"></script>
<script src="phonegap.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.4.3.min.js"></script>
<!--POUCHDB -->
<script src="js/pouchdb-2.2.3.min.js"></script>
<!-- Flexslider-->
<!-- <script src="js/flexslider-v2.js"></script>--> <!-- v2.2 doesn't work, maybe because we're not using last versions of jquery and jqm -->
<script src="js/flexsliderV2.3.js"></script>
<!-- iScroll-->
<script type="application/javascript" src="js/iscroll.js"></script>
<script type="application/javascript" src="js/jquery.mobile.iscrollview.js"></script>
<!-- Add2home : create a shortcut icon of the wep app on the phone homescreen -->
<script type="application/javascript" src="js/add2home.js"></script>
<script src="js/GoogleLogin.js"></script> <!--Phonegap module by eric valenzia https://github.com/valenzia10/PhonegapGoogleLogin-->
<script src="js/jquery.ddslick.min.js"></script>
<script src="js/jquery-geturlvar.js"></script>
<script src="js/html2canvas.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
if (typeof(google) != 'undefined'){
google.load('visualization', '1.0', {'packages':['corechart']});
}
</script>
JS file:
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
$(document).one("mobileinit", function () {
console.log('mobileinit just fired'); //this one is not displayed in the weinre console
jqmReadyDeferred.resolve();
});
if ( isPhoneGap() ) {
document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
deviceReadyDeferred.resolve();
}
$.when(deviceReadyDeferred, jqmReadyDeferred).then( EVERYTHING() ); // !!!!! normalement il faut virer ces parenthèses pour respecter le $.when....mais ça fait tout bugger !!!!!!!!!
} else {
console.log("NOT Running on PhoneGap!");
$.when(jqmReadyDeferred).then( EVERYTHING );
}
function EVERYTHING() {
console.log("on est entré dans EVERYTHING()"); //not displayed in the weinre console
insideEVERYTHING = 1;
console.log("jqmReadyDeferred is "+jqmReadyDeferred.state()); //not displayed in the weinre console
console.log("deviceReadyDeferred is "+deviceReadyDeferred.state()); //not displayed in the weinre console
//FOR EVERY PAGE
$(document).on('pagecontainershow', function (e, ui) {
//...
});
$(document).on('pagecontainershow', function (e, ui) {
//...
});
// --------------- SPLASH PAGE ---------------------
//$(document).on('pagecreate','#splash-page', function(){
$(document).on('pagecontainershow', function (e, ui) {
var activePageId = $(':mobile-pagecontainer').pagecontainer('getActivePage').attr('id');
if (activePageId === 'splash-page') {
console.log("we are in splash-page");
if (typeof debugOptionUseLocalDB != 'undefined' && debugOptionUseLocalDB) {
fallbackToLocalDBfile();
console.log('on yess');
}else{
if(connectionStatus == 'online'){
console.log("launching getJsonpFile...");
//DEBUG TIMER
var time=[];
var dummy;
dummy = new Date().getTime();
time.push(dummy);
getJsonpFile(dbUrl())
.done(function(data) {
console.log("...getJsonpFile done.");
if(localStorage) {
if ( isPhoneGap() || !isIOS() ) { //BUG iOS safari doesn't work with this (Cf. Philippe's ipad), si on est sur phonegap ok, si on n'est pas sur phonegap et pas sur iOS ok
localStorage.setItem("proDB", JSON.stringify(data)); //write to localStorage
}
}
//...JQM bindings are continued below
The best registration is the following :
var isPhoneGap;
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
isPhoneGap = checkIfPhoneGap();
if ( isPhoneGap ) {
$.when(deviceReadyDeferred, jqmReadyDeferred).done( Everything );
} else {
console.log("NOT Running on PhoneGap!");
$.when(jqmReadyDeferred).done( Everything );
}
$(document).on("mobileinit", function () {
//alert('mobileinit just fired');
//popShortToast("mobileinit just fired");
jqmReadyDeferred.resolve();
});
document.addEventListener("deviceReady", onDeviceReady, false);
function onDeviceReady() {
//popShortToast("deviceReady just fired");
deviceReadyDeferred.resolve();
}
function checkIfPhoneGap() {
var app = document.URL.indexOf( 'http://' ) === -1 && document.URL.indexOf( 'https://' ) === -1; // && document.URL.indexOf( 'file://' );
if ( app ) {
return true;
} else {
return false;
}
}
function Everything() {
//enter your JQM bindings here, and use Phonegap's features
}
I am developing an iOS app with Cordova and I am using the Facebook-connect plugin for authentification.
My problem : sometimes the Facebook Plugin doesn't load early enough so the FB authentification doesn't go the native way, but through a kind of in-app browser popup.
Is there a way to detect that Fb plugin has finished loading ?
Thank you
I think you should use facebook phonegap plugin as your authentication.
Download and install into your cordova project.
https://github.com/phonegap/phonegap-facebook-plugin
Then make sure you have this script in your project.
cdv-plugin-fb-connect.js
facebook-js-sdk.js
After that, paste this code into your main script
if ((typeof cordova == 'undefined') && (typeof Cordova == 'undefined')) alert('Cordova variable does not exist. Check that you have included cordova.js correctly');
if (typeof CDV == 'undefined') alert('CDV variable does not exist. Check that you have included cdv-plugin-fb-connect.js correctly');
if (typeof FB == 'undefined') alert('FB variable does not exist. Check that you have included the Facebook JS SDK file.');
FB.Event.subscribe('auth.login', function(response) {
//alert('auth.login event');
});
FB.Event.subscribe('auth.logout', function(response) {
//alert('auth.logout event');
});
FB.Event.subscribe('auth.sessionChange', function(response) {
//alert('auth.sessionChange event');
});
FB.Event.subscribe('auth.statusChange', function(response) {
//alert('auth.statusChange event');
});
function getSession() {
alert("session: " + JSON.stringify(FB.getSession()));
}
function getLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert('logged in');
} else {
alert('not logged in');
}
});
}
var friendIDs = [];
var fdata;
function logout() {
FB.logout(function(response) {
alert('logged out');
window.location.replace("#login");
});
}
function login() {
FB.login(
function(response) {
if (response.authResponse) {
alert('logged in');
FB.api('/me', function(me) {
if (me.id) {
localStorage.id = me.id;
localStorage.email = me.email;
localStorage.name = me.name;
window.location.replace("#home");
}
else {
alert('No Internet Connection. Click OK to exit app');
navigator.app.exitApp();
}
});
} else {
alert('not logged in');
}
}, {
scope: "email"
});
}
document.addEventListener('deviceready', function() {
try {
//alert('Device is ready! Make sure you set your app_id below this alert.');
FB.init({
appId: "appid",
nativeInterface: CDV.FB,
useCachedDialogs: false
});
document.getElementById('data').innerHTML = "";
} catch (e) {
alert(e);
}
}, false);
use login() to login . Enjoy!!
There must be an entry in the log, if the plugin fails to load while testing the app.
Also looks like you are using facebook API, phonegap other native plugins always load after the recommended plugins offered in here.
Also it loads as per the order you mentioned in the XML file,
<feature name="org.apache.cordova.facebook.Connect">
<param name="ios-package" value="FacebookConnectPlugin" />
</feature>
and
<plugin name="" value="" />
As developers clearly knows debugging in Phonegap is difficult than pushing a tanker.
Hope the following invoking method helps,
Add the reference of your plugin to your index.html
After the onDeviceReady() function, add the JavaScript for invoking the native plugin and handling the plugin results.
Add JavaScript functions named callNativePlugin, nativePluginResultHandler, andnativePluginErrorHandler
as shown below,
function callYourPlugin( returnSuccess ) {
YourPlugin.callNativeFunction( YourPluginResultHandler, YourPluginErrorHandler, returnSuccess );
}
function YourPluginResultHandler (result) {
alert("SUCCESS: \r\n"+result );
}
function YourPluginErrorHandler (error) {
alert("ERROR: \r\n"+error );
}
Finally add buttons to invoke your plugins as follows,
<body onload="onBodyLoad()">
<h1>Hey, it's Cordova!</h1>
<button onclick="callYourPlugin('success');">Click to invoke the Native Plugin with an SUCCESS!</button>
<button onclick="callYourPlugin('error');">Click to invoke the Native Plugin with an ERROR!</button>
</body>
I feel this method as easy to invoke any plugins, also you can checkout this article for more.
When i try to call the url in my phone-gap 2.9.0 application in ios,The application become blank and url loading not in inappbrowser.
Here the code
Config.xml
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
Method
var indexpnl = Ext.create('Ext.Panel', {
id: 'indexpnl',
scrollable:'vertical',
height: '100%',
width: '100%',
html:'<div align="center" ><img src="resources/img/img1.png" height="280px" width="100%" /><br><div style="padding:10px;" align="center"><img id="btnlogin" src="resources/img/buttonlogin.png" height="42px" width="100%" /><br><img src="resources/img/buttonfacebook.png" id="btnfacebook" height="42px" width="100%"/><br><div align="center">or</div><img src="resources/img/buttonsignup.png" id="register" height="42px" width="100%"/></div></div>'
});
indexpnl.element.on({
tap: function (e) {
var el = Ext.get(e.target);
var bval = el.getId();
if (bval == "btnlogin") {
goLogin()
}
if (bval == "btnfacebook")
{
var ref = window.open('http://www.facebook.com', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
ref.addEventListener('exit', function() { alert(event.type); });
}
if (bval == "register") {
register()
}
}
});
And the NSLOG return
[3475:c07] Resetting plugins due to page load.
How to call the URL in inappbrowser.PLease help me to solve
why doesnt this ajax call doesnt work on my BB OS5 and works in BB OS6+
$("#HomePg").on('pageinit', function(event) {
$.ajax({
dataType:'json',
url: serviceURL+'linka',
error: function(xhr, status, error) {
alert("Cannot Connect to the Specified URL : "+status);
},
success: function(json) {
$.each(json, function(i, object) {
var cr = "<li id='menuList'><a id="+object.id+"
data-transition='slide' class='menuClass' ><img src=css/images
/"+object.id+".png /> <h3> "+object.menuname+" </h3></a></li>";
$("#mainMenu").append(cr);
$("ul").listview("refresh");
mainloaded = true;
});
},
timeout:60000,
retryMax: 10
});
});
....config.xml
<access subdomains="true" uri="*"/>
<rim:connection timeout="60000">
<id>TCP_WIFI</id>
<id>TCP_CELLULAR</id>
<id>BIS-B</id>
<id>MDS</id>
<id>WAP2</id>
<id>WAP</id>
</rim:connection>
.........
Am using jqm 1.1.1 version with jquery 1.7.2
this works on BB OS6+
Sorted :
Looks like BB OS5 has problem with jQuery-Ajax.. For someone who is trying the same try using XMLHttpRequest.
$("#homePg").on('pageinit', function(event) {
var url = serviceURL+'testgroups'
http.open("GET", url, true);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
//alert(http.responseText);
var json = JSON.parse(http.responseText);
$.each(json, function(i, object) {
var cr = "<li id='menuList'><a id="+object.id+" data-transition='slide' class='menuClass' ><img src=css/images/"+object.id+".png /> <h3> "+object.menuname+" </h3></a></li>";
$("#mainMenu").append(cr);
$("ul").listview("refresh");
$.mobile.hidePageLoadingMsg();
mainloaded = true;
});
}
}
http.send(null);
});