JQUERY Mobile and Geolocation of user

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>
JamieAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
JamieAuthor Commented:
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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
leakim971PluritechnicianCommented:
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
 
JamieAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
JamieAuthor Commented:
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
 
JamieAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
JamieAuthor Commented:
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
 
JamieAuthor Commented:
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
 
mcnuteCommented:
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
 
JamieAuthor Commented:
Hi leakin971,

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

regards

JamWales
0
 
leakim971PluritechnicianCommented:
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
 
JamieAuthor Commented:
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
 
leakim971PluritechnicianCommented:
yes, you can remove it, of course
0
 
JamieAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.