Solved

JQUERY Mobile and Geolocation of user

Posted on 2013-01-18
18
662 Views
Last Modified: 2013-01-19
Hello everyone,

I'm trying to write a script (MyDemo1MINE.asp) using JQuery Mobile, that shows a form with a single drop down menu and a submit (Go) button;

<input type="button" name="Submit" value="GO" onclick="return OnClickGo();">

The first option of the dropdown is;

<option value="CURLOC">Current Location</option> with the remaining dropdown options being geographical areas.

If the first option is selected, CURLOC then I want this to pass the "CURLOC", longitude and Laitutde to my second, MyDemo2MINE.asp script, which generates the output to be displayed back in the <div id=ShowResults></div> of my first script MyDemo2MINE.asp.

If i choose the geographical area everything works fine, but when I choose, CURLOC for the current geographical location of the user I keep getting errors (from firebug) like;

ReferenceError: longitude is not defined

The problem is probably obvious, but I can't seem to see it?!

(Javascript below)

Regards

JamWales


Javacript
=======

    <script type="text/javascript">
            
            function OnClickGo() {
            
                  var Submit = false;
                  var name = $("#name").val();
                  
                  if (name == 'CURLOC' ) {
                  navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
                  $("#ShowResults").load('/freelancer/MyDemo2MINE.asp', {"name":name, "lon":longitude, "lat":latitude} );
                  }
                  else {
                  $("#ShowResults").load('/freelancer/MyDemo2MINE.asp', {"name":name} );
                  }
                  
                  return false;
            }      

   
   
               function handle_errors(error)  
        {  
            switch(error.code)  
            {  
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");  
                break;  
                case error.POSITION_UNAVAILABLE: alert("could not detect current position");  
                break;  
                case error.TIMEOUT: alert("retrieving position timed out");  
                break;  
                default: alert("unknown error");  
                break;  
            }  
        }  
            
        function handle_geolocation_query(position){
            
      var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
            
        }  
            
   </script>
0
Comment
Question by:Jamie
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 8
18 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38792765
replace :
 function handle_geolocation_query(position){ 
            
      var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
            
        }

Open in new window

by :
 function handle_geolocation_query(position){ 
            
      window["latitude"] = position.coords.latitude;
        window["longitude"] = position.coords.longitude;
        window["accuracy"] = position.coords.accuracy;
            
        }

Open in new window

0
 

Author Comment

by:Jamie
ID: 38793902
Hi leakim971,

Thank you for your reply.

I'm made the change you suggested, but I'm still getting;

"ReferenceError: longitude is not defined"

Kind Regards

JamWales
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38794003
do it leave replacing :
$("#ShowResults").load('/freelancer/MyDemo2MINE.asp', {"name":name, "lon":longitude, "lat":latitude} );

Open in new window

by :
$("#ShowResults").load('/freelancer/MyDemo2MINE.asp', {"name":name, "lon":-95.677068, "lat":37.0625} );

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Jamie
ID: 38794033
Hi leakim971,

The Longitude and Latitude is only generated once the user presses the submit button, so cannot be hard coded into the .load command, it has to be passed to the .load command via variables?

Kind Regards

JamWales
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38794045
so if hardcoded the message leave?
I need to be sure it leave because you did not provide the line the error come from
0
 

Author Comment

by:Jamie
ID: 38794459
Hi leakim971,

Hmmm, it sends all 3 parameters, but the receiving script is only capturing the AreaID not the longitude or latitude for some reason - will have to investigate as totally confused now!

Regards

Jamie
0
 

Author Comment

by:Jamie
ID: 38794589
Hi leakim971,

I'm making progress, the line that seems to work is;

$('#ShowResults').load('/freelancer/MyDemo2MINE.asp?name=' + name+ '&lon=' + -95.677068 + '&lat=' + 37.0625);

instead of

$("#ShowResults").load('/freelancer/MyDemo2MINE.asp', {"name":name, "lon":-95.677068, "lat":37.0625} );

However, if I substitute longitue for 95.677068 I get the same error as previously - "ReferenceError: longitude is not defined"

Also, another problem I have now is - the second script generates the following output which is put into ShowResults;

Find_Shows_GEO.asp?AreaID=CURLOC&AreaLAT=37.0625&AreaLON=-95.677068

But I then use;

window.location.href = $('#ShowResults').html();

But this takes me to;

Find_Shows_GEO.asp?name=CURLOC&amp;AreaLAT=37.0625&amp;AreaLON=-95.677068

it's replaced all the & with &amp; i.e.

Find_Shows_GEO.asp?name=CURLOC&AreaLAT=37.0625&AreaLON=-95.677068

So I can't use querystring to decode the url string?!


Regards

JamWales
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38795397
to debug use this and let me know what you get in the alert box:
function handle_geolocation_query(position){ 
            alert( JSON.stringify( position.coords ) );
      var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
            
        }  

Open in new window

0
 

Author Comment

by:Jamie
ID: 38795749
Hi leakim971,

Many thanks for the above debug code, it works and I've now got the longitude and latitude being passed and captured!

The only problem I have remaining;

As I then use;

window.location.href = $('#ShowResults').html();

But this takes me to;

Find_Shows_GEO.asp?name=CURLOC&amp;AreaLAT=37.0625&amp;AreaLON=-95.677068

it's replaced all the & with &amp; i.e.

Find_Shows_GEO.asp?name=CURLOC&AreaLAT=37.0625&AreaLON=-95.677068

Is there any way of correcting this?

Regards

Jamie
0
 

Author Comment

by:Jamie
ID: 38796010
Hi leakin971,

I've sorted out the querystring by a workaround - but still got a problem, the test page is below;

http://www.weddingservices4u.co.uk/Prototype/Find_Shows_GEO.asp

a) If the user selects "Current Location" from the dropdown, they have to press the "Find Shows" button twice for it to work?!

The first press, the GPS indicator (grey right facing arrow) appears on the iPhone
The second press, submits the page to return the correct results.

However, for

b) If the user select a region/areas, which does not need to obtain the Longitude/Latitude the page submits correctly after a single press of the "Find Shows" - it doesn't need two presses.

Any ideas why 2 presses are needed in a) above and can this be fixed to only require 1 press?!

Regards

JamWales
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38796219
Use this to url encode your string:

unescape("Find_Shows_GEO.asp?name=CURLOC&amp;AreaLAT=37.0625&amp;AreaLON=-95.677068");

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38796224
Try this OnClickGo function :
		function OnClickGo() {
		
			var Submit = false;
			var areaCODE;
			
			//read AreaID value
			areaCODE = $('#AreaID').val();
			
			//IS Current Location selected?
			if (areaCODE == 'CURLOC') {
				navigator.geolocation.getCurrentPosition(function(location) {
$('#ShowResults').load('/Prototype/Find_Shows_GEO2.asp?AreaID=CURLOC&lon=' + position.coords.latitude + '&lat=' + position.coords.longitude, afterLoadFunction);
},handle_errors);
				

			}
			else {
				$('#ShowResults').load('/Prototype/Find_Shows_GEO2.asp?AreaID=' + areaCODE, afterLoadFunction);
			}
             
                  return false;
            }      

Open in new window

0
 

Author Comment

by:Jamie
ID: 38796476
Hi leakin971,

Tried the above, but it just seems to hang  - does not return any results

regards

JamWales
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38796482
yes I made a mistake, code corrected :
            function OnClickGo() {
            
                  var Submit = false;
                  var areaCODE;
                  
                  //read AreaID value
                  areaCODE = $('#AreaID').val();
                  
                  //IS Current Location selected?
                  if (areaCODE == 'CURLOC') {
                        navigator.geolocation.getCurrentPosition(function(location) {
$('#ShowResults').load('/Prototype/Find_Shows_GEO2.asp?AreaID=CURLOC&lon=' + location.coords.latitude + '&lat=' + location.coords.longitude, afterLoadFunction);
},handle_errors);
alert("longitude:" + location.coords.longitude);                  

                  }
                  else {
                        $('#ShowResults').load('/Prototype/Find_Shows_GEO2.asp?AreaID=' + areaCODE, afterLoadFunction);
                  }
             
                  return false;
            }
0
 

Author Comment

by:Jamie
ID: 38796506
Hi leakin971,

Wow - this is working exactly how I wanted - thank you very much!

I'm assuming the following line is purely for debug and isn't necessary?

alert("longitude:" + location.coords.longitude);        

Regards

JamWales
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38796508
yes, you can remove it, of course
0
 

Author Closing Comment

by:Jamie
ID: 38796514
leakim971 stuck with the problem and worked on it until all my issues were solved - fantastic! Very much apprecited as I would have not idea how to fix this problem.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38796524
when you have, check this article for example :
http://blog.ometer.com/2011/07/24/callbacks-synchronous-and-asynchronous/
http://dev.w3.org/geo/api/spec-source.html#geolocation_interface

the successCallback is asynchrone, you can read the position only inside, once the call is completed
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article we will discuss all things related to StageFright bug, the most vulnerable bug of android devices.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question