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
You have something wrong here, too:

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}


Should be jQuery, not vanilla javascript.

Also, did you check what the value of that img_url is, just before adding it to the DOM?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I changed it into full JQM, but still not showing static map image in complaint.html page.
-How can i check the value of img_url before loading into DOM?
see this is the script now:


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";
$("#mapholder").html("<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 just want a simple task, but I dont know why I am unable to do:
I wanna load one or more functions at body onload.

see in the pic, if a user will click on the "Check Location" button it's showing the static map, but i want automatically getLocation(); function call on load the complaint.html page without clicking the button.

I test the button with my old javascript
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
How can i check the value of img_url before loading into DOM?
By alerting its value.
alert("img_url: " + img_url);
...or by using debug tools and looking into that variable.

var x = $('#demo').html();
This doesn't look right. What do you intend to do here?

I wanna load one or more functions at body onload.
Well, then do so. Possibilities are:

<body onload="func1();func2();func3();...">

function func1() {...code here...}
function func2() {...code here...}
function func3() {...code here...}


<body onload="func0();">
function func0() {func1();}
function func1() {...code here...; func2();}
function func2() {...code here...; func3();}
function func3() {...code here...}


and similar combinations, depending on which dependencies exist between the functions, if any.
btw: you already have such construction in the code above, so I wonder why you want getLocation(); to be called upon the load event of the DOM. Also, the code above doesn't contain a function definition of 'getLocation'.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

you already have such construction in the code above, so I wonder why you want getLocation(); to be called upon the load event of the DOM. Also, the code above doesn't contain a function definition of 'getLocation'.

Actually i was thinking to do separate this location script from above code.
Beacuse I tried much, and after all I decide I will call it at onload, therefore I asked to you, I also tried like this:

.
.
.
<body onload="onLoad();getLocation()">
.
.
.

It was working fine because at app initialization, it showed up permission for share location, but static map was not showing.
This is complete geolocation script:

<script>
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+"'>";
}

HTML
.
.
.
.

<p id="demo"></p><button onclick="getLocation()" type="button">Check Current Location</button>

<div id="mapholder" class="figure"></div>
.
.
.

Also I checked this script is not working when we are saving this coding into separate javascript file.
var x = $('#demo').html();

I used it to get the element id instead of it:
var x = document.getElementById("demo");
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
var x = document.getElementById("demo");
What? Now suddenly without jQuery, again?
What are you doing?

onload="onLoad();getLocation()"
You can't do this, because javascript works asynchronously. Chances are that you will attempt to use the geolocation plugin before the deviceready event has fired. That's why you need a dependency, as coded in your previous post.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
No, I didnt used Petra, this : var x = document.getElementById("demo");
I am saying I used this var x = $('#demo').html();

If I can't do this like that, then I must resolve errors in my old script:

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";
$("#mapholder").html("<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' } );
}
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes

var x = $('#demo').html();
This doesn't look right. What do you intend to do here?

I used to get the element id.
If it's wrong then what should be correct?


var x = $('#demo').attr('demo');

this one?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
This would be a good time to work your way through a basic jQuery tutorial, or better yet, the official jQuery documentation.
You should at least know what an expression like

$('#demo')

means, and which methods such element within jQuery has (like .text(), .html(), .attr(), .hide(), etc.)

In this case, you want to assign an element (not an element id!) to a variable. You don't want to set the element's content. So, it would be

var x = $('#demo');
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I am really sorry Petra, I am feeling shy really :(
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
When i used this script, online and offline events doesn't occur and also static map.

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');
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";
$("#mapholder").html("<img src='"+img_url+"'>");
alert("img_url: " + 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' } );
}

When I am removing code snippet of geolocation, the offline and online functions are working.
:( Also I used alert for image, nothing is showing.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, what is happening on

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {
$("#demo").html("Geolocation is not supported by this browser.");
}

?

Does it go into the true or false branch?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That's not an answer to the question into which branch it runs.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
which branch? You want to ask that If-else statement is going true or false right?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Right
Or it might not have been reached at all.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Ye it is not reaching to true or false.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Then where does it start to fail?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra, Can't I do like this:

function onLoad() {
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
document.addEventListener("getlocation",getLocation,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' } );
}
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' } );
}
function getLocation()
{
var x = $('#demo');
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";
$("#mapholder").html("<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;
}
}

Once also see my HTML:

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

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
What is the 'getlocation' event? Is it really fired or did you make it up?
(Edited)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I make it, can't we create user defined event?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Look, I don't want to disturb my this code:


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' } );
}
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' } );
}

because it's working quite well. Whenever I am trying to add another scripts in this code, the code is going disturb, the online and offline events are also not occuring.
So from yesterday i am searching another way to initialize the static map script automatically, when page initialize or load.
I have javascript which is working fine, but i am unable to find a way to call getLocation(); function, at page initialization.
Do you have any good suggestion for me, I shall be highly thankful to u Petra.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Listen I did something Petra.
To check DOM is loaded or not.

<script>
$( document ).ready(function() {
var x = $('p');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {

$("p").text("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";
$("#mapholder").html("<img src='"+img_url+"'>");
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("p").text("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("p").text("Location information is unavailable.");
break;
case error.TIMEOUT:
$("p").text("The request to get user location timed out");
break;
case error.UNKNOWN_ERROR:
$("p").text("An unknown error occurred.");
break;
}
}
});
</script>

</head>

<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">

<p>Not loaded yet.</p>
<div id="mapholder"></div>

</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>

This code is showing that "GeoLocation is not supported by browser".
But on computer. What can be cause?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Deviceready not fired yet, I think.
You should inspect the navigator object to see if something is missing there. Most likely, the plugin is not initiated yet.
Photo of Saba Rais

Saba Rais

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

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Hi, Petra
Have a Nice Day :)
How r you?
I tried this code snippet, and tried to build app, It's showing that "DOM NOT LOADED YET".

<script>
$( document ).ready(function() {
var x = $('p');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {

$("p").text("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";
$("#mapholder").html("<img src='"+img_url+"'>");
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("p").text("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("p").text("Location information is unavailable.");
break;
case error.TIMEOUT:
$("p").text("The request to get user location timed out");
break;
case error.UNKNOWN_ERROR:
$("p").text("An unknown error occurred.");
break;
}
}
});
</script>

</head>

<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">

<p>DOM Not loaded yet.</p>
<div id="mapholder"></div>

</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>

1. What can be cause?
2.I must use all my Initializing scripts in deviceready functions?
Thanks you Sir.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
But Petra when DOM will loaded this message will not show
Why not? It's hard-coded in your html.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Means? I really coudn't understood, friend plz help
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The message is hard-coded in your html, look:

<p>DOM Not loaded yet.</p>

So, this will be displayed.
Unless.....you programmatically remove that message, once the DOM is loaded. But you don't do that. You only replace it in case of an error, somewhere.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I got what u said. Ok then tell me why static map is not showing in the mobile?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Because something is wrong.
I can't debug your scripts. You must simply look where the script fails, inspect the values of variables and correct the errors.

The process is quite simple:
- find where the image is supposed to be set tio display
- at that point in your scripts, inspect the values of the variables involved
- if one or more are wrong, find the cause; if one or more are empty, find out which part of the scripts is not executed
- analyze these facts, draw conclusions about causes for error, then remove those causes.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Apart from Static map, also want to ask that:
Since I updated social sharing plugin, the sharing button not working.

.
.
.
<button onclick="window.plugins.socialsharing.share('https://build.phonegap.com/apps/1899291/install/AjQTHjhXsjgwNqEWsD8h', null, null, null)"><img src="images/sahre.png" width="72" height="70"><br>Invite Friends to download AmroClean</button>
.
.
.

This button not sharing text, I check the documents, same documents for old and new plugin, though.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Which of the nine examples in the docs should this code represent?
Hint: your parameters 2, 3 and 4 are all null.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
<button onclick="window.plugins.socialsharing.share(null, null, null, 'http://www.x-services.nl')">link only</button>

Parameter values are different okay I will check it, again, thank you.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, now you want to share a link with the old share() method. Fine.

1. You chose to work with jQM, so you should not use plain vanilla html and javascript. Use jQM:
<button id='sharebutton')>link only</button>
and
$('#sharebutton').click(function(){
window.plugins.socialsharing.share(null, null, null, 'http://www.x-services.nl');
});


2. For test purposes, see if the method share() is defined at all:
alert("plugintype=" + typeof window.plugins.socialsharing);
alert("sharetype=" + typeof window.plugins.socialsharingshare);
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Thank You Petra, you are the kindest person on the earth I wanna meet u once in a life :)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Onething more, AS we know that this thread is going too long with 500+ replies, I want to delete 1,2,3,4,5,6 pages of this post, Can I?
Only current page I want. Is it possible?
Or Can I delete this topic permanently ?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
As far as I know, the answers are no (3x).
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra,
I noticed small thing, the Post Complaint page is asking for reload, to show the static map.
on deviceready i give a reload function , so it's fetching current location, as soon as page is reloading, but when initially device is offline, showing offline.html, and I opened data page is going back on Post Complaint page but with no map.
How I can give the same reload page when a user come online after offline page.
see i used in deviceready:

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", {transition:'flip' });
}
else
{
location.reload();
}
}
function onOnline() {
// Only go back if user went to offline.html
if ($.mobile.activePage[0].baseURI.indexOf("offline.html") > -1) {
$.mobile.back();

How I can make Complaint.html page reload here?after back

}
}
function onOffline() {
$( ":mobile-pagecontainer" ).pagecontainer( "change", "offline.html", {transition:'flip' } );
}
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
I noticed small thing, the Post Complaint page is asking for reload, to show the static map.
Why? If that page is loaded, it should generate the image url and get the static map in one go. No reload should be necessary.

location.reload();
This is not jQM and will break the one page architecture. You can't do that.

In the past weeks, it has become obvious that you don't comprehend the mechanics of jQuery Mobile. So, I think you should make a decision now:
1. Stop the project, and learn jQuery and jQM, first. Buy a good book and start reading and practicing, OR
2. Remove everything jQuery-based in your app, and start again using vanilla javascript, only.

If you continue now the way you have done the past weeks, you will definitely run into way more "small things", that happen to be appbreakers.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Actually I am looking, what I want to look:
Means I just realized when page was not showing map, that it needs reload.
Stupid I am , I just googled, and found:

-This is fact that I really dont know jqm but i can say that it's more easy than javascript, yes I must learn.
-The static map is making me disturbed since beginning, I dont know where I am doing mistake, Petra, No i don't want to use javascript now.
-I want to jump now on my old post.
want to use all my scripts in one file, named index.js.
You please tell me the procedure of deviceready, and DOM loaded and when jqm will load, i have a big confusion in it.
Can't understand the correct order to add multiple jqm scripts in one file:


function onLoad
{
event listlisteners
}
//waiting for phonegap?
deviceready{
.
.
.
}
<script>1
function1
{
.
.
.
}
</script>
<script>2
.
.
function1()
{
.
.}
function2()
{
}
.
</script>


Please tell me that whats the correct sequence?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Define the named functions, first.
Then execute them, where the order is determined by:
- events occurring
- callback order
- thread scheduling by OS

Since the above empty code is only defining functions (except the call of the addEventlistener method), not executing them, the order doesn't matter.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Petra Sorry Sir, I was in a hurry thats y doing stupidity.
You are always right
I tried to merge two scripts like before.

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

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else
{
$("p").text("Geolocation is not supported by this browser.");
}
}
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:'flip' } );
}
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";
$("#mapholder").html("<img src='"+img_url+"'>");
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("p").text("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("p").text("Location information is unavailable.");
break;
case error.TIMEOUT:
$("p").text("The request to get user location timed out");
break;
case error.UNKNOWN_ERROR:
$("p").text("An unknown error occurred.");
break;
}
}

When I am putting the code snippet of static map in the <body>..</body>Element, It's showing well on the post complaint page, and when i m moving it into a separate javascript file with online and offline events (Above). It's not showing map.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
OK, so where does your script fail?
- Does it ever reach 'navigator.geolocation.getCurrentPosition()'?
- Does it ever reach 'var img_url = "http://maps...'?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
So, it doesn't reach 'navigator.geolocation.getCurrentPosition()'.

I hope you went back a step, then. And perhaps another step, and yet another step. Until you find the last "branch junction" in your code that was properly executed.
Then you start looking what happened between the last executed step and the first failing step.

The junction prior to 'navigator.geolocation.getCurrentPosition()' is
if (navigator.geolocation) {
Was the evaluation reached? If so, how does that evaluate?
If not, the previous junction is
document.addEventListener("deviceready", onDeviceReady, false); }
Is this command reached? If so, does your app enter the onDeviceReady function?

....etc...
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
My app already reached on deviceready function because, it's first condition executing successfully, e.g. if(navigator && navigator.network && navigator.network.connection && navigator.network.connection.type == Connection.NONE) {
$( ":mobile-pagecontainer" ).pagecontainer( "load", "offline.html", {transition:'flip' });
}

but i think it's unable to find mapholder. may be? it's not connecting to <body> I think ....
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
but i think it's unable to find mapholder. may be?
If that's your hypothesis, did you test it?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Before I checked It Petra, By an alert, alert("img_url: " + img_url); the value of DOM, but couldn't load.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
the value of DOM but couldn't load.
I have no idea what you mean by that.
What is "the value of DOM"?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I mean to say the value of variable I checked before loading into DOM. Nothing is showing.
I tried by many type, Petra why static map is not showing? :( :( :(
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Petra why static map is not showing?
If I knew, I would have told you by now. But I can't see your project and you're showing all snippets, of which I can't see whether or not it contains the error.

So, you said "Nothing is showing", in relation to the contents of the variable.
Now:
- what variable?
- at which point did you alert its contents?
- did alert("img_url: " + img_url); REALLY "show nothing"? No alert at all or just an empty string? The latter would be a miracle!
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
See Petra, I always used JQuery with Dreamweaver, It's platform for readymade webpages.. BTW I have five html pages app, e.g. index.html, invite.html,help.html,offline.html and complaint.html, I used jquery page for everypage with different pageid. So how can I will give reference of my javascripts to my jqm pages?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Read, understand and practice this:
https://demos.jquerymobile.com/1.2.0/...
(and all documentation from the left menu bar)
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I read the link u shared.
Every menu i read but only at one place they showed up , that what is the order of scripts we can keep in header section.
and second the pageinit i read, but i think i should not use it? It is not useful for me?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
The pagenit event is deprecated and should not be used as of jQM1.4
See https://api.jquerymobile.com/pageinit/

The jQuery files should be linked in this order:
https://jquerymobile.com/download/
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
I read it already the download page, even I download the zip files for jquery 1.4.5 rom here.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
This is the header section of Complaint.html page:

<!doctype html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="onlineoffline.js" type="text/javascript"></script>
<script src="enabledisable.js" type="text/javascript"></script>
<script src="validateform.js" type="text/javascript"></script>
<link href="jquery-mobile/jquery.mobile.theme-1.4.5.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
</head>

I used this script at the bottom of body element.:

<script>
$(document).ready(function() {
//////////////////////
var x = $('p');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else {

$("p").text("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";
$("#mapholder").html("<img src='"+img_url+"'>");
alert("img_url: " + img_url);
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
$("p").text("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
$("p").text("Location information is unavailable.");
break;
case error.TIMEOUT:
$("p").text("The request to get user location timed out");
break;
case error.UNKNOWN_ERROR:
$("p").text("An unknown error occurred.");
break;
}
}
});
</script>

It's showing image on PC and when i building app with pgb, after install the apk file it's now showing picture, just showing picture block.
Yes but i used alert to check it, it's showing complete image url in alert. Now
ALL THE SCRIPTS ARE WORKING FINE EVEN ONLINE AND OFFLINE TOO, BUT STATIC IMAGE IS NOT LOADING.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Why did you combine

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

and

<script src="jquery-mobile/jquery-1.11.1.min.js" type="text/javascript"></script>
?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
actually i was confuse in it too, which version of jquery is compatible with jquery mobile 1.4.5
Now I got it, i should remove the oldest version
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Now Petra, Problem is that:
-Static map is showing but after few seconds, with alert i added to check the value of "img_url" value before loading to DOM.
Near about 20 seconds,alert and quick image is showing.
see:
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Good.
So, the image is showing briefly, then disappears again?
If that is the case, then you should look for what is happening after creating the html for the image. Are you reloading the page, perhaps? Or are you emtying the $('#mapholder') after that?
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
No it's not disappearing after load.
-Whenever page is loading the image is showing after 20 seconds. and if we go back from this page and come again on this page again it's taking 20 seconds.
-I didnt used reload functions and other.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Did you try and find out what is taking so long? Is it the getCurrentPosition call, or is it loading the graphic?
If the former, use the options (third parameter) of getCurrentPosition to use a cached position and to set a timeout for test purposes.

In another recent thread, a developer also mentioned slow responses from the plugin. If it is indeed the getCurrentPosition which is slow (test it, first!), then you might want to see what an older version of the plugin does.
Photo of Saba Rais

Saba Rais

  • 724 Posts
  • 3 Reply Likes
Ok Petra, again a warm thanks to you :) actually can't pay this thanks by a small word.