Start Free Trial

asked on

AutoComplete and Usercontrols

Hi Everyone,
Here's what I've got:
An aspx page with AJAX Tab container with multiple panels. On more than one panel I have a usercontrol (.asmx) that has Name, address, City, State, Zip textboxes. I have the Autocomplete setup to supply a list of zipcodes once 2 characters are typed. I then use the Onclientselected to call a javascript which will supply the city and state based on the zipcode. My problem is when I want to return the city and state to the correct text boxes, how do I know which tabpanel usercontrol called the autocomplete?
Currently I have it setup to return to a control like "TabContainer1_TabPanel1_UserControl_txtZip", but that is just hardcoded to make sure it works. Any Suggestions would be appreciated. If you need me or want me to post some of the code I'd be more than happy to.
Thanks,
Steve

Steve,

1) UserControls are .ascx, not .asmx (web service).

2) You should be able to use the Parent property, and follow up the chain until you get to the container that you need. You can combine calls, like this:

Control.Parent.Parent.Parent.

Bob

ASKER

Sorry about that, I miss typed.

Unfortunately I have a very limited knowledge of javascript.
How would I do that in the Java script of the user control?

You may not have to do that will Javascript directly, since you can use 'this' to refer to the control, but that would mean that the Javascript would need to be attached to the TextBox. I can't quite see what you are trying to do with the TabContainer, TabPanel, and the TextBox.

Bob

ASKER

My aspx page is pretty simple, an AJAX tab container with 4 tab panels. Each tab panel has the below user control on it. Attached is my code for the user control. As you can see from the code, currently I have the city and state elements hardcoded ( document.getElementById("TabContainer1_TabPanel4_txtCity").innerText )
What I would like to do is to replace that with hopefully some variable that I can set to be the Id of the control that called it.
I hope that makes sense.

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="NameLabelsTop.ascx.vb" Inherits="QuadMaxRedesign.Name_Addr_LabelsTop" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 
<script  type="text/javascript">
 
var objHttp;
var objXmlDoc;
 
function getDataFromWS(methodName, dataSetName, wsParamValue, wsParamName)
{
        // create the XML object
    objXmlDoc = new ActiveXObject("Msxml2.DOMDocument");
 
    if (objXmlDoc == null)
    {
        alert("Unable to create DOM document!");
        
    } else {
 
	    // create an XmlHttp instance
	    objHttp = new ActiveXObject("Microsoft.XMLHTTP");
	
	
	    // Create the SOAP Envelope
	    strEnvelope = "<soap:Envelope xsi=\"http://www.w3.org/2001/XMLSchema-instance\"" +
	
	                  " xsd=\"http://www.w3.org/2001/XMLSchema\"" +
	
	                  " soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
	
	                  "  <soap:Body>" +
	
	                  "    <" + methodName + " xmlns=\"http://tempuri.org/Webservice\">" +
	                  
	                  //"     <" + wsParamName + "> 44512 </" + wsParamName + ">" + 
	
	                  "    </" + methodName + ">" +
	
	                  "  </soap:Body>" +
	
	                  "</soap:Envelope>";
	
	
	    // Set up the post
	    objHttp.onreadystatechange = function(){
	
	        // a readyState of 4 means we're ready to use the data returned by XMLHTTP
	        if (objHttp.readyState == 4)
	        {
	            
	            // get the return envelope
	            var szResponse = objHttp.responseText;
			   		
	            // load the return into an XML data island
	            objXmlDoc.loadXML(szResponse);
	             if (objXmlDoc.parseError.errorCode != 0) {
	                var xmlErr = objXmlDoc.parseError;
	                alert("You have error " + xmlErr.reason);
	            } else {
	                
	                switch(dataSetName)
	                {
	                        case "CityStateDS":
	                        processCityState();
	                        break;
	                }
	            }
	
	        }
	     }
	
	    var szUrl;
	    szUrl = "http://localhost:49646/QuadmaxWebService.asmx/" + methodName;
	    
	    //If using Query String instead of param in soap method
	    if (wsParamValue != null)
	    {
	
	        szUrl += "?" + wsParamName + "=" + wsParamValue;
	    }
	    //alert(szUrl);
	    // send the POST to the Web service
	    objHttp.open("POST", szUrl, true);
	    objHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    objHttp.send(strEnvelope);
	  }
  }
    
    
  function getCity()
  {
    var Elm = document.getElementById("txtZip");
    
    var zip = Elm.value;
       var func = "getDataFromWS('GetCityState', 'CityStateDS','" + zip + "', 'Zip' )";
    window.setTimeout(func,1);
      }  
  
  function processCityState()
  {
       // get an XML data island with the category data
    objNodeList = objXmlDoc.getElementsByTagName("Cities");
        // walk through the nodeList and populate the dropdown
    for (var i = 0; i < objNodeList.length; i++) 
    {
        var dataNodeList;
        var textNode;
        var valueNode;
        
        dataNodeList = objNodeList[i].childNodes;
        valueNode = dataNodeList.item(0);
        textNode = dataNodeList.item(1);
        document.getElementById("TabContainer1_TabPanel4_uc1_txtCity").innerText = valueNode.text;
        document.getElementById("TabContainer1_TabPanel4_uc1_txtState").innerText = textNode.text;
                
    }
      
  }
 
  
</script>
 
 
        <asp:Label ID="lblName" Text="Name:" runat="server" Font-Size="Smaller"></asp:Label>
        <br />
        <asp:TextBox ID="txtFirstName" runat="server" ></asp:TextBox>
        <asp:TextBox ID="txtLastName" runat="server" ></asp:TextBox>
        <asp:TextBox ID="txtMI" runat="server" Width="32px" MaxLength="1"></asp:TextBox>
        <br />
        <asp:Label ID="lblAddress" runat="server" Text="Address:" Font-Size="smaller"></asp:Label>
        <br />
        <asp:TextBox ID="txtAddress1" runat="server" Width="350px" ></asp:TextBox>
        <br />
        <asp:TextBox ID="txtAddress2" runat="server" Width="350px"></asp:TextBox>
        <br />
        <asp:Label ID="lblCitySTZip" runat="server" Text="City/ST/Zip:" Font-Size="smaller"></asp:Label>
        <br />
        <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
        <asp:TextBox ID="txtState" runat="server" Width="32px" MaxLength="2"></asp:TextBox>
        <asp:TextBox ID="txtZip" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="lblCountryCode" runat="server" Text="CountryCode:" Font-Size="smaller"></asp:Label>
        <br />
        <asp:TextBox ID="txtCountryCode" runat="server"></asp:TextBox>
 
   
 
<cc1:AutoCompleteExtender 
               ID="AutoCompleteExtender1" 
               runat="server" ServicePath=QuadmaxWebService.asmx 
               ServiceMethod="ZipCode"
               MinimumPrefixLength="2"                
               CompletionSetCount="10" 
               Enabled="True"
               TargetControlID="txtZip"
               OnClientItemSelected="getCity()"
               
               >
</cc1:AutoCompleteExtender>

Open in new window

You could do that in the code-behind, like this simple example:

AutoCompleteExtender1.OnClientItemSelected = String.Format("getCity('{0}');", Me.TextBox1.UniqueID)

Script change:

function getCity(zip)
{
var Elm = document.getElementById(zip);

Bob

ASKER

I've actually run into another problem. When I set the OnClientItemSelected in either the codebehind or the aspx page it calls the function as if an item was selected. Thats fine, i can code an if statement around that but when I go to type in a zip and select it I get an error message "Object doesn't support this property or method". It appears to be coming from the Ajax Javascript ( I think this because if I create a function that just returns an alert message, once i select a zip it doesn't make it to the alert). Any ideas on what I might have done? I've even created a new project since I couldn't figure it out but it still occurs.
-Steve

Is the error coming from the AJAX framework, or you Javascript function?

Bob

ASKER

Looks like the AJAX framework.

ASKER

The error seems to be thrown from the scriptresource.axd file, if that helps.

No, that doesn't actually help. It could be anything that would be based on how you are trying to implement the AutoComplete.

Bob

ASKER

Do you know if the AutoComplete's OnClientSelectedItem, is normally supposed to kick off when the page is loaded? When I first was programming it didn't seem like it was.

I don't believe that it is supposed to be raised, so is it?

Bob

ASKER

I didn't think that seemed right, but it is being raised. I just have it pointing to an alert(message) and that pops up before the page is loaded. When I go to type in the zip and select the result I want I get that object doesnt support this property error. I've tried creating a new project and I still get this error.

This is new technology, and there isn't a lot of reference material on it, so I struggle a bit to dig into AJAX deeper. Let me take a look at the source code for the AutoCompleteExtender, and see why that is happening.

What version of the AJAX control toolkit do you have?

ASKER

I'm using the 2.0 Ajax Toolkit with
Ajax extensions 1.0

I have 1.0.20229.0 for the AjaxControlToolkit.dll, and I wanted to make sure that I am looking at the same thing that you are using.

ASKER

Toolkit DLL file version 1.0.11119.17221

There is a newer version available, that might solve the problem. If you have the opportunity to download, and try with a different machine, that would be a way to test the new version.

ASKER

I downloaded the new version 1.0.20229.20821
I removed the reference in my project to the tool kit and added a new reference to the new toolkit, but it didn't help. I don't have access to a different machine at the moment but I'll try on my home computer tonight.

Where are you setting AutoCompleteExtender1.OnClientItemSelected?

ASKER

Inside of a tabpanel. See code snippet below. All from the aspx page.

<head runat="server">
<script language="javascript">
function getName()
  {
 alert("getName");
  } 
</script>
</head>  
<Body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
       <cc1:TabContainer ID="TabC" runat="server" ActiveTabIndex="0" >
<cc1:TabPanel ID="TP4" runat="server" HeaderText="MISC">
                <ContentTemplate>
                    <asp:Label ID="lblName" Text="Name:" runat="server" Font-Size="Smaller"></asp:Label>
                    <br />
                    <asp:TextBox ID="txtFirstName" runat="server" ></asp:TextBox>
                    <asp:TextBox ID="txtLastName" runat="server" ></asp:TextBox>
                    <asp:TextBox ID="txtMI" runat="server" Width="32px" MaxLength="1"></asp:TextBox>
                    <br />
                    <asp:Label ID="lblAddress" runat="server" Text="Address:" Font-Size="Smaller"></asp:Label>
                    <br />
                    <asp:TextBox ID="txtAddress1" runat="server" Width="350px" ></asp:TextBox>
                    
                    <br />
                    <asp:TextBox ID="txtAddress2" runat="server" Width="350px"></asp:TextBox>
                    <br />
                    <asp:Label ID="lblCitySTZip" runat="server" Text="City/ST/Zip:" Font-Size="Smaller"></asp:Label>
                    <br />
                    <asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
                    <asp:TextBox ID="txtState" runat="server" Width="32px" MaxLength="2"></asp:TextBox>
                    <asp:TextBox ID="txtZipCode" runat="server"></asp:TextBox>
                    <br />
                    <asp:Label ID="lblCountryCode" runat="server" Text="CountryCode:" Font-Size="Smaller"></asp:Label>
                    <br />
                    <asp:TextBox ID="txtCountryCode" runat="server"></asp:TextBox>
 
                    <br />
                    <br />
                    
 
<cc1:AutoCompleteExtender 
               ID="AutoCompleteMISC" 
               runat="server" 
               ServicePath=QuadmaxWebService.asmx
               ServiceMethod="ZipCode"
               MinimumPrefixLength="2" 
               Enabled="True"
               TargetControlID="txtZipCode"
               OnClientItemSelected="getName()" DelimiterCharacters=""
               >
</cc1:AutoCompleteExtender>
                
                </ContentTemplate>
            </cc1:TabPanel>
        </cc1:TabContainer>
   </form>
</body>
</html>

Open in new window

ASKER

Sorry for not replying sooner but I was on vac. last week. I'm still trying to get my hands on a computer with VS2005 to test on a new computer.

ASKER

Alright, I was finally able to get VS2005 on a new computer.
I started simple by Creating a page with a textbox, Calling a webservice that puts a couple values in the list to select from. However I am still getting the onselected item code to launch on start up and then error out when an item is selected.

ASKER

Anybody else having this issue? If not could you maybe post some code, maybe i'm doing something wrong.

ASKER

I resolved the Autocomplete issue and will try your suggestion.

This question started in April, and May is almost over, and I have totally forgotten about this question, so if I can help you in any way you are going to have to get me back up to speed.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial