Getting id of asp.net control in JavaScript

Question

I am working in an ASP.Net application and need to get the ID of some client controls. I have tried the following but keep getting an error:

<script type="text/javascript">
    var cbDeclinedID = '<%= cbDeclined.ClientID %>';
</script>

It does NOT matter where I put this code, I always get the error:

CS0103: The name 'cbDeclined' does not exist in the current context

The markup:

<%@ Page Title="Manage Resident Meals" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ManageResidentMeals.aspx.cs" Inherits="Chart2GoWeb.WebUI.WebForms.ManageResident.ManageResidentMeals" %>

<asp:Content ID="jsContent" ContentPlaceHolderID="JavaScriptContent" runat="server">

<script type="text/javascript">
<!--
    // var cbDeclinedID = '< %= cbDeclined.ClientID % >';

    function NumericOnly() { var key = window.event.keyCode; if (key < 48 || key > 57) window.event.returnValue = false; }

    $(document).ready(function () {
        function UpdateTextBoxes(isDeclined, isNOP, isOutOfFac) {
            var ddlMealReplacement = $('#ddlMealReplacement');

            var lblMealOld = $('#lblMealOld');
            var lblFortifiedFluidOld = $('#lblFortifiedFluidOld');
            var lblFluidOld = $('#lblFluidOld');

            var txtMeal = $('#txtMeal');
            var txtFluid = $('#txtFluid');
            var txtFortifiedFluid = $('#txtFortifiedFluid');

            var mealReplacement = '';
            if (ddlMealReplacement.length) {
                mealReplacement = ddlMealReplacement.text();
            }

            if (isNOP || (isDeclined && mealReplacement != 'G')) {
                txtMeal.prop('disabled', true);
                txtMeal.val('');
                lblMealOld.val('___');
            } else {
                txtMeal.prop('disabled', false);
            }

            // txtFluid.Enabled = !isNOP;
            txtFluid.prop('disabled', isNOP);
            // txtFortifiedFluid.Enabled = !isNOP;
            txtFortifiedFluid.prop('disabled', isNOP);

            if (isNOP) {
                txtFluid.val('');
                txtFortifiedFluid.val('');
                $('#lblFluidTotalString').val('');
            }
        }

        function Total(lblFluidTotal, val1, val2) {
            var totalFluids = null;

            var num = parseFloat(val1);
            if (num != 'NaN')
                totalFluids = val1Num;

            num = parseFloat(val2);
            if (num != 'NaN')
                totalFluids = (totalFluids == null) ? num : num + totalFluids;

            if (totalFluids == null)
                lblFluidTotal.val('___');
            else
                lblFluidTotal.val(totalFluids);
        }

        $('#'+cbDeclinedID).click(function () {
            var cbDeclined = $(this);
            var cbIsOutOfFac = $('#cbIsOutOfFac');
            var cbNOP = $('#cbNOP');

            if (cbDeclined.is(':checked'))
                cbIsOutOfFac.attr('checked', false);

            UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
        });

        $('#cbIsOutOfFac').click(function () {
            var cbDeclined = $('#cbDeclined');
            var cbIsOutOfFac = $(this);
            var cbNOP = $('#cbNOP');

            UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
        });

        $('#cbNOP').click(function () {
            var cbDeclined = $('#cbDeclined');
            var cbIsOutOfFac = $('#cbIsOutOfFac');
            var cbNOP = $(this);

            UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
        });

        $('#ddlMealReplacement').change(function () {
            var cbDeclined = $('#cbDeclined');
            var cbIsOutOfFac = $('#cbIsOutOfFac');
            var cbNOP = $('#cbNOP');

            UpdateTextBoxes(cbDeclined.is(':checked'), cbNOP.is(':checked'), cbIsOutOfFac.is(':checked'));
        });

        $('#txtFluid').change(function () {
            var txtFluid = $(this);
            var txtFortifiedFluid = $('#txtFortifiedFluid');
            var lblFluidTotal = $('#lblFluidTotal');

            Total(lblFluidTotal, txtFluid.val(), txtFortifiedFluid.val());
        });

        $('#txtFortifiedFluid').change(function () {
            var txtFluid = $('#txtFluid');
            var txtFortifiedFluid = $(this);
            var lblFluidTotal = $('#lblFluidTotal');

            Total(lblFluidTotal, txtFluid.val(), txtFortifiedFluid.val());
        });
    });

    //-->
    </script> 

</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <asp:ObjectDataSource ID="ResidentsMealsODS" runat="server" 
        InsertMethod="InsertNourishment"        
        SelectMethod="GetMealsDetailByResMealInTakeId" 
        TypeName="Chart2GoWeb.Domain.DAL.ResidentsMealsDAL"
        UpdateMethod="UpdateNourishment"
        >

        <SelectParameters>
            <asp:SessionParameter DefaultValue="" Name="session" SessionField="__MySession__" Type="Object" />
            <asp:QueryStringParameter Name="resMealInTakeIdString" QueryStringField="resMealInTakeId" Type="String" />
            <asp:QueryStringParameter Name="nourishment" QueryStringField="nourishmentType" Type="String" />
        </SelectParameters>

        <InsertParameters>
            <asp:SessionParameter DefaultValue="" Name="session" SessionField="__MySession__" Type="Object" />
            <asp:QueryStringParameter Name="resMealInTakeIdString" QueryStringField="resMealInTakeId" Type="String" />
            <asp:QueryStringParameter Name="nourishment" QueryStringField="nourishmentType" Type="String" />
            <asp:Parameter Name="IsDeclined" Type="String"/>
            <asp:Parameter Name="IsOutOfFac" Type="String"/>
            <asp:Parameter Name="IsNpo" Type="String"/>
            <asp:Parameter Name="MealReplacement" Type="string"/>
            <asp:Parameter Name="Pct" Type="String"/>
            <asp:Parameter Name="Fluid" Type="String"/>
            <asp:Parameter Name="FortifiedFluid" Type="String"/>
            <asp:Parameter Name="FluidTotal" Type="String"/>
            <asp:Parameter Name="TubeFeeding" Type="String" />
        </InsertParameters>

        <UpdateParameters>
            <asp:SessionParameter DefaultValue="" Name="session" SessionField="__MySession__" Type="Object" />
            <asp:QueryStringParameter Name="resMealInTakeIdString" QueryStringField="resMealInTakeId" Type="String" />
            <asp:QueryStringParameter Name="nourishment" QueryStringField="nourishmentType" Type="String" />
            <asp:Parameter Name="IsDeclined" Type="String"/>
            <asp:Parameter Name="IsOutOfFac" Type="String"/>
            <asp:Parameter Name="IsNpo" Type="String"/>
            <asp:Parameter Name="MealReplacement" Type="String"/>
            <asp:Parameter Name="Pct2EditBind" Type="String"/>
            <asp:Parameter Name="Fluid2EditBind" Type="String"/>
            <asp:Parameter Name="FortifiedFluid2EditBind" Type="String"/>
            <asp:Parameter Name="TubeFeeding" Type="String" />
        </UpdateParameters>

    </asp:ObjectDataSource>

    <asp:ObjectDataSource ID="MealReplacementOptionDataSource" runat="server" 
        TypeName="Chart2GoWeb.Domain.Entities.WFEvents.MealReplacementOption" 
        SelectMethod="Select">
    </asp:ObjectDataSource>

    <asp:FormView
        DataSourceID="ResidentsMealsODS" 
        ID="nourishmentFormView" 
        DefaultMode="Edit" 
        OnItemInserted="nourishment_OnItemInserted" 
        OnItemUpdated="nourishment_OnItemUpdated" 
        RunAt="server">
        <EditItemTemplate>

        <table class="EventQtable">
            <tr>
                <th colspan="2">
                    <asp:Label ID="Title" runat="server"><% Response.Write( TitleString); %></asp:Label>
                </th>
            </tr>
            <tr>
                <td>Date</td>
                <td><asp:Label ID="mealDate" runat="server" Text='<%# Eval("MealDate") %>'/></td>
            </tr>
            <tr>
                <td>Declined</td>
                <td><asp:CheckBox ID="cbDeclined" runat="server" Checked='<%# Bind("IsDeclined") %>' /></td>
            </tr>
            <tr>
                <td>Out Of Facility</td>
                <td><asp:CheckBox ID="cbIsOutOfFac" runat="server" Checked='<%# Bind("IsOutOfFac") %>'/></td>
            </tr>
            <tr>
                <td>NPO</td>
                <td><asp:CheckBox ID="cbNPO" runat="server" Checked='<%# Bind("IsNpo") %>'/></td>
            </tr>
<% 
    // Only show the meal replacement if the nourishment type does NOT have an underscore in it.
    if (Request.QueryString["nourishmentType"].IndexOf('_') == -1)
    { 
%>
            <tr>
                <td>
                    Meal Replacement</td>
                <td>
                    <asp:DropDownList ID="ddlMealReplacement" runat="server" AutoPostBack="True" 
                        DataSourceID="MealReplacementOptionDataSource" DataTextField="DisplayValue" 
                        DataValueField="DBValue"                         
                        SelectedValue='<%# Bind("MealReplacement") %>' />
                </td>
            </tr>
<%
    }
%>
            <tr>
                <td>Meal</td>
                <td>
                    <asp:Label ID="lblMealOld" runat="server" CssClass="ccUnits" Text='<%# Eval("Pct4Edit") %>' />% +
                    <asp:TextBox ID="txtMeal" runat="server" type="number" CssClass="ccUnits" MaxLength="3" OnKeyPress="NumericOnly()" Text='<%# Bind("Pct2EditBind") %>' />%<asp:RangeValidator ID="rvRangeValidator" runat="server" ControlToValidate="txtMeal" ErrorMessage="Valid range is 0-200" MaximumValue="200" MinimumValue="0" Type="Integer">*</asp:RangeValidator>
                </td>
            </tr>
            <tr>
                <td>Fluid</td>
                <td>
                    <asp:Label ID="lblFluidOld" runat="server" CssClass="ccUnits" Text='<%# Eval("Fluid4Edit") %>' />cc +
                    <asp:TextBox ID="txtFluid" runat="server" type="number" CssClass="ccUnits" MaxLength="4" OnKeyPress="NumericOnly()" Text='<%# Bind("Fluid2EditBind") %>' />cc
                </td>
            </tr>
            <tr>
                <td>Fortified Fluid</td>
                <td>
                    <asp:Label ID="lblFortifiedFluidOld" runat="server" CssClass="ccUnits" Text='<%# Eval("FortifiedFluid4Edit") %>' />cc +
                    <asp:TextBox ID="txtFortifiedFluid" runat="server" type="number" CssClass="ccUnits" MaxLength="4" OnKeyPress="NumericOnly()" Text='<%# Bind("FortifiedFluid2EditBind") %>' />cc
                </td>
            </tr>
            <tr>
                <td>Fluid Total</td>
                <td>
                    <asp:Label ID="lblFluidTotal" runat="server" CssClass="ccUnits" Text='<%# Eval("FluidTotal4Edit") %>' />cc
                </td>
            </tr>
        </table>
        <asp:Button ID="saveButton" runat="server" CommandName="Update" CssClass="GenBtn" Text="Save" />&nbsp;
        <asp:Button ID="cancelButton" runat="server" CssClass="GenBtn" onclick="cancelButton_Click" Text="Cancel" />
        </EditItemTemplate>



        <InsertItemTemplate>
        <table class="EventQtable">
            <tr>
                <th colspan="2"><asp:Label ID="Title" runat="server"><% Response.Write( TitleString); %></asp:Label></th>
            </tr>
            <tr>
                <td>Date</td>
                <td><asp:Label ID="mealDate" runat="server" Text='<%# Eval("MealDate") %>'/></td>
            </tr>
            <tr>
                <td>Declined</td>
                <td><asp:CheckBox ID="cbDeclined" runat="server" Checked='<%# Bind("IsDeclined") %>'/></td>
            </tr>
            <tr>
                <td>Out Of Facility</td>
                <td><asp:CheckBox ID="cbIsOutOfFac" runat="server" Checked='<%# Bind("IsOutOfFac") %>'/></td>
            </tr>
            <tr>
                <td>NPO</td>
                <td><asp:CheckBox ID="cbNPO" runat="server" Checked='<%# Bind("IsNpo") %>'/></td>
            </tr>
<% 
    // Only show the meal replacement if the nourishment type does NOT have an underscore in it.
    if (Request.QueryString["nourishmentType"].IndexOf('_') == -1)
    { 
%>
            <tr>
                <td>Meal Replacement</td>
                <td><asp:DropDownList ID="ddlMealReplacement" runat="server" AutoPostBack="True" 
                                      DataSourceID="MealReplacementOptionDataSource" DataTextField="DisplayValue" 
                                      DataValueField="DBValue" 
                                      SelectedValue='<%# Bind("MealReplacement") %>' /></td>
            </tr>
<% 
    }
%>
            <tr>
                <td>Meal</td>
                <td>
                    <asp:Label ID="lblMealOld" runat="server" Text="0" CssClass="ccUnits"/>%&nbsp; +
                    <asp:TextBox ID="txtMeal" runat="server" type="number" Text='<%# Bind("Pct") %>' MaxLength="3" OnKeyPress="NumericOnly()" CssClass="ccUnits" />%<asp:RangeValidator ID="rvRangeValidator" runat="server" ErrorMessage="Valid range is 0-200" Type="Integer" MaximumValue="200" MinimumValue="0" ControlToValidate="txtMeal">*</asp:RangeValidator>
                </td>
            </tr>
            <tr>
                <td>Fluid</td>
                <td>
                    <asp:Label ID="lblFluidOld" runat="server" Text="0" CssClass="ccUnits"/>cc +
                    <asp:TextBox ID="txtFluid" runat="server" type="number" Text='<%# Bind("Fluid") %>' MaxLength="4" OnKeyPress="NumericOnly()" CssClass="ccUnits" />cc
                </td>
            </tr>
            <tr>
                <td>Fortified Fluid</td>
                <td>
                    <asp:Label ID="lblFortifiedFluidOld" runat="server" Text="0" CssClass="ccUnits" Enabled="false" />cc +
                    <asp:TextBox ID="txtFortifiedFluid" runat="server" type="number" Text='<%# Bind("FortifiedFluid") %>'  MaxLength="4" OnKeyPress="NumericOnly()" CssClass="ccUnits" />cc
                </td>
            </tr>
            <tr>
                <td>Fluid Total</td>
                <td>
                    <asp:Label ID="lblFluidTotal" runat="server" Text='0' CssClass="ccUnits"/>cc
                </td>
            </tr>
        </table>
        <asp:Button ID="saveButton"  CssClass="GenBtn" runat="server" Text="Save" CommandName="Insert"/>&nbsp;
        <asp:Button ID="cancelButton" CssClass="GenBtn" runat="server" Text="Cancel" onclick="cancelButton_Click"/>

        </InsertItemTemplate>
    </asp:FormView>

<script type="text/javascript">
    var cbDeclinedID = '<%= cbDeclined.ClientID %>';
</script> 

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="FooterContent" runat="server"> 
    <table class="footer" border="0" cellspacing="0" cellpadding="0" style="background-image: url('<%= ResolveClientUrl("~/Images/BottomBar-1000x42.png")%>'); background-repeat: no-repeat; height: 42px; width: 1000px;" >
        <tr>
            <td width="4%">&nbsp;</td>
            <td width="9%"></td>
            <td width="56%">&nbsp;</td>
            <td width="27%" align="center"/>
            <td width="4%"></td>
        </tr>
    </table>
</asp:Content>

Are you using .NET 4? What is the ClientIDMode of your control? — Tron5000
– Tron5000, Commented Jul 23, 2012 at 22:59
yes, please post your markup. and try to rebuild your project. check the desiner file - your child control should be there. — Dmitry Khryukin
– Dmitry Khryukin, Commented Jul 24, 2012 at 0:25
I just got the issue, but don't know the fix... The control is within a form's EditItemTemplate and InsertItemTemplate, thus it does not exist yet. I need to do something so that the JavaScript is called within the templates. The question: how? — Sam Carleton
– Sam Carleton, Commented Jul 24, 2012 at 14:22

freefaller · Accepted Answer · 2012-07-24 14:20:37Z

1

It's because dbDeclines is defined within the templates of your <asp:FormView id="nourishmentFormView">.

Try this instead (untested)...

<script type="text/javascript">
    var cbDeclinedID = '<%=nourishmentFormView.FindControl("cbDeclined").ClientID%>';
</script>

answered Jul 24, 2012 at 14:20

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nyxthulhu · Accepted Answer · 2012-07-24 15:36:25Z

0

Stupid question but does cbDeclined exist?

If it does, is it possibly in another control (ie gridview or listview) that would then require you to get the grid, then .GetChildControl() instead of directly referencing cbDeclined?

The way you are currently doing it is the correct way to reference a ID in ASP.NET (unless you use static guessable IDs but that breaks functionality where theres repetition of controls).

EDIT

After your updated code, you appear to be tryign to reference a control inside another control, you'll need to do something like

<script type="text/javascript">
    var cbDeclinedID = '<%= ((CheckBox)nourishmentFormView.FindControl("cbDeclined")).ClientID %>';
</script>

edited Jul 24, 2012 at 15:36

answered Jul 23, 2012 at 21:46

nyxthulhu

9,8029 gold badges60 silver badges91 bronze badges

2 Comments

Sam Carleton Over a year ago

Yes, the cbDeclined does exist.

nyxthulhu Over a year ago

@SamCarleton check my updated code, you are trying to reference a control within a control. When you juse use the cbDeclined its interpreted as this.cbDeclined. Since cbDeclied doesn't exist at the "this" stage, ie form it is null. You need to use FORMOBJECT.VIEW.cbDeclined as detailed above.

Collectives™ on Stack Overflow

Getting id of asp.net control in JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related