Updating user meta with ajax on front end

The ultimate goal is to create a simple geolocation plugin to record users current latitude and longitude to user meta. These scripts are my attempt to build a method of writing data back to wordpress from javascript. I had a working version independent purely in PHP, but I could not find a way to get the user lat lon via navigator.geolocation without going to javascript…subsequently, I fell into the jQuery Ajax rabbit hole.

This current version is trying to make user meta via form, but ultimately I plan to use navigator.geolocation to populate the lat lon user meta fields.

This is revised easy-geo.php:

//Tie Javascript and PHP together using wp_ajax
    add_action( 'wp_ajax_submit_latlon', 'updateLatlon');

    //Enqueue the javascript
    function ezgeo_scripts() {
    	$parameters = array (
    		'ajaxurl' => admin_url('admin-ajax.php'),
    		'nonce' => wp_create_nonce('latlon')
    	);

    	wp_enqueue_script('easy-geo-ajax', plugins_url('js/ajax.js', __FILE__), array('jquery'), null, true); // plugins_url
    	wp_localize_script('easy-geo-ajax', 'latlon', $parameters );
    }
    add_action( 'wp_enqueue_scripts', 'ezgeo_scripts' );

    //Create Lat Lon User Meta Fields if they don't exist, assign default value

    add_action( 'show_user_profile', 'show_extra_meta_fields' );
    add_action( 'edit_user_profile', 'show_extra_meta_fields' );

    function show_extra_meta_fields( $user ) { ?>
        <h3>Easy Geo</h3>

        <form id="latlon" method="POST">
    		<label for="ezg_lat"><input type="text" name="ezg_lat" id="ezg_lat" value="<?php echo esc_attr( get_the_author_meta( 'ezg_lat', $user->ID ) ); ?>" class="regular-text" />Latitude</label><br />
            <label for="ezg_lon"><input type="text" name="ezg_lon" id="ezg_lon" value="<?php echo esc_attr( get_the_author_meta( 'ezg_lon', $user->ID ) ); ?>" class="regular-text" />Longitude</label><br />
    		<button type="submit">Update Lat Lon</button>
    	</form>

    	<p id="latlon-message"></p>

    <?php }

    function updateLatlon() {

      if(empty($_POST) || !isset($_POST)) {

        ajaxStatus('error', 'Nothing to update.');

      } else {

        $data = $_POST;
        $dataString = $data['post'];
        parse_str($dataString, $dataArray);

        $nonce = $data['nonce'];
        if(wp_verify_nonce($nonce, 'latlon') !== false) {

          $user_ID = get_current_user_id();

          if($user_ID != NULL) {
            foreach($dataArray as $key=>$value) {

              $status = update_user_meta($user_ID, $key, $value);

            }

            ajaxStatus('success', 'Meta fields updated.', $dataArray);

          } else {
            ajaxStatus('error', 'You are unauthorized to perform this action.', $dataArray);
          }

        } else {

          ajaxStatus('error', 'Nonce check cannot fail.');

        }

      }

    }

    function ajaxStatus($status, $message, $data = NULL) {

      $response = array (
        'status' => $status,
        'message' => $message,
        'data' => $data
        );
      $output = json_encode($response);

      exit($output);

    }

The following javascript takes user input and inserts into user meta via ajax, I used this tutorial as a template: https://patrickshampine.com/2014/updating-user-meta-admin-ajax-frontend/

console.log('test');

    jQuery(document).ready(function($) {

      var response;

      $('#latlon').on('submit',function(e) {

        e.preventDefault();

        $.post( latlon.ajaxurl, {
              action : 'submit_latlon',
              nonce : latlon.nonce,
              post : $(this).serialize()
          },
          function(response) {
              console.log(response);
              responseSuccess(response);
          });

        return false;

      });

      function responseSuccess(data) {

        response = JSON.parse(data);

        if(response.status === 'success') {
          $('#latlon-message').text(response.message);
        } else {
          $('#latlon-message').text(response.message);
        }
      }

    });

I need to add the javascript to generate the lat lon values, but I wnated to get this working first.

There are no errors in the console and the form displays and takes data, but on submit does not record updated meta data. I am about to dig deeper in the debugging, but not seeing warnings or errors s now sure where to look.

Thank you,

Jamie