How to make dynamic apps using Phonegap?

  • 2
  • Problem
  • Updated 6 months ago
Hi there, i am a student creating an app. But having some problems, i still cudn't found that what are the plugins and how we can use i used many from list but all they are not responding. Phonegap Team please help me i just want to create an app with camera(to capture images) and Call(to a particular number) how i can use them? I am using build.phonegap.com using dreamweaver. Thanks in advance. I also attached the screen shot of my app
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

Posted 4 years ago

  • 2
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If you want to use jQM and you have no reasons to use legacy, then yes, take the latest version.

Yes, you can use it with PGB cli-5.2.0 but I would try cli-6.1.0 due to the latest iOS security alert.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
To update at PGB, that's sufficient to add this preference into CONFIG.XML?
<preference name="phonegap-version" value="cli-6.1.0" />
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thank You
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
i tried to change the code with latest JQM i hope it will work?
function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {

}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
//
function onOffline() {
$.mobile.pageContainer.pagecontainer('change', 'offline.html', {
transition: 'flow',
reload : true
});
}
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra Sir, Is it your Job/Duty to answer all time here to all people? Or It is your wish?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This can go wrong.

First, you set eventListeners for online and offline
Then you set an eventlistener for deviceready, in which you define the callback functions for online/offline.

So, in the timeframe between the DOM's load event and the deviceready event, the device could change its connection status, and your app would be calling an undefined function.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I thought much,
-I set eventListeners for online and offline.
-In deviceready can we use same call back like offline eventListener?
LIKE:

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {
$.mobile.pageContainer.pagecontainer('change', 'offline.html', {
transition: 'flow',
reload : true
});
}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
//
function onOffline() {
$.mobile.pageContainer.pagecontainer('change', 'offline.html', {
transition: 'flow',
reload : true
});
}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes. That looks pretty good.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Good Morning Petra Sir,
I was building app, but when i changed PHONEGAP CLI Version, Android build failed.
see:

my Config.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode = "10"
version = "1.0.0" >

<!-- versionCode is optional and Android only -->

<name>AmroClean</name>

<description>
This app let you Clean your City within no time, Keep your City Clean and Green, Regards: Nagar Palika Parishad
</description>

<author href="https://build.phonegap.com" email="support@phonegap.com">
Saba Rais
</author>
<preference name="phonegap-version" value="cli-6.1.0" />

<!-- SPLASH SCREENS-->
<preference name="FadeSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="SplashMaintainAspectRatio" value="false"/>
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screens/android/screen-ldpi-portrait.png" density="ldpi" qualifier="port-ldpi"/>
<splash src="res/screens/android/screen-mdpi-portrait.png" density="mdpi" qualifier="port-mdpi"/>
<splash src="res/screens/android/screen-hdpi-portrait.png" density="hdpi" qualifier="port-hdpi"/>
<splash src="res/screens/android/screen-xhdpi-portrait.png" density="xhdpi" qualifier="port-xhdpi"/>
<splash src="res/screens/android/screen-xxhdpi-portrait.png" density="xxhdpi" qualifier="port-xxhdpi"/>
<splash src="res/screens/android/screen-xxxhdpi-portrait.png" density="xxxhdpi" qualifier="port-xxxhdpi"/>
<splash src="res/screens/android/screen-hdpi-land.png" density="hdpi" qualifier="land-hdpi"/>
<splash src="res/screens/android/screen-ldpi-land.png" density="ldpi" qualifier="land-ldpi" />
<splash src="res/screens/android/screen-mdpi-land.png" density="mdpi" qualifier="land-mdpi"/>
<splash src="res/screens/android/screen-xhdpi-land.png" density="xhdpi" qualifier="land-xhdpi"/>
<splash src="res/screens/android/screen-xxhdpi-land.png" density="xxhdpi" qualifier="land-xxhdpi"/>
<splash src="res/screens/android/screen-xxxhdpi-land.png" density="xxxhdpi" qualifier="land-xxxhdpi"/>
</platform>
<platform name="ios">
<!-- images are determined by width and height. The following are supported -->
<splash src="res/screens/ios/screen-iphone-portrait.png" width="320" height="480"/>
<splash src="res/screens/ios/screen-iphone-portrait-2x.png" width="640" height="960"/>
<splash src="res/screens/ios/screen-iphone-land.png" width="480" height="320"/>
<splash src="res/screens/ios/screen-iphone-land-2x.png" width="960" height="640"/>
<splash src="res/screens/ios/screen-ipad-portrait.png" width="768" height="1024"/>
<splash src="res/screens/ios/screen-ipad-portrait-2x.png" width="1536" height="2048"/>
<splash src="res/screens/ios/screen-ipad-land.png" width="1024" height="768"/>
<splash src="res/screens/ios/screen-ipad-land-2x.png" width="2048" height="1536"/>
<splash src="res/screens/ios/screen-iphone-portrait-568h-2x.png" width="640" height="1136"/>
<splash src="res/screens/ios/screen-iphone-land-568h-2x.png" width="1136" height="640"/>
<splash src="res/screens/ios/screen-iphone-portrait-667h.png" width="750" height="1334"/>
<splash src="res/screens/ios/screen-iphone-land-667h.png" width="1334" height="750"/>
<splash src="res/screens/ios/screen-iphone-portrait-736h" width="1242" height="2208"/>
<splash src="res/screens/ios/screen-iphone-land-736h.png" width="2208" height="1242"/>
</platform>
<platform name="windows">
<!-- images are determined by width and height. The following are supported -->
<splash src="res/screens/windows/splashscreen.png" width="620" height="300"/>
<splash src="res/screens/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>
<platform name="wp8">
<!-- images are determined by width and height. The following are supported -->
<splash src="res/screens/wp8/SplashScreenImage.jpg" width="768" height="1280"/>
<splash src="res/screens/wp8/SplashScreenImageland.jpg" width="1280" height="768"/>
</platform>

<!-- ICONS -->
<platform name="android">
<icon src="res/icons/android/icon-36-ldpi.png" density="ldpi"/>
<icon src="res/icons/android/icon-48-mdpi.png" density="mdpi"/>
<icon src="res/icons/android/icon-72-hdpi.png" density="hdpi"/>
<icon src="res/icons/android/icon-96-xhdpi.png" density="xhdpi"/>
<icon src="res/icons/android/icon-144-xxhdpi.png" density="xxhdpi"/>
<icon src="res/icons/android/icon-192-xxxhdpi.png" density="xxhdpi"/>
</platform>
<platform name="ios">
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icons/ios/icon-60-3x.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon-60.png" width="60" height="60" />
<icon src="res/icons/ios/icon-60-2x.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icons/ios/icon-76.png" width="76" height="76" />
<icon src="res/icons/ios/icon-76-2x.png" width="152" height="152" />
<!-- iOS 6.1 -->
<!-- Spotlight Icon -->
<icon src="res/icons/ios/icon-40.png" width="40" height="40" />
<icon src="res/icons/ios/icon-40-2x.png" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="res/icons/ios/icon.png" width="57" height="57" />
<icon src="res/icons/ios/icon-2x.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icons/ios/icon-72.png" width="72" height="72" />
<icon src="res/icons/ios/icon-72-2x.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-small.png" width="29" height="29" />
<icon src="res/icons/ios/icon-small2x.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icons/ios/icon-50.png" width="50" height="50" />
<icon src="res/icons/ios/icon-50-2x.png" width="100" height="100" />
</platform>
<platform name="wp8">
<icon src="res/icons/wp/ApplicationIcon.png" width="99" height="99" />
<!-- tile image -->
<icon src="res/icons/wp/Background.png" width="159" height="159" />
</platform>
<platform name="windows">
<icon src="res/icons/windows/logo.png" width="150" height="150" />
<icon src="res/icons/windows/smalllogo.png" width="30" height="30" />
<icon src="res/icons/windows/storelogo.png" width="50" height="50" />
</platform>

<content src="index.html"/>
<access origin="*"/>
<access origin="*.googleapis.com" subdomains="true"/>
<plugin name="cordova-plugin-whitelist"/>
<plugin name="cordova-plugin-device"/>
<plugin name="call-number"/>
<access origin="http://phonegap.com" subdomains="true" />
<preference name="permissions" value="none"/>
<preference name="StatusBarOverlaysWebView" value="true" />
<plugin name="cordova-plugin-socialsharing"/>
<plugin name="cordova-plugin-geolocation"/>
<plugin name="cordova-plugin-file-transfer"/>
<plugin name="cordova-plugin-camera"/>
<plugin name="cordova-plugin-device-motion"/>
<plugin name="cordova-plugin-network-information"/>
<plugin name="cordova-plugin-splashscreen"/>
<allow-navigation href="*" />
<allow-intent href="geo:*" />
<allow-intent href="*" />
<access origin="tel:*" launch-external="yes" />
</widget>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, what error message does the build log provide?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

Build Date: 2016-05-16 05:17:17 +0000
--------------------------------------------------------------------------------
PLUGIN OUTPUT
--------------------------------------------------------------------------------
Fetching plugin "cordova-plugin-whitelist" via npm
Installing "cordova-plugin-whitelist" at "1.2.2" for android

This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
Fetching plugin "cordova-plugin-device" via npm
Installing "cordova-plugin-device" at "1.1.2" for android
Fetching plugin "call-number" via npm
Installing "mx.ferreyra.callnumber" at "0.0.2" for android
Fetching plugin "cordova-plugin-socialsharing" via npm
Installing "cordova-plugin-socialsharing" at "4.3.81" for android
Fetching plugin "cordova-plugin-geolocation" via npm
Installing "cordova-plugin-geolocation" at "2.2.0" for android
Fetching plugin "cordova-plugin-compat" via npm
Installing "cordova-plugin-compat" at "1.0.0" for android
Fetching plugin "cordova-plugin-file-transfer" via npm
Installing "cordova-plugin-file-transfer" at "1.5.1" for android
Fetching plugin "cordova-plugin-file" via npm
Installing "cordova-plugin-file" at "4.2.0" for android
Dependent plugin "cordova-plugin-compat" already installed on android.

The Android Persistent storage location now defaults to "Internal". Please check this plugins README to see if you application needs any changes in its config.xml.

If this is a new application no changes are required.

If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:

"<preference name="AndroidPersistentFileLocation" value="Compatibility" />"

to config.xml in order for the application to find previously stored files.
Fetching plugin "cordova-plugin-camera" via npm
Installing "cordova-plugin-camera" at "2.2.0" for android
Dependent plugin "cordova-plugin-compat" already installed on android.
Fetching plugin "cordova-plugin-device-motion" via npm
Installing "cordova-plugin-device-motion" at "1.2.1" for android
Fetching plugin "cordova-plugin-network-information" via npm
Installing "cordova-plugin-network-information" at "1.2.1" for android
Fetching plugin "cordova-plugin-splashscreen" via npm
Installing "cordova-plugin-splashscreen" at "3.2.2" for android
--------------------------------------------------------------------------------
COMPILE OUTPUT
--------------------------------------------------------------------------------
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugProguardFiles
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugRenderscript
:CordovaLib:generateDebugResValues
:CordovaLib:generateDebugResources
:CordovaLib:packageDebugResources
:CordovaLib:compileDebugAidl
:CordovaLib:generateDebugBuildConfig
:CordovaLib:generateDebugAssets UP-TO-DATE
:CordovaLib:mergeDebugAssets
:CordovaLib:processDebugManifest
:CordovaLib:processDebugResources
:CordovaLib:generateDebugSources
:CordovaLib:compileDebugJavaWithJavacNote: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
:CordovaLib:mergeDebugJniLibFolders
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
:CordovaLib:bundleDebug
:prepareProjectCordovaLibUnspecifiedDebugLibrary
:prepareDebugDependencies
:compileDebugAidl
:compileDebugRenderscript
:generateDebugBuildConfig
:generateDebugAssets UP-TO-DATE
:mergeDebugAssets
:generateDebugResValues
:generateDebugResources
:mergeDebugResources
:processDebugManifest
:processDebugResources
:generateDebugSources
:compileDebugJavaWithJavac/project/src/nl/xservices/plugins/SocialSharing.java:19: error: package org.apache.http.util does not exist
import org.apache.http.util.ByteArrayBuffer;
^
/project/src/nl/xservices/plugins/SocialSharing.java:420: error: cannot find symbol
ByteArrayBuffer baf = new ByteArrayBuffer(5000);
^
symbol: class ByteArrayBuffer
location: class SocialSharing
/project/src/nl/xservices/plugins/SocialSharing.java:420: error: cannot find symbol
ByteArrayBuffer baf = new ByteArrayBuffer(5000);
^
symbol: class ByteArrayBuffer
location: class SocialSharing
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
3 errors
FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 5.346 secs
undefined
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The problem is apparently the socialsharing plugin.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
See from beginning i was totally unknown from PGB, But I tried i dont know u saw/recognized or not. But i know Myself how much I learned. I know all are not students here like me, also it's not a forum of students. It's forum of developers, I dont think that there is something that human can't do...... from this thinking i jumped into this forum without having IT skills, But i saw little improvement in me. I think I can do, definitely i can do, with the help of God and u.
If i unknown from things which i am missing just give me little hint, i can study and can improve my self. This thread is going too long i know, sometime feel shy. But now it's my compulsion to complete it. Thank you so much for your patience, you are such good European, a good human, a good ITian. (y)
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
No, just a bot.

But glad to hear you're confident.
Still a long way to go, though!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Sure you are a bot?
see i can prove that you are not.....
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
OK, I'm trying to be a bot, but I haven't finished the Bot Classes completely, yet.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I know that here at this forum , you show your image like a bot, straight forward, give relevant information about problem, not too talkative nor silent. Like a machine your behavior, because your work is like your worship? I think you do not follow any religion?
You decided to behave like an bot,
-coz people can ask personal questions, which can make time waste , Like i do sometime.
-It can be change into fb chat, if champions will behave like humans and others.
Sorry If I said wrong, Now I will not ask any non-relevant question. Now I am also a bot.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
.
.
.

I have onLoad function here, which I must call in complaint.html right?
but
i have already one function calling in complaint.html e.g.
<body onload="getLocation">
So how i call it here?can we call two or more functions at onload? and if yes, then how?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
onload="getLocation"
is not correct javascript. It should be
onload="getLocation();"

Also, you can't get a location when deviceready hasn't fired. So, you must first call your onLoad function.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Oops i typed wrong, sorry yes it is onload="getLocation();"
Ok I will call first onLoad(); but then when I will call getLocation(); method?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
In your onDeviceready callback function
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, these are my two scripts one for offline/online states, and second for getlocation:
onlineoffline.js

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {
$.mobile.pageContainer.pagecontainer('change', 'offline.html', {
transition: 'flow',
reload : true
});
}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
//
function onOffline() {
$.mobile.pageContainer.pagecontainer('change', 'offline.html', {
transition: 'flow',
reload : true
});
}



getlocation.js


<script>

document.addEventListener("deviceready", onDeviceReady, false);
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=18&size=220x220&sensor=false&markers="+latlon+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
enableHighAccuracy: true;

switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>

Now in complaint.html
<body onload="onLoad();">
.
.
.

but when i tried like this the offline page is not showing........i dont know that where my script going fail.. replaced also getLocation() function with onDeviceready() in getlocation.js

but neither offline/online script is working nor static maps.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Why do you add the eventListener for deviceready twice?

2. Does the script reach and execute the onOffline function at all?

but when i tried like this
What exactly did you try? Initial offline, or switch to offline after initial online?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Nothing is happening, everytype i checked initial offline, and also switched online to offline and offline to online. nothing is happening offilne nowhere showing
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Yes
2. Then you need to make sure. For instance, place an alert inside the function and see if it gets displayed.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I posted both scripts, what can be wrong?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Can't see. You need to debug step-by-step.
First, check if the deviceready event is fired at all.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Ok Petra, let me do thanks alot, thanks to always being here
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,
after a lots of trials, and headache I wanna ask that this script can work?

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {

$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flow' } );

}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
//
function onOffline() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flow' } );
}

If we didn't used JQM Page Container Widget in our two pages e.g. Offline.html and complaint.html?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It all looks correct. All you need to do is initialize the pagecontainer in the index.html (and only there).
This thread might clear things up:
http://stackoverflow.com/questions/24...
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I tried in many ways:
I Think I am having problem of handling events:
but I tried like this too, but no response:
Today Full day I looked up for solution, but I coudln't found :(

In this way too:

var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
deviceReadyDeferred.resolve();
}
$(document).one("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

function doWhenBothFrameworksLoaded() {
if(navigator.network.connection.type == Connection.NONE) {

$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flow' } );
}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}

function onOffline() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flow' } );
}


But the offline.html page can't see anywhere at any state.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This is all going the wrong way. You don't need the mobileinit event or anything deferred.
Your previous version looked just fine. Did you debug that? Did you check if deviceready was fired, and if not, where your scripts started to fail?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
-Syntax have no error.
-I checked deviceready was fired or not by this alert(selected in code below): but this msg didn't show up.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Do you, by any chance, have that piece of javascript in the HEAD section of your complaint.html document?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
No, I didn't tried yet. let me
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Still no effect, onething i another checked I removed jquery mobile and add some simple alert that you are online and you are offline, so it;s working fine. Only JQM not working.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I think you may not have comprehended yet how jQM works.
It's a one-page architecture (even if you have more than one html document). That means that everything is loaded in the first page. Consecutive pages are loaded using ajax (automatically, no need to program that), parsed and the body part is inserted in the DOM.

So, everything in the HEAD of all pages beyond index.html is ignored.

You must have jQM in the whole app, not just in one or the other page. The functions must be defined in your javascript file, which is linked in index.html. Functions can be called from other pages, but the deviceready has already taken place in the index.html and remains 'active'.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petraaaaaaaaa whooooooooooooooooooooo It's done now Alhumdulillah :)
But little problem facing, when i am launching app offline initially, It's showing "Complaint.html" page and within no time with a transaction offline.html page is appearing, and when I am doing back by my device. It's showing "Complaint.html" page again. Even device is offline. The app is working fine when it's online and when we are doing data off it's showing offline.html page, and when opening data it's showing complaint.html page. Here It's working fine. But initially when i am opening post complaint option on going back it's showing complaint.html page.
As far as i am thinking i should use load instead of Change in deviceready function,Am I right? And reload should i keep it true or false?

.
.
.
function onDeviceReady() {
if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flow' } );
}
}
.
.
.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, you ask yourself first: what do you want to happen if the device is offline and the user hits the back button while on the offline.html page?

Then you need to handle the 'backbutton' event and in the callback function of that eventHandler, you code whatever you want to happen in such case.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Okay :) Champ!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thank You very much Petra, thanks to always here to guide me and help me and suggest me what is best for me :)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, You also see coding in your dream daily? Good Night sorry I forgot i am also bot.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra from yesterday since I used JQM my windows app not building.
Is there signing keys required for windows 10?
This is Log file:
Build Date: 2016-05-19 04:45:43 +0000
--------------------------------------------------------------------------------
PLUGIN OUTPUT
--------------------------------------------------------------------------------
Fetching plugin "cordova-plugin-whitelist" via npm
Installing "cordova-plugin-whitelist" at "1.2.2" for windows
Fetching plugin "cordova-plugin-device" via npm
Installing "cordova-plugin-device" at "1.1.2" for windows
Fetching plugin "call-number" via npm
Installing "mx.ferreyra.callnumber" at "0.0.2" for windows
Fetching plugin "cordova-plugin-x-socialsharing" via npm
Installing "cordova-plugin-x-socialsharing" at "5.0.12" for windows
Fetching plugin "cordova-plugin-geolocation" via npm
Installing "cordova-plugin-geolocation" at "2.2.0" for windows
Fetching plugin "cordova-plugin-compat" via npm
Installing "cordova-plugin-compat" at "1.0.0" for windows
Fetching plugin "cordova-plugin-file-transfer" via npm
Installing "cordova-plugin-file-transfer" at "1.5.1" for windows
Fetching plugin "cordova-plugin-file" via npm
Installing "cordova-plugin-file" at "4.2.0" for windows
Dependent plugin "cordova-plugin-compat" already installed on windows.

The Android Persistent storage location now defaults to "Internal". Please check this plugins README to see if you application needs any changes in its config.xml.

If this is a new application no changes are required.

If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:

""

to config.xml in order for the application to find previously stored files.
Fetching plugin "cordova-plugin-camera" via npm
Installing "cordova-plugin-camera" at "2.2.0" for windows
Dependent plugin "cordova-plugin-compat" already installed on windows.
Fetching plugin "cordova-plugin-device-motion" via npm
Installing "cordova-plugin-device-motion" at "1.2.1" for windows
Fetching plugin "cordova-plugin-network-information" via npm
Installing "cordova-plugin-network-information" at "1.2.1" for windows
Fetching plugin "cordova-plugin-splashscreen" via npm
Installing "cordova-plugin-splashscreen" at "3.2.2" for windows
Building project: C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj
Configuration : debug
Platform : x86
MakePRI : warning 0xdef00522: Resources found for language(s) 'nl' but no resources found for default language(s): 'en-US'. Change the default language or qualify resources with the default language. http://go.microsoft.com/fwlink/?LinkI... [C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj]
MakePRI : warning 0xdef01051: No default or neutral resource given for 'Files/plugins/cordova-plugin-x-socialsharing/src/android/xservices/plugins/SocialSharing.java'. The application may throw an exception for certain user configurations when retrieving the resources. [C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj]
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\AppxPackage\Microsoft.AppXPackage.Targets(1854,5): warning APPX0105: Cannot import the key file 'CordovaApp_TemporaryKey.pfx'. The key file may be password protected. To correct this, try to import the certificate manually into the current user's personal certificate store. [C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj]
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\AppxPackage\Microsoft.AppXPackage.Targets(1854,5): warning APPX0107: The certificate specified is not valid for signing. For more information about valid certificates, see http://go.microsoft.com/fwlink/?LinkI.... [C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj]
CordovaApp.Windows10 -> C:\cygwin\tmp\gimlet\1899291\project\AppPackages\CordovaApp.Windows10_1.0.0.0_x86_debug_Test\CordovaApp.Windows10_1.0.0.0_x86_debug.appx
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\AppxPackage\Microsoft.AppXPackage.Targets(2465,5): error APPX0105: Cannot import the key file 'CordovaApp_TemporaryKey.pfx'. The key file may be password protected. To correct this, try to import the certificate manually into the current user's personal certificate store. [C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj]
C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\AppxPackage\Microsoft.AppXPackage.Targets(2465,5): error APPX0107: The certificate specified is not valid for signing. For more information about valid certificates, see http://go.microsoft.com/fwlink/?LinkI.... [C:\cygwin\tmp\gimlet\1899291\project\CordovaApp.Windows10.jsproj]
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
APPX0105: Cannot import the key file 'CordovaApp_TemporaryKey.pfx'.

This has been reported in several recent threads, here. I have not seen a root cause or solution, yet.
Did you read and apply the latest Blog post, and browse through similar problems on this forum?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
No, I didn't read anywhere yet, actually the windiows app often failed to build, and when i rebuild, it's build successfully, but when i tried last time many time to rebuild, but it's not building. Let me see solutions on this forum.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I resolved :) Thanks
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
How did you do that?
(This would be interesting for others)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

<!-- Windows 10 (default): -->
<preference name="windows-appx-target" value="uap" />
<!-- Windows 8.1: -->
<preference name="windows-appx-target" value="8.1-win" />
<!-- Windows Phone 8.1: -->
<preference name="windows-appx-target" value="8.1-phone" />
<preference name="windows-arch" value="anycpu" />

Just to add these lines into my config.xml
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra I mixed two scripts together static map and online offline states, is it correct?
function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {
$( ":mobile-pagecontainer").pagecontainer( "load", "offline.html", { reload: false, transition:'flip' } );
}
var x = document.getElementById("demo");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {

x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=18&size=220x220&sensor=false&markers="+latlon+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
enableHighAccuracy: true;

switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
//
function onOffline() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flip' } );
}

Html:



<body onload="onLoad()";>
<p id="demo"></p>

<div id="mapholder" class="figure"></div>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Some feedback:

1. You have:
var x = document.getElementById("demo");
[...]
x.innerHTML = "Geolocation is not supported by this browser.";


But hey, you are using jQuery, so you should stick with that and not mix with plain vanilla javascript.
In jQuery, this would be:

$("#demo").html("Geolocation is not supported by this browser.");

2. enableHighAccuracy: true;
This has nothing to do with the error callback. It is something your should do when getting the position. It is one of the options parameters to set.

3. In the onerror callback, also use jQuery to set the message. Not vanilla javascript.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thank You :)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {
$( ":mobile-pagecontainer").pagecontainer( "load", "offline.html", { reload: false, transition:'flip' } );
}
var x = $('#demo').html();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {

$("#demo").html("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;

var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=18&size=220x220&sensor=false&markers="+latlon+"&size:mid%7Ccolor:0xff0000%7Clabel:%7Camroha,+uttar+pradesh&visual_refresh=true";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("#demo").html("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("#demo").html("Location information is unavailable.");
break;
case error.TIMEOUT:
$("#demo").html("The request to get user location timed out");
break;
case error.UNKNOWN_ERROR:
$("#demo").html("An unknown error occurred.");
break;
}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();
}
}
//
function onOffline() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", { reload: true, transition:'flip' } );
}

I changed it to JQM, but still static map not showing. what can be cause?