- 724 Posts
- 3 Reply Likes
Posted 4 years ago
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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?
- 724 Posts
- 3 Reply Likes
-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
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'.- 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");
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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.
- 724 Posts
- 3 Reply Likes
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' } );
}
- 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?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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');- 724 Posts
- 3 Reply Likes
- 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');
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.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- 724 Posts
- 3 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Or it might not have been reached at all.
- 724 Posts
- 3 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- 724 Posts
- 3 Reply Likes
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>
.
.
.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- 724 Posts
- 3 Reply Likes
- 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' } );
}
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.
- 724 Posts
- 3 Reply Likes
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?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
You should inspect the navigator object to see if something is missing there. Most likely, the plugin is not initiated yet.
- 724 Posts
- 3 Reply Likes
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.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
But Petra when DOM will loaded this message will not showWhy not? It's hard-coded in your html.
- 724 Posts
- 3 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
<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.
- 724 Posts
- 3 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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.
- 724 Posts
- 3 Reply Likes
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.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Hint: your parameters 2, 3 and 4 are all null.
- 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.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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);- 724 Posts
- 3 Reply Likes
- 724 Posts
- 3 Reply Likes
Only current page I want. Is it possible?
Or Can I delete this topic permanently ?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- 724 Posts
- 3 Reply Likes
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' } );
}
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.
- 724 Posts
- 3 Reply Likes
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?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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.
- 724 Posts
- 3 Reply Likes
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.Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- Does it ever reach 'navigator.geolocation.getCurrentPosition()'?
- Does it ever reach 'var img_url = "http://maps...'?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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...
- 724 Posts
- 3 Reply Likes
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 ....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?
- 724 Posts
- 3 Reply Likes
alert("img_url: " + img_url); the value of DOM, but couldn't load.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"?
- 724 Posts
- 3 Reply Likes
I tried by many type, Petra why static map is not showing? :( :( :(
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!- 724 Posts
- 3 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
https://demos.jquerymobile.com/1.2.0/...
(and all documentation from the left menu bar)
- 724 Posts
- 3 Reply Likes
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?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
See https://api.jquerymobile.com/pageinit/
The jQuery files should be linked in this order:
https://jquerymobile.com/download/
- 724 Posts
- 3 Reply Likes
- 724 Posts
- 3 Reply Likes
<!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.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
<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>
?
- 724 Posts
- 3 Reply Likes
Now I got it, i should remove the oldest version
- 724 Posts
- 3 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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?
- 724 Posts
- 3 Reply Likes
-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.
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
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.
- 724 Posts
- 3 Reply Likes
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers
-
Plugins
- 1283 Conversations
- 38 Followers


