Solved

JQUERY Mobile and Geolocation of user

Posted on 2013-01-18
18
654 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
  • 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
 

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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now