newbie to ajax - help with example

[jrenae]

hello,

this is my first attempt at ajax...I found a good example for .net which is the following link:

http://aspalliance.com/716_Populating_a_DropDownList_using_AJAX_and_ASPNET.all#top

I'm trying to re-use it by pulling the values from my database instead of the xml file they created. I'm also trying to get cities per state instead of states per country.

I'm understanding it but I can't get past the js function 'ClearAndSetCityListItems' as I'm getting an object required error because when the page renders it has a different name than 'cityList'...it has the autogenerated name and id which is 'ctl00_ContentColumn_cityList'...


When I download the sample and run it, do view source on the client page, I notice that the names of the controls are exactly as they declared in the aspx code. I can't figure out how they explicitly named the control 'stateList' to be able to access it from javascript. Did they do that in the xsl (it didn't appear that way to me).

my question is how do you explicitly name a control on a page so you can access it from the javascript?

thanks for any insight!!! I need to use ajax in many places...


web controls on aspx

<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 code

function StateListOnChange(object) 
{
	var stateList = object;

	//Getting the selected state from country combo box.
	var selectedState = stateList.options[stateList.selectedIndex].value;

	
	// URL to get states for a given country
	var requestUrl = AjaxServerPageName + "?SelectedState=" + encodeURIComponent(selectedState);
	alert(requestUrl);
	CreateXmlHttp();
	
	// If browser supports XMLHTTPRequest object
	if(XmlHttp)
	{
		//Setting the event handler for the response
		XmlHttp.onreadystatechange = HandleResponse;
		
		//Initializes the request object with GET (METHOD of posting), 
		//Request URL and sets the request as asynchronous.
		XmlHttp.open("GET", requestUrl,  true);
		
		//Sends the request to server
		XmlHttp.send(null);		
	}
}


function HandleResponse()
{
    if(XmlHttp.readyState == 4)
    {
        if(XmlHttp.status == 200)
        {
            //ClearAndSetStateListItems(XmlHttp.responseXML.documentElement);
            ClearAndSetCitiesListItems(XmlHttp.responseXML.documentElement);
        }
        else
        {
            alert("There was a problem retrieving data from the server." );
        }
    }
}

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;
	}   

}

 

[1DMF]

my question is how do you explicitly name a control on a page so you can access it from the javascript?

Give it an id , and use document.getElementById('idname')

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[jrenae]

That is exactly what I've done...if you look at the first block of code you'll see that the id of my second dropdown list = "cityList"...if you look at the second block of code, which is the javascript, you'll see that I'm trying to reference that control using document.getElementById("cityList"). Am I missing something else?

 

[1DMF]

if you have given an element an ID and you are using document.getElementById , it should word fine.

What error are you getting or result which makes you think it's not working?

Have you named more than one element the same ID ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[jrenae]

I had to use the ClientID property of the dropdownlist rather than the actual id, because I have a master page, which is causing the actual clientId property to be different than the ID when the page is rendered. Please see the following thread for the exact explanation.

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

I changed my javascript to this...

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

Thanks for the help!

 

[1DMF]

OIC, it wasn't an AJAX / JS issue , it was an MS .NET / ASP issue.

wondered why it wasn't working!

Glad you got it sorted.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[tperri]

I've found that is is just easier to use the ClientId as often as possible when using ASP.Net AJAX