Get ClientID of asp:TextBox in an asp:FormView nested in an ajax:TabContainer

Alan Warren
Alan Warren used Ask the Experts™
on
I am trying to get the ClientID of an asp:textbox control that is in the edit template of an asp:FormView, which is nested in an ajaxToolkit:TabContainer.TabPanel

This posted code snippet works, but uses the static name of the element which I got by viewing the page source.
I would like to get the name dynamically.

Using the following returns 'undefined'
 document.getElementById('<%=AssessmentFormView.FindControl("AxDate1TextBox").ClientID%>').focus()

Alan ";0)

function AxDate1TextBox_Clicked() 
      { 
          try {
            //Run some code here
            var FormViewMode = ('<%=AssessmentFormView.CurrentMode.ToString() %>');
            if (FormViewMode = 'Edit') // FormViewMode.Edit = 1
            {
              //alert(FormViewMode);
              var TheTextBox = $get("ctl00_ContentPlaceHolderMainsection_Tabs_TabPanel2_AssessmentFormView_AxDate1TextBox");
              TheTextBox.focus();
              return false;
            }
            else {
              return false;
            }
          }
          catch (err) {
            //Handle errors here
            alert(err.description);
          }
      }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try,
FormsView.FindControl() method to access the control and type cast with TextBox and use ClientID property to get Client ID of the textbox. Following is sample code:

var TheTextBox = $get('<%=((TextBox)AssessmentFormView.FindControl("AxDate1TextBox")).ClientID%>');
alert(TheTextBox);

Open in new window

Alan WarrenApplications Developer

Author

Commented:
Hi karthitron,
Thank you, but; I'm getting a compile error with that.
Error      18      'TextBox' is a type and cannot be used as an expression.      


Alan
      function AxDate1TextBox_Clicked() 
      { 
          try {
            //Run some code here
            var FormViewMode = ('<%=AssessmentFormView.CurrentMode.ToString() %>');
            if (FormViewMode = 'Edit') // FormViewMode.Edit = 1
            {
              //alert(FormViewMode);
              // var TheTextBox = $get("ctl00_ContentPlaceHolderMainsection_Tabs_TabPanel2_AssessmentFormView_AxDate1TextBox");

              var TheTextBox = $get('<%=((TextBox)AssessmentFormView.FindControl("AxDate1TextBox")).ClientID%>');
              alert(TheTextBox);
              TheTextBox.focus();
              return false;
              
              
            }
            else {
              return false;
            }
          }
          catch (err) {
            //Handle errors here
            alert(err.description);
          }
        }

Open in new window

try this


 var TheTextBox = document.getElementById('<%= AssessmentFormView.FindControl("AxDate1TextBox").ClientID %>');
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

My previous syntax is for C#.Net, equivalent VB.Net code is follows:
Anyway we have to crosscheck some points:
1. If '<%=AssessmentFormView.CurrentMode.ToString() %>' is returned as 'Edit' without any error, undefined, null etc. then surely '<%=AssessmentFormView.FindControl("AxDate1TextBox").ClientID%>' should work, but you mentioned in question that it returned undefined. So check this by placing alerts, alert('<%=AssessmentFormView.CurrentMode.ToString() %>' ); alert(document.getElementById('
<%= CType(AssessmentFormView.FindControl("AxDate1TextBox"), TextBox).ClientID %>'));
2. Then make sure, you are currently in edit mode and you have the required textbox control in edit mode.

var TheTextBox = $get('<%= CType(FormView1.FindControl("AxDate1TextBox"), TextBox).ClientID %>'); 
alert(TheTextBox);

Open in new window

Alan WarrenApplications Developer

Author

Commented:
Sorry guys, all of the above returns a null reference:
System.NullReferenceException was unhandled by user code
  Message="Object reference not set to an instance of an object."
  Source="App_Web_muzklxhj"
  StackTrace:
       at ASP.referral_default_aspx.__RenderContent7(HtmlTextWriter __w, Control parameterContainer)
       at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
       at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
       at System.Web.UI.Control.Render(HtmlTextWriter writer)
       at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
       at ASP.masterpage_master.__Renderform_master_master(HtmlTextWriter __w, Control parameterContainer)
       at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
       at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
       at System.Web.UI.HtmlControls.HtmlForm.RenderChildren(HtmlTextWriter writer)
       at System.Web.UI.HtmlControls.HtmlContainerControl.Render(HtmlTextWriter writer)
       at System.Web.UI.HtmlControls.HtmlForm.Render(HtmlTextWriter output)
       at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.HtmlControls.HtmlForm.RenderControl(HtmlTextWriter writer)
       at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
       at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
       at System.Web.UI.Control.Render(HtmlTextWriter writer)
       at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
       at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
       at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
       at System.Web.UI.Page.Render(HtmlTextWriter writer)
       at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
       at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
       at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
  InnerException:

2010-07-01-185155.png
Ray PhanSoftware Developer
Commented:
You can try this.
 Declare variables using Page.ClientScript in page load event
Page.ClientScript.RegisterStartupScript(this.GetType(),"ScriptStoreClientId","var AxDate1TextBoxClientID='" +this.AxDate1TextBox.ClientID +"';",true);

Then in function AxDate1TextBox_Clicked()

var TheTextBox = document.GetElementID("AxDate1TextBoxClientID");
Alan WarrenApplications Developer

Author

Commented:
Hi guys,
sorry for the delay getting back to you, been under the hammer a bit.

I ended wrapping the request in a jQuery request:
jQuery(document.getElementById('<%= AssessmentFormView.FindControl("AxDate1TextBox").ClientID %>'))

I think the problem was deep nesting, trying to access a control in the edit template of the formview in an ajax tabcontainer, the default mode of the formview being readonly, the control did not exist in readonly mode, so the .net compiler was throwing a hissy fit.

Respectfully yours,

Alan ";0)
<form>
  <ajax:tabcontainer ...>
    <ajax:tab ...>
      <asp:formview ...>
         <edittemplate ...>
           <table ...>
              <td style="text-align:left;">
                <script type="text/javascript">
                  jQuery(document).ready(function() {
                    jQuery(document.getElementById('<%= AssessmentFormView.FindControl("AxDate1TextBox").ClientID %>')).dynDateTime({
                      showsTime: true,
                      ifFormat: "%d-%b-%Y %H:%M %P",
                      daFormat: "%d-%b-%Y %H:%M %P",
                      align: "TL",
                      electric: true,
                      singleClick: true,
                      button: ".next()"
                    });
                  });
                </script>
                <asp:TextBox ID="AxDate1TextBox" runat="server" Text='<%# Bind("AxDate1") %>' />
                <img id="CalendarImage1" src="../img/Calendar_scheduleHS.png" alt="Calendar" />

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial