Geolocation and form fields

  • 1
  • 1
  • Question
  • Updated 7 months ago
  • Answered
  • (Edited)
I am trying to create a button that fills in two fields on a form for a new record. I have downloaded the GeoLocate app from the exchange and am trying to use the geo.js and the get location button from this app in our timesheets app. Problem is when I click the get location button the page just reloads and doesn't fill in the form fields or pull the geolocation data from the browser. 
_______________________________________________________________________
Modified geo.js script
jQuery(document).ready(function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
 
var test = $.ajax({url: url,async:false,success: pushResult}).responseText;
   return false;
});
function showPosition(position){
      var editURL = "";
      editURL = "bnifp6kni";
         editURL += "?act=API_EditRecord&key=" + QBU_recid;
      editURL += "&_fid_13=" + position.coords.latitude;
      editURL += "&_fid_14=" + position.coords.longitude;
 
    
      $.ajax({url: editURL,async:false});
      location.reload(true);
 }
__________________________________________________________________________
Button Formula

"javascript:" &
"var QBU_recid="& [Record ID#] &";" &
"void(jQuery.getScript('" & URLRoot() & "db/bmic8pqiv?act=dbpage&pagename=geo.js'))"

Any help on this would be greatly appreciated. 
Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb

Posted 7 months ago

  • 1
  • 1
Hi Jason,

A couple of things to look out for when copying an app is to make sure DBIDs and field IDs are updated. Have you updated the following to match your new app? 

I also notice that the call is using the "&key" parameter in the request. Is your table using the standard Record ID# as the key field, or has a different field been assigned as the key?

-Ryan

function showPosition(position){
      var editURL = "";
      editURL = "bnifp6kni";
         editURL += "?act=API_EditRecord&key=" + QBU_recid;
      editURL += "&_fid_13=" + position.coords.latitude;
      editURL += "&_fid_14=" + position.coords.longitude;
 
     
      $.ajax({url: editURL,async:false});
      location.reload(true);
 }
"javascript:" &
"var QBU_recid="& [Record ID#] &";" &
"void(jQuery.getScript('" & URLRoot() & "db/bmic8pqiv?act=dbpage&pagename=geo.js'))"
Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb
Ryan,

Thanks for the response. I double checked and my table is using Record ID as the primary key field. I did modify the db identifiers to match my app and double checked my field ids. 
Would act=API_EditRecord work for both adding a new record and updating a record? Could this be were my error is?
thanks!
Hey Jason,

Awesome, the hard part is over then :-) 

Since you are using the Record ID# I would recommend using "&rid" instead of "&key". Its a subtle difference, but its important. However, when adding a record the "&rid" and "&key" parameters are unnecessary (since a key value has not been assigned yet). Below are examples on how to setup an Edit Record and an  Add Record function.

/* Edit an existing record */
function showPosition(position){
      var editURL = "bnifp6kni";
            editURL += "?a=API_EditRecord&rid=" + QBU_recid;
            editURL += "&_fid_13=" + position.coords.latitude;
            editURL += "&_fid_14=" + position.coords.longitude;
            editURL += "&apptoken=YOUR_TOKEN_HERE";
 
     
      $.ajax({url: editURL,async:false});
      location.reload(true);
 }


/* Add a new record */
function showPosition(position){
      var addURL = "bnifp6kni";
            addURL+= "?a=API_AddRecord";
            addURL += "&_fid_13=" + position.coords.latitude;
            addURL += "&_fid_14=" + position.coords.longitude;
            addURL += "&apptoken=YOUR_TOKEN_HERE";
 
     
      $.ajax({url: addURL,async:false});
      location.reload(true);
 }
(Edited)
Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb
Thanks! I will try this and let you know if I get it working. Again thanks for the help!
Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb
This works for both adding or updating a record but I am still having trouble with the position.coords.lat or long not populating the fields for lat and long. the records are updated or added to the database but not the lat and long. Any ideas?
It sounds like the issue may reside within the JavaScript source code. There are a few things you can do to make sure everything is running correctly. 

1. Make sure location services are turned on within your browser.
2. Try changing the field type to text (as it will capture any value)
3. Debug your source code.
    - Add some "console.log();" lines to your source code to see if position.coords.latitude/longitude is working.
    - Open the browser console (F12 for most broswers) before running the script to view any logs.

If all else fails there are other resources on the web to help with JavaScript/jQuery.
Here are a couple of popular sites:
- JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- jQuery: https://jquery.com/ 

Best of luck!
Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb
I will post back once I have a working solution. I don't see the code firing in the console so I think the reload is the only section that is working on my geo.js page. 
Thanks for all your help!!
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
Most of the above code is not ideal as it is synchronous and does not conform to modern practices.

If you are trying to fill in the latitude and longitude on an open form with a button click you can simply bind the following code to your button:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=649

Here is a screenshot of me manually applying the above code through the console:

Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb
Dan, thanks for your response. How would I put this in my button, as a formula? I copied the code you have and I get an error about syntax. I did change the fields to match my database fields. 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,242 Points 20k badge 2x thumb
Give me a few minutes and I will post a working demo ...
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
The demo uses the IOL technique and there is a link in the Pastie record for instrutions.

Where Am I? ~ Add New Record

https://haversineconsulting.quickbase.com/db/bnkmdpczc?a=nwr

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=650

Notes

(1) There really is no need for clicking the button. With a minor modification the script could easily just run as soon as the pages loads and fill in the lat and lon.

(2) Since script will be filling in the latitude and longitude you could arrange for the fields to be readonly so a pesky human could not alter the lat and lon.

(3) There are other ways to implement this so that you don't even need to have the user permit sharing his location.
Photo of Jason Rake

Jason Rake

  • 214 Points 100 badge 2x thumb
Dan, I think I am missing something. Can you help me with the IOL does that go in the formula or the module.js page? do I attach that to the form? Is it a field in the database?
sorry to be a pain but I am really new to this. 
thanks,
Jason. 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,322 Points 20k badge 2x thumb
Read these posts first before using the IOL Technique on the geolocation:

https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol

https://community.quickbase.com/quickbase/topics/what-is-the-simplest-iol-example

If you need individual help you can contact me off-world using the information in my profile:

https://getsatisfaction.com/people/dandiebolt/