Capturing longitude and latitude coordinates on 'pageshow' with jQuery Mobile

Question

I am writing an iOS app where the app must determine the current latitude longitude each time a page loads. I need to access the longitude and latitude from the event handler and pass the latest coordinates to a third party server.

I have been able to retrieve the coordinates using Cordova's navigator.geolocation.getCurrentPosition but need help to:

Capture the coordinates each time a page loads
Append the coordinate values to a GET request on an external URL.

so the question is simply can someone please advise me the correct syntax to be able to capture the value generated in the getlocation script below so i can have the co ords appended to the url so coords= the long / lat values generated

Here's my pageshow event handler code:

$("#HomePage").live("pageshow",

                    function() {
                    $.mobile.showPageLoadingMsg();
                    $.get("http://[externalurl]/process.cfc?method=HomePage&CORDS=[LATEST COORDS VALUE]]&returnformat=json", {}, function(res) {
                          $.mobile.hidePageLoadingMsg();
                          var s = "";
                          for(var i=0; i<res.length; i++) {
                          s+= "<li><a href='employeedetails.html?Id=" +  res[i].Id + "'>Employee Details</a></li>";
                          s+= "<li><a href='OrgDetails.html?OrgId=" +  res[i].OrgId + "'>OrgDetails</a></li>";
                         }
                          $("#HomePageContent").html(s);
                          $("#HomePageContent").listview("refresh");
                          },"json");
                    });

Below is the code I'm using to retrieve the users current coordinates. I just need to figure out how I can get the values into the jQuery function above so they can be appended to the GET request.

var x = document.getElementById("demo");

              function getLocation() {
              if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(showPosition);
              } else {
              x.innerHTML = "Geolocation is not supported by this browser.";
              }
              }

              function showPosition(position) {
              x.innerHTML = + position.coords.latitude +
              "," + position.coords.longitude;
              }

I assume from your code example where you've assigned an event handler for the pageshow event, that you are using jQuery Mobile. I've updated the title and tags for your question to reflect this. — Elliot B.

Elliot B. Elliot B. · Accepted Answer · 2016-07-02T03:08:43

There are a few issues to correct:

First, the $.live() method was deprecated long ago and was completely removed from jQuery in version 1.9 ( http://api.jquery.com/live/ ).

Second, the jQuery Mobile pageshow event is also deprecated and will be removed with the release of jQuery Mobile version 1.6 ( https://api.jquerymobile.com/pageshow/ ).

Your event handler for capturing when the page is shown, should look like this:

$(document).on("pagecontainershow", function( event, ui ) {
   var elmtId = $('body').pagecontainer('getActivePage').prop('id'); 

    if (elmtId == "HomePage") {
       // YOUR CODE HERE
    }
});

There is nothing preventing you from executing the getCurrentPosition method from directly inside the pagecontainershow event handler above.

It could be as simple as this:

$(document).on("pagecontainershow", function( event, ui ) {
   var elmtId = $('body').pagecontainer('getActivePage').prop('id'); 

    if (elmtId == "HomePage") {
        navigator.geolocation.getCurrentPosition(function(position) {
        var element = document.getElementById('geolocation');
        element.innerHTML = position.coords.latitude 
                             + ',' 
                             +  position.coords.longitude;
        }, function(error) {
            alert('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        });
    }

});

You will want to ensure that #HomePage does refer to the jQuery Mobile page and not and an element inside the page. jQuery Mobile pages have the data-role="page" attribute on their outermost element ( http://demos.jquerymobile.com/1.4.5/pages/ ).

Capturing longitude and latitude coordinates on 'pageshow' with jQuery Mobile

1 Answers