getting null values from lable in javascript function

Question

i have written the following code and it gets perfect value of lbllat and lbllon:

<asp:UpdatePanel ID="updatepanel_vehicleinfo" runat="server" OnLoad="updatepanel_vehicleinfo_Load">
                <ContentTemplate>
                    <asp:Repeater ID="vehicle_info" runat="server">
                        <ItemTemplate>

            <asp:Label ID="lbllat" runat="server" Text='<%#Eval("lat") %>'></asp:Label><br />

            <asp:Label ID="lbllon" runat="server" Text='<%#Eval("lon") %>'></asp:Label><br />
    </ItemTemplate>
                    </asp:Repeater>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
                    <script type="text/javascript">
                        function initialize() {
                            var lat = document.getElementById('<%=lbllat.ClientID %>').value;
                            var lon = document.getElementById('<%=lbllon.ClientID %>').value;
                            var myLatlng = new google.maps.LatLng(lat, lon)
                            var mapOptions = {
                                center: myLatlng,
                                zoom: 6,
                                mapTypeId: google.maps.MapTypeId.ROADMAP,
                                marker: true
                            };
                            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                            var marker = new google.maps.Marker({
                                position: myLatlng
                            });
                            marker.setMap(map);
                        }
                    </script>
                </ContentTemplate>


            </asp:UpdatePanel>

 <br />

        <div id="map_canvas" style="width: 500px; height: 500px">
        </div>

now when i call the javascript function from the codebehind like below:

 DataSet dsvehicle_info = new DataSet();
        dsvehicle_info = cls.ReturnDataSet("RetriveData_Alias1",
             new SqlParameter("@Field", "lat,lon"),
            new SqlParameter("@TblNm", "current_gps_data left join device_master on device_master.id=current_gps_data.id"),
         new SqlParameter("@WhereClause", "where current_gps_data .id=24"));


        vehicle_info.DataSource = dsvehicle_info;
        vehicle_info.DataBind();
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Javascript", "javascript:initialize();", true);

It gives perfect answer of lat and lot and it is also printed right in repeater but when i am calling javascript then the lat and lon values set to null

so how can i get right value of lat and lon in javascript ?

Answer 1

    </ContentTemplate>

 Lat: <asp:Label ID="lat" runat="server"></asp:Label><br />
  Lon: <asp:Label ID="lon" runat="server"></asp:Label><br />
 </asp:UpdatePanel>

put this label after and before

now add the following code in you cs file: put the below code after the

  vehicle_info.DataSource = dsvehicle_info;
  vehicle_info.DataBind();

add belo code:

   lat.Text = dsvehicle_info.Tables[0].Rows[0]["lat"].ToString();
   lon.Text = dsvehicle_info.Tables[0].Rows[0]["lon"].ToString();

now in the javascript change the below two lines of code:

  var lat = document.getElementById('<%=lat.ClientID %>').innerHTML;
  var lon = document.getElementById('<%=lon.ClientID %>').innerHTML;

Now It is done ..!! Enjoy!!

Answer 2

It looks like you have repeating ID values in your repeater. Have you tried assigning a class name to each label and then storing it in an HTML collection instead?

Something like this for the label controls:

<asp:Label CssClass="lbllat" runat="server" Text='<%#Eval("lat") %>'></asp:Label><br /><asp:Label CssClass="lbllon" runat="server" Text='<%#Eval("lon") %>'></asp:Label><br />

Then in your JS:

var lblats = document.getElementsByClassName('lbllat');
var lbllons = document.getElementsByClassName('lbllat');

The lblats and lbllons HTML collections should then be available for you to iterate or access via their indices.