jQuery UI mulitple dialog issue with showing - asp.net

Question

I'm seeing strange behavior with 2 dialogs in my master page. Basically I check to see if GeoLocation is enabled, if it's disabled I show a dialog telling that certain functions will not work in the site if it's disabled. If there is an error with GeoLocation I show a different dialog telling them there was a problem. One of the dialogs is working about 50% of the time, sometimes it shows and sometimes it is embedded in my page just showing the text. The other Dialog is always just embedded as text. I'm wondering if its the version of jQuery I am using or if there is another conflict.
Here is the script
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
}
else { $("#message").html("Geolocation is not supported by this browser."); }
function showPosition(position) {
var latlondata = position.coords.latitude + "," + position.coords.longitude;
var latlon = "Latitude" + position.coords.latitude + "," + "Longitude" + position.coords.longitude;
$("#message").html(latlon);
$("[id*=hdnLon]").val(position.coords.longitude);
$("[id*=hdnLat]").val(position.coords.latitude);
// var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//var geocoder = geocoder = new google.maps.Geocoder();
//geocoder.geocode({ 'latLng': latlng }, function (results, status) {
// if (status == google.maps.GeocoderStatus.OK) {
// if (results[1]) {
// alert("Location: " + results[1].formatted_address + "\r\nLatitude: " + position.coords.latitude + "\r\nLongitude: " + position.coords.latitude);
//}
}
function showError(error) {
if (error.code == 1) {
$("#message").html("User denied the request for Geolocation.");
$("#dialogGeoUserDenied").dialog({
autoOpen: true,
width: 400,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});
}
else if (error.code == 2) {
$("#message").html("Location information is unavailable.");
$("#dialogGeoLocationUnavailable").dialog({
autoOpen: true,
width: 400,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});
}
else if (error.code == 3) {
$("#message").html("The request to get user location timed out.");
$("#dialogGeoLocationUnavailable").dialog({
autoOpen: true,
width: 400,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});
}
else {
$("#message").html("An unknown error occurred.");
$("#dialogGeoLocationUnavailable").dialog({
autoOpen: true,
width: 400,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});
}
}
</script>
Here is the html
<div id="dialogGeoUserDenied" title="Dialog Title">
<p class="validateTips">Geolocation has been disabled on your browser, you will not be able to receive promimity alerts. Enter your zip code to enable them.</p>
<fieldset>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode" value="00000" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</div>
<div id="dialogGeoLocationUnavailable" title="Dialog Title">
<p class="validateTips">Geolocation is unavailable, you will not be able to receive promimity alerts. Enter your zip code to enable them.</p>
<fieldset>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcodeGU" value="00000" class="text ui-widget-content ui-corner-all">
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</div>