How do I take dynamic content created using geolocation and use it in another div?

StackOverflow https://stackoverflow.com/questions/18137099

Question

Edited: Let me revise my statement! I am able to produce the location but I can't seem to be able to access the data inside the dom so I can use it in the e-mail I want to send. The address appears in the HTML in firebug but when I take to display it in another div it do not show.

Essentially after the location is determine and loaded in the DOM I want to be able to send it via email. When I select the div#address after the document is loaded it only return an empty string. How am I able to access that dynamic content?

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/locate-me.css">

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script>
            function geolocationSuccess(position) {
              var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

              writeAddressName(userLatLng);
              var myOptions = {
                zoom : 13,
                center : userLatLng,
                mapTypeId : google.maps.MapTypeId.ROADMAP
              };

              // Draw the map
              var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

              // Place the marker
              new google.maps.Marker({
                map: mapObject,
                position: userLatLng
              });

              $('#error').appendTo(writeAddressName(userLatLng));


            }

            function writeAddressName(latLng) {
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({
                "location": latLng
              },
              function(results, status) {
                if (status == google.maps.GeocoderStatus.OK)
                  document.getElementById("address").innerHTML = results[0].formatted_address;
                else
                  document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
              });
            }

            function geolocationError(positionError) {
              document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
            }

            function geolocateUser() {
              if (navigator.geolocation)
              {
                var positionOptions = {
                  enableHighAccuracy: true,
                  timeout: 10 * 1000 // 10 seconds
                };
                navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
              }
              else
                document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
            }



            window.onload = geolocateUser;

          var postAdd = $('#address').html();
          $('#error').html(postAdd);


        </script>

    </head>

    <body>
      <header>
        <h1>Locate Me</h1>
      </header>

      <section id="map"></section>

      <section>
        <h2 class="address-block">Address:</h2>
        <aside type="text"  name="address" id="address" data="address"></aside>
        <p id="error">4</p>
      <section>

      <form method='post' action='include/contact.php' id='form'>
            <!-- Name: <input type='text' name='name' required id='name'><br> -->
            Email: <input type='email' name='email' required id='email'><br>
            <input type='submit' value='Send'>
      </form>
    </body>
</html>
Était-ce utile?

La solution

Define the variable userLatLng outside the geolocationSuccess() function otherwise it is only accessible inside the function.

At the same time you can assign the value of that variable to a hidden input and send it through email.

Swap the order of these:

function geolocationSuccess(position) {
  var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

For this:

var userLatLng;
function geolocationSuccess(position) {
    userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

Major edit:

I am able to access the content by adding this just before the body tag is closed:

<script>
 $("#the_trigger").click(function(){
  alert($("#address").html());
 });
</script>

And adding an ID of "the_trigger" to the submit button.

<input id="the_trigger" type='submit' value='Send'>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top