This is a migrated thread and some comments may be shown as answers.

Problem with Ajax AutoCompleteExtender inside a UserControl

0 Answers 361 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 10 Oct 2011, 10:04 AM

Please help, i've been tearing my hair out for days on this one !!

I have the autocompleteextender inside a usercontrol as follows :

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

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AutoControl.ascx.cs" Inherits="FormControls_AutoControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Assembly="DBauer.Web.UI.WebControls.DynamicControlsPlaceholder" Namespace="DBauer.Web.UI.WebControls" TagPrefix="DBWC" %>

<style type="text/css">
/* AutoComplete item */
.AutoComplete2_CompletionList
{
margin: 0px !important;      
background-color: white;            
color: black;            
border: buttonshadow;            
border-width: 1px;            
border-style: solid;            
cursor: 'default';            
overflow: auto;            
height: 200px;            
text-align: left;            
list-style-type: none;            
padding-left: 1px;
}

/*AutoComplete flyout */
.AutoComplete2_CompletionListItem
{
background-color: white;            
color: black;            
padding: 1px;            
cursor: hand;
}

/* AutoComplete highlighted item */
.AutoComplete2_HighlightedItem
{
background-color: #63B8FF;           
color: black;            
padding: 1px;
}

.AutoComplete2_img
{
background-image: url(~/images/autocomplete_leftcap.gif); background-position: right center; background-repeat: no-repeat;
}
</style>

<div id="divRenderEdit" runat="server" >
<asp:TextBox ID="txtValue" runat="server" Width="170px"  CssClass="AutoComplete2_img"></asp:TextBox>

<cc1:AutoCompleteExtender ID="AC1" runat="server"  ServicePath="~/WebService.asmx" ServiceMethod=""  UseContextKey="false"
     CompletionListCssClass="AutoComplete2_CompletionList" 
     CompletionListItemCssClass="AutoComplete2_CompletionListItem" 
     CompletionListHighlightedItemCssClass="AutoComplete2_HighlightedItem"         
     MinimumPrefixLength="1" TargetControlID="txtValue"  CompletionSetCount="20" CompletionInterval="1000"
     OnClientItemSelected="AC1_itemSelected" onclientpopulating="ShowImage" onclientpopulated="HideImage">
</cc1:AutoCompleteExtender>
<asp:Label id="lblRequired" runat="server" Text="*" ForeColor="Red" Visible="False" Font-Bold="True" Font-Size="14pt"></asp:Label>
<asp:HiddenField  ID="hdnID" runat="server" />
<asp:HiddenField ID="hdnAutoCompleteResultSet" runat="server" />
<asp:HiddenField ID="hdnIsRequired" value="N" runat="server" />
</div>
<div id="divRenderDisplay" runat="server" style="display:none;">
    <asp:Label ID="lblValue" runat="server" Text=""></asp:Label>
</div>

<script type="text/javascript">

function AC1_itemSelected(sender, e)
{
    var AC1Value = $get('<%= hdnID.ClientID %>');
    AC1Value.value = e.get_value();
}

function ShowImage()
{   
    var auto_txt = $get('<%= txtValue.ClientID %>');
   
    auto_txt.style.backgroundImage  = 'url(~/images/autocomplete_spinner.gif)';
    auto_txt.style.backgroundRepeat= 'no-repeat';                   
    auto_txt.style.backgroundPosition = 'right';

}
function HideImage()
{
   
    var auto_txt = $get('<%= txtValue.ClientID %>');   
    auto_txt.style.backgroundImage  = 'url(~/images/autocomplete_leftcap.gif)';
}

</script>

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

The ServiceMethod property is missing as it gets passed in dynamicaly via the property ACResultSet
on a page, just so I can have multiple instances of the control working with different entities, in this case companies and users.

I also have 2 web methods inside the web service as follows

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

[WebMethod]
    public string[] Company(string prefixText, int count)
    {               
        List<string> titleArList = new List<string>();

        string qry = "select companys.....;
        SubSonic.QueryCommand qc= new SubSonic.QueryCommand(qry);
         
        DataSet ds = SubSonic.DataService.GetDataSet(qc);
       
        for (int i = 0; i < ds.Tables[0].Rows.Count;i++ )
        {
            DataRow row = ds.Tables[0].Rows[i];           
            titleArList.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(row["CompanyName"].ToString(), row["CompanyID"].ToString()));
        }

        return titleArList.ToArray();
    }

[WebMethod]
    public string[] Person(string prefixText, int count)
    {       

        //return all records whose Title starts with the prefix input string        
        List<string> titleArList = new List<string>();

        string qry = "select users.....;
        SubSonic.QueryCommand qc= new SubSonic.QueryCommand(qry);
         
        DataSet ds = SubSonic.DataService.GetDataSet(qc);

        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            DataRow row = ds.Tables[0].Rows[i];           
            str.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(row["UserFullName"].ToString(), row["UserID"].ToString()));
        }
        return titleArList.ToArray();
    }

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

and the 2 instance controls for customers and users are respectively inside their own (usercontrol) pages which make up, with others, one big page when displayed on screen, are as follows :

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

<uc6:AutoControl ID="CompanyID" runat="server" DisplayName="Company" ValueWidth="250"
isRequired="false" DBField="CompanyID" ACResultSet="Company"/>

<uc6:AutoControl ID="UserID"  runat="server" DisplayName="User" ValueWidth="200"
isRequired="true"  DBField="UserID"  ACResultSet="Person" >

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

now to the knotty problem...........
Both controls work fine in terms of displaying the relevant data....but get this...I noticed a while ago something very strange...

Lets say for simplicity I have 3 companys, 1-Microsoft, 2-Apple, 3-IBM and 3 users 1-Bill Gates, 2-Steve Jobs, 3-Mr IBM (dont know anyone there) and I currently have selected 1-Microsoft and 1-Bill Gates (the two contols are mutually exclusive by the way, NOT linked in ANY logic)
When I change the user to 3-Mr IBM and SAVE the page, what actually happens is that the user control is ignored BUT the company has been saved as 3-IBM !!! (i.e the autocompleteextender has taken the correct ID 3 from the USER list and applied it to the COMPANY control instead !!!  HOW BIZARRE, HOW CAN THIS POSSIBLY BE ???

Ive done a view source on the page to make sure the clientid property of the hidden ID which the autocompleteextender saves the selected items ID to, is in fact distinct (i.e relevant only to its instance, as created) AND IT IS. Also in case you are wondering whether ive blundered elsewhere and simply made a schoolboy error when saving, you'd be wrong, ive checked it...THOROUGHLY.

I'm toying with the idea of creating 2 web services and trying that, dont know why, i'm clutching at straws I guess, I just can't fathom this behaviour. I would be very grateful if anyone could give me a clue to the answer.

Thanks in advance

No answers yet. Maybe you can help?

Tags
Ajax
Asked by
Simon
Top achievements
Rank 1
Share this question
or