I am newbie to phonegap development. I have developed an apk file for android in phonegap when i test the apk file in emulator it is giving me the below error message at the end of the page
Note: Navigation may not work if viewed locally
The Ajax-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, please try a different browser.
I know the root cause for this is phonegap accesses the files loacally using file:///
I have searched through google and tried the solution but no solution
Can anyone please please help me on this, I am struggling with this
Edit:
here is my script to enable navigation
<script>
$( document ).on( "deviceready", function() {
// Make your jQuery Mobile framework configuration changes here!
alert("test")
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
$.mobile.phonegapNavigationEnabled = true;
});
</script>
I found the answer not sure whether it is correct or wrong but the message was disappeared and functionality is working fine for me.
js/index.js
comment this line in index.js file
$( document ).on( "pagecreate", function( event ) {
$( event.target ).append( message ); #you need to comment this line
});
As say dhaval in the comments of another question:
This error message is only for Desktop browsers, nothing happeng on mobile.
The best approach for a correct development environment is work with some local server like Xampp
You can test locally your project in the browser with something like: "localhost/yourproject"
Related
I am trying to integrate reCaptcha with my Ionic Android/IOS app. The reason for this is that it calls the same API as the public Web app API.
I have tried creating a web key but due to the fact that the app is served from file:// it doesn't have a domain and as such i cant white list it.
I also tried to create a Android key and white list the App's package name but in both cases, i get the same error:
"error for site owner invalid domain for site key"
I tried using these recaptcha angular wrappers: ng-recaptcha and angular2-recaptcha, but obviously they fail as is a domain issue.
Is there any way to go around this?
So, after long searches and reading everything i found on the subject, i managed to find a workaround.
Instead of trying to load the captcha in my Ionic app, i am using the in-app-browser to open a page on our web version of the app that has the captcha. When the captcha is checked, it saves the code in the localStorage of the in-app-browser.
When the browser is initially opened i start running a script on the browser that checks its storage for the captchaCode.
Code example:
captchaCheck($event){
const browser = this.iab.create(YOUR_CAPTCHA_PAGE_URL_HERE,'_blank', 'location=no'); //AppSettings.CAPTCHA_URL
let loginCtx = this;
browser.on( "loadstop").subscribe(function() {
browser.executeScript({ code: "localStorage.setItem( 'captchaCode', '' );" });
var loop = setInterval(function() {
browser.executeScript({code: "localStorage.getItem( 'captchaCode' )"}).then((values)=>{
var captchaCode = values[0];
if (captchaCode) {
loginCtx.signinForm.get('captchaCode').setValue(captchaCode);
clearInterval( loop );
browser.close();
}
});
});
});
}
}
Im just learning PhoneGap and I have some problems conserning the databases...
SO I want to connect to my localhost databse and simply display the items from the table.. With the ripple emulator everything works, but when I install the app on my device the data is not displayed, but im not getting any errors either.
So I am using the PhoneGap Desktop App. The server is running on http://88.216.170.246:3000
So in my ajax I do this:
$(document).on('click', '.show', function (e) {
$.ajax({
type:"GET",
url:"http://88.216.170.246/Test/www/getData.php",
success: function(result) {
if (result) {
$(".show_data").html(result);
}
else {
alert("error");
}
}
});
});
});
This renders everything perfectly on the emulator, but on my phone, nothing happens... Does the url not work? Maybe I cant access localhost on my device?
Please read:
Top Mistakes by Developers new to Cordova/Phonegap
https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md
READ #1, #4, #5, & #10
#4 reads
In the code, did not listen for the 'deviceready' event.
This is listed MULTIPLE times in the documentation, and is include in every example where it is appropriate. It is still missed. Brian Ford - an Angular developer, points to the section of documentation we need.
This is a very important event that every Cordova application should use.
Cordova consists of two code bases: native and JavaScript. While the native code is loading, a custom loading image is displayed. However, JavaScript is only loaded once the DOM loads. This means your web application could, potentially, call a Cordova JavaScript function before it is loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
Please read the FAQ and follow the links. You have made many bad assumptions.
Best of Luck
Jesse
So i´m having a situation that someone might be able to help.
Im creating a Mobile APP using PhoneGap Build. I´m trying to use this http://coenraets.org/blog/2014/04/facebook-phonegap-cordova-without-plugin/
Right know if I open the app inBrowser it will work. Ask's for permissions etc and fetch the user data correctly. Of course I defined a Valid oAuth: localhost/...html.
So it works for browser but doesnt work for mobile. Wich should be, if so, the valid url for the mobile? Cause since it's an APP iºm confused. I dont think it's necessary show code but if so just ask me.
Thanks ;)
You can still use openFB and it will work. you don't even need to change anything in the openfb.js file. all you have to do is manipulate the call method from the page where you want to call the facebook login window.
say for example you have the facebook call method in index.html
then add this script to that index.html page where the function "facebooklogin()" is called
<script>
openFB.init({ appId: 'your-app-id' });
function facebooklogin() {
openFB.login(function (response) {
if (response.status === 'connected') {
if (response.authResponse) {
var accessToken = response.authResponse.accessToken;
openFB.api({
path: "/{your app version in facebook developer envi.}/me?",
params: { "access_token": accessToken, "?fields":"name,email,gender,user_birthday,locale,bio&access_token='"+accessToken+"'" },
success: function (response) {
var data = JSON.stringify(response);
// do whatever you want with the data for example
$(".data_div").html(data);
$(".data_email").html(data.email);
},
error: function(err){
alert(err);
}
});
}
else {
alert(“empty response returned”);
}
}
else {
alert(“not connected”);
}
},
{
scope: "public_profile,email,user_birthday"
});
}
</script>
very important! Please replace {your app version in facebook developer envi.} with your app version like v2.0 or v2.5
also don't forget to change 'your app id' to you facebook app id example 432046826485152
with openfb you don't need to crack your head over learning hoe to configure facebook login in other platforms. this will serve all platforms
I've got it working on the phone.
The weird thing is that a real URL is not necessary, just a semantic valid one. I've added a Facebook Canvas platform, on the facebook app page, and filled the platform form:
URL = http://localhost/www/
Secure Canvas URL = https://localhost/www/
Both of above domains doesn't exists. I haven't filled the "Valid OAuth redirect URIs" field in the advanced tab.
After that, I've written the following code in my app:
openFB.init("xyz!##123456789"
, "http://localhost/www/oauthcallback.html");
It seems that what matters is that Facebook Canvas's domains or sub domains matches the one on the openFB.init redirectURL param...
I'm using openFB version 0.1. I'm gonna test the earlier versions.
UPDATE
It just have worked because I was using phonegap serve and it makes openFB understand that my app is a website, because phonegap developer app is a browser wrapper, not a app wrapper. If I try to run it in a compiled app (phonegap local build), my code doesn't work. I think I'll have to use facebook-connect earlier than I thought...
I want to create an phonegap app using this plugin. I have done this steps to create and add plugin :
1:I am creatin this app using phonegap cli :-
phonegap create GetPhone --id "com.phone" --name "GetPhoneApp"
2: Going into the project and buid
cd GetPhone
phonegap local build android
3:Installing plugin
phonegap local plugin add https://github.com/macdonst/TelephoneNumberPlugin
4:moving telephonenumber.js to www folder
5: adding
<script type="text/javascript" charset="utf-8" src="telephonenumber.js"></script>
into index.html then added below ondeviceready :-
var telephoneNumber = cordova.require("cordova/plugin/telephonenumber");
telephoneNumber.get(function(result) {
alert("result = " + result);
}, function(error) {
alert("error = " + error.code);
});
6: Added
<plugin name="TelephoneNumber" value="com.simonmacdonald.cordova.plugins.TelephoneNumber"/>
into config.xml in www directory.
7: Build
phonegap local build android
8: Uploaded into build.phonegap.com and created .apk file.
Then when i am running this app on android device it does not alert anything. Is there any wrong step i have taken. I dont know much more about phone gap. After googling i have created this. I have seen this tutorial also to add this plugin. When i am build it locally it does not show any error. But it is also not running.
Please help me find the error.
First of all I would suggest you get acquainted with standard tools, especially adb. These will allow you to provide more information, find out what really is going on.
Skimming through the guide is also helpful, so you can be sure you know what you're doing and why you're doing it. Look at step-by-step debugging of Android code as well.
I would also encourage you to build a Cordova application from sources without using the fancy tools to get the hang of what goes where and how all the components come together. Your source tree is confusing and you seem to have used a mixture of Cordova 3.1 and Cordova 2.9, and even Phonegap? You only need to include cordova.js and your script (js/script.js in this case), nothing else at the moment.
Having said that, on to the major issue.
Your call to get returns an error. Why? Take a quick look at the source code of the plugin:
https://github.com/macdonst/TelephoneNumberPlugin/blob/master/src/com/simonmacdonald/cordova/plugins/TelephoneNumber.java
The plugin retrieves the TelephonyManager and tries to call the getLine1Number. And as you can see result != null is false which drops through to returning a PluginResult.Status.ERROR, which is why you get your error alert box.
This is the core issue at hand. TelephonyManager returning a null for your request. Why? After searching around you might stumble on:
Retrieve phone Number in android
TelephonyManager.getLine1Number() failing?
Reading device phone number throws NULLPointerException
So, navigate over to Settings > About Phone > Status on your device and look at the "My phone number" field. Is it "Unknown"? Tough luck then. My SIM doesn't store the number, so I got the same results as you did.
Another thing to note, is that at least on Android 4.4, the method returns an empty string "" instead of a null, so when testing on my Android 2.3.7 device I got a null and thus got the error branch. But on my Android 4.4.2 device I got a "" and got the success branch, but the number was empty, obviously.
You can set the number on the emulator by using this pretty advanced guide if you'd like to try. So what can you do? Probably nothing by using the API, not even the Android system itself can get your number if it's not stored on the SIM card. Asking the user or sending an SMS to discover the number via a web service may be an option as well.
Step number 5 above will not work unless the code is called after the 'deviceready' event is triggered.
you will need some sort of call to know when the document is loaded, you can do either:
<body onload="onLoad()">
<script>
function onLoad() {
document.addEventListener('deviceready', deviceReady, false);
}
</script>
OR (w/ jquery):
<script>
$(document).ready(function () {
document.addEventListener('deviceready', deviceReady, false);
}
</script>
and then create this function:
function deviceReady() {
var telephoneNumber = cordova.require("cordova/plugin/telephonenumber");
telephoneNumber.get(function(result) {
alert("result = " + result);
}, function(error) {
alert("error = " + error.code);
});
}
This will ensure that your document has loaded and that cordova is ready to call to.
I have a page (jobs.php) which has all the mobile features like call, sms and email. I am accessing this page as an iframe in the main index.php page.
I have made a function such that before making a call or sms or email, it logs the entry into the database.
jobs.php code
Javascript (all variable are defined and working)
<img src=\""+imgpath+"email_logo.png\"onclick=\"setMailLog('"+installername+"',"+customerId+",'"+email+"')\" id=\"mimg_"+customerId+"\"/>
function setMailLog(installerName, customerId,email){
console.log("Email Attempted:");
$.ajax({
url: 'functions.php',
type: 'POST',
dataType:'text',
data: 'elogins='+installerName+'&elogcid='+customerId,
success: function(result){
console.log(result);
$("#mimg_"+customerId).wrap('<a id="mhrefid_'+customerId+'" target="_blank"></a>');
$('#mhrefid_'+customerId).attr('href','mailto:'+email);
window.location.href=$("#mhrefid_"+customerId).attr('href');
}
});
}
This is working perfectly fine on all desktop browsers. Its working fine on default browser in Android but breaks on Chrome in Android which is important because these are mobile features and should work on mobile device on every browser.
When I click on the mail icon in Chrome on Android, it says
The web page at mailto:email might be temporarily down or it may have removed permanently to a new address
Error 302(net::ERR_UNKNOWN_URL_SCHEME): Unknown error
The error page shows up only in particular iframe and not on the whole index.php file.
Call and sms functions the same way, just the error changes to tel:5225 or sms:5114
This is all in an iframe, may be that's what causing the problem?
Looks like a bug to me. I've created a ticket to track it https://code.google.com/p/chromium/issues/detail?id=223146
To work around the issue, replace
window.location.href=$("#mhrefid_"+customerId).attr('href');
with
window.top.location.href=$("#mhrefid_"+customerId).attr('href');
That changes the location of the top-level page rather than the iframe, which works fine in Chrome.