使用ASP.NET和JQuery Mobile的innerHtml

Question

I'm working on a mobile search, that uses your location to determine a zip code server side, but when trying to set two labels to the latitude and longitude to send to the server, I get an error claiming that the innerHtml is null. Upon further inspection, the element is null. Why could this be?

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Search.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script language="javascript" type="text/javascript">
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
    var latitude;
    var longitude;
    function foundLocation(position) {
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        alert('Your location: ' + latitude + ', ' + longitude);
    }
    function noLocation() {
        //Do something here in the case that no location is found, or user denies access
    }
    function getLocation() {
        document.getElementById("ct100_ContentPlaceHolder1_lblLat").innerHtml = latitude;
        document.getElementById("ct100_ContentPlaceHolder1_lblLong").innerHtml = longitude;
    }
</script>   
<div data-role="page">
    <div data-role="header">
        <h1>Provider Search</h1>
    </div>
    <div data-role="content">
        <asp:Button ID="btnSearch" Text="Search" runat="server" data-role="button" OnClientClick="getLocation()" OnClick="btnSearch_Clicked"></asp:Button>
        <asp:Label ID="lblLat" runat="server"></asp:Label>
        <asp:Label ID="lblLong" runat="server"></asp:Label>
        <p></p> 

    </div>

</div>

</asp:Content>

I'd like to note that everything in this document is working perfectly, except for the setting of the labels.

Also, the ID prefix ct100_ContentPlaceHolder1_ is generated by asp.net during runtime, and this can be confirmed by looking at the page source when I am debugging.

Any help?

Answer 1

In your getLocation() function could you try doing the following:

function getLocation() {
    $('#<%=lblLat.ClientID%>').html(latitude);
    $('#<%=lblLong.ClientID%>').html(latitude);
}

You could also try setting the text property of both labels in a similar manner:

function getLocation() {
    $('#<%=lblLat.ClientID%>').text(latitude);
    $('#<%=lblLong.ClientID%>').text(latitude);
}