script displays at the bottom of the page... why?

[SF23103]

Hey all,

 

I have been trying to implement the following java script into a form which is processed by a PHP script.  The script works great, obtaining the geolocation lat/lon but for some reason the text box containing the lat/lon (

<input name="LAT_LON" type="text" value="' + lat + ' ' + long + '" />

) gets put at the very bottom of the page, no matter where I place the script.  How do I get the text box to display where I want it in the form?  Any ideas!?

 

Thanks!

Alex

 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="button" id="go" value="Click Me To View Your Location" />
    <script>
    $(document).ready(function () {
        // wire up button click
        $('#go').click(function () {
            // test for presence of geolocation
            if (navigator && navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(geo_success, geo_error);
            } else {
                error('Geolocation is not supported.');
            }
        });
    });
     
    function geo_success(position) {
        printLatLong(position.coords.latitude, position.coords.longitude);
    }
     
    // The PositionError object returned contains the following attributes:
    // code: a numeric response code
    // PERMISSION_DENIED = 1
    // POSITION_UNAVAILABLE = 2
    // TIMEOUT = 3
    // message: Primarily for debugging. It's recommended not to show this error
    // to users.
    function geo_error(err) {
        if (err.code == 1) {
            error('The user denied the request for location information.')
        } else if (err.code == 2) {
            error('Your location information is unavailable.')
        } else if (err.code == 3) {
            error('The request to get your location timed out.')
        } else {
            error('An unknown error occurred while requesting your location.')
        }
    }
     
    // output lat and long
    function printLatLong(lat, long) {
        $('body').append('<p>LAT:  <input name="LAT_LON" type="text" value="' + lat + ' ' + long + '" /></p>');
    }
     
    function error(msg) {
        alert(msg);
    }
    </script>

[AyKay47]

The input field is being displayed at the bottom of the page because you are telling it to. This line.

 

  $('body').append('<p>LAT:  <input name="LAT_LON" type="text" value="' + lat + ' ' + long + '" /></p>');

 

Tells JavaScript to append (place after all child elements inside the selector element) the input, in this case the selector is the entire body.

 

What you can do is inject the input into a desired element by using $("selector").html(input);

[SF23103]

Good call.  Thanks!!!  So this is working great for me:

 

<div class="geo"><input type="button" id="go" value="Click Me To View Your Location" />
    <script>
    $(document).ready(function () {
        // wire up button click
        $('#go').click(function () {
            // test for presence of geolocation
            if (navigator && navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(geo_success, geo_error);
            } else {
                error('Geolocation is not supported.');
            }
        });
    });
     
    function geo_success(position) {
        printLatLong(position.coords.latitude, position.coords.longitude);
    }
     
    // The PositionError object returned contains the following attributes:
    // code: a numeric response code
    // PERMISSION_DENIED = 1
    // POSITION_UNAVAILABLE = 2
    // TIMEOUT = 3
    // message: Primarily for debugging. It's recommended not to show this error
    // to users.
    function geo_error(err) {
        if (err.code == 1) {
            error('The user denied the request for location information.')
        } else if (err.code == 2) {
            error('Your location information is unavailable.')
        } else if (err.code == 3) {
            error('The request to get your location timed out.')
        } else {
            error('An unknown error occurred while requesting your location.')
        }
    }
     
    // output lat and long
    function printLatLong(lat, long) {
	        $("div.geo").html('<p>LAT:  <input name="LAT LON" type="text" value="' + lat + ' ' + long + '" /></p>');
    }
     
    function error(msg) {
        alert(msg);
    }
    </script></div>