accessing web controls from javascript 2

[jrenae]

Hello,

I've also posted this on the general ajax forum, but thought this might be a better place for it.

http://www.tek-tips.com/viewthread.cfm?qid=1441935&page=1

I'm trying to do my first ajax page, and almost all the examples I'm seeing are referencing the actual id of their asp control in the javascript function. If you look at the code below you see that I'm trying to referece the cityList dropdown from my javascript, but I keep getting an 'object required' error on the page because, as we all know, when the page renders, the <asp:dropdownlist will be rendered as a <select tag with an autogenerated id that might be called 'ctl00_ContentColumn_cityList' or something like that. How do I reference that control by it's actual name?


web form code

<td><asp:DropDownList ID="stateList" runat="server" onchange="return StateListOnChange(this)" ></asp:DropDownList></td>                  <td><asp:DropDownList ID="cityList" runat="server"></asp:DropDownList></td>

javascript

function ClearAndSetCitiesListItems(StateNode)
{
    var cityList = document.getElementById("cityList");
    for (var count = cityList.options.length-1; count >-1; count--)
    {
        cityList.options[count] = null;
    }
    var cityNodes = StateNode.getElementsByTagName('State');
     var textValue; 
    var optionItem;
    //Add new states list to the state combo box.
    for (var count = 0; count < cityNodes.length; count++)
    {
           textValue = GetInnerText(cityNodes[count]);
        optionItem = new Option( textValue, textValue,  false, false);
        cityList.options[cityList.length] = optionItem;
    }   

}

 

[jbenson001]

Try using the ClientID of the control, not the ID property.

Example:
var something = document.getElementById("<%= yourControl.clientid %>");

 

[jmeckley]

if your using ms ajax use this to access the control in the markup.

$get('<%=MyControl.ClientID %>');

this will produce output on to the browser like

$get('messy_ms_client_control_id');

so in your code above the js would look like this

function ClearAndSetCitiesListItems(StateNode)
{
    var cityList = $get('<%=cityList.ClientID %>');
    for (var count = cityList.options.length-1; count >-1; count--)
    {
        cityList.options[count] = null;
    }
    var cityNodes = StateNode.getElementsByTagName('State');
     var textValue; 
    var optionItem;
    //Add new states list to the state combo box.
    for (var count = 0; count < cityNodes.length; count++)
    {
           textValue = GetInnerText(cityNodes[count]);
        optionItem = new Option( textValue, textValue,  false, false);
        cityList.options[cityList.length] = optionItem;
    }   

}

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[jmeckley]

one other thought:
if the js in on the aspx and the control in on the ascx. then create a public readonly property to expose the client id of the nested control

public string CityListClientId
{
   get { return cityList.ClientID; }
}

then the js code would look like this

$get('<%=MyUserControl.CityListClientId%>');

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[jrenae]

Thank you jbenson, your suggestion worked great!

jmeckley, your suggestion still gave me the 'object required' javascript runtime error. so between the 2 lines of code below, the first one worked but the second did not. Maybe because I'm not using MS ajax? Anyway, thanks for the responses...I really needed it. I wasn't even aware of the ClientID property at runtime. Is there a way to force the ClientID to be the same as the ID? I still don't kknow how the examples that I was looking at were able to reference the control in the javascript by the ID.

Thanks again!

var cityList = document.getElementById("<%= cityList.ClientID %>");
var cityList = $get("<%=cityList.ClientID %>");

 

[ca8msm]

Is there a way to force the ClientID to be the same as the ID?

No. There are situations where they will be the same, but for those where they are different, forcing or changing the ID (by removing what .NET prefixed to it) will break the application.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[jrenae]

Thanks ca8msm...this will drive me nuts until I know the answer...

So what would be a situation where the ClientID rendered would be the same as the ID set in the aspx page?

 

[ca8msm]

Generally, if there are no Master Pages involved, or no parnet controls involved then they will be the same. For example, create a new page (not using a Master Page) and drop a TextBox onto the form. The ID should be rendered the same as the ClientID.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[jrenae]

ok...Thanks!!! I am using a master page so that's why I couldn't access it via the ID...

 

[jrenae]

Now I have a dynamic server control that I create on page load (Page_Init to be exact)... the name of the control could be anything.

so in my javascript I need to pull out the clientID of my dymically named control. so this code works great for accessing a static web control because I have a web control called 'cityList'.

var cityList = document.getElementById("<%= cityList.ClientID %>");

I'm trying to do the same thing for my dynamic control, so I need to replace 'cityList' with a javascript variable. I just can't get the syntax right. I've tried the following in my javascript code but I get this compile error "'string' does not contain a definition for 'ClientID'": Note that the javascript variable serverId will be the id I've given to my dropdownlist control on page init, which could be different at runtime. This must just a syntax error on my part right? If so, can someone please help? Thanks much!

clientId = eval("document.getElementById('<%="+ serverId + ".ClientID%>')");

 

[jmeckley]

nope, your trying to mix js and sever code. something like this should work.

public class MyPage : Page
{
   private WebControl dynamicControl;

   public string DynamicClientId
   {
      get { return dynamicControl.ClientId; }
   }

   protected override OnInit(EventArgs e)
   {
      base.OnInit(e);
      dynamicControl = (WebControl)LoadControl('my.ascx');
   }
}

clientId = document.getElementById('<%=DynamicClientId %>');

Jason Meckley
Programmer
Specialty Bakers, Inc.