Autocompleteextender and button event not fire in updatepatel

Question

Here In my code I create one user control. Put two textbox with autocompleteextender and submit button. After access two textbox , submit button Click event not fire. What is wrong in code. Please help me.When I put the updatepanel after that it's not working. I need update panel because two textbox autopostback property is true.

<asp:UpdatePanel runat="server" ID="UpQuote" UpdateMode="Always">
    <ContentTemplate>
        <div id="Quote">
            <table>
                <tr>
                    <td class="tbltdForQuote">
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label runat="server" ID="lblTitle" Text="Get an instant quote" CssClass="lblForQuote"
                            Font-Size="Large"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td class="tbltdForQuote">
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label runat="server" ID="lblTo" Text="Pick-up Location e.g. Heathrow" CssClass="lblForQuote"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox runat="server" ID="txtTo" AutoPostBack="true" autocomplete="off" CssClass="txtBoxForQuote" />
                        <ajaxToolkit:AutoCompleteExtender runat="server" BehaviorID="AutoCompleteEx1" ID="autoComplete1"
                            TargetControlID="txtTo" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList"
                            MinimumPrefixLength="1" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20"
                            CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"
                            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :"
                            ShowOnlyCurrentWordInCompletionListItem="true">
                            <Animations>
                    <OnShow>
                        <Sequence>
                            <%-- Make the completion list transparent and then show it --%>
                            <OpacityAction Opacity="0" />
                            <HideAction Visible="true" />

                            <%--Cache the original size of the completion list the first time
                                the animation is played and then set it to zero --%>
                            <ScriptAction Script="
                                // Cache the size and setup the initial size
                                var behavior = $find('AutoCompleteEx1');
                                if (!behavior._height) {
                                    var target = behavior.get_completionList();
                                    behavior._height = target.offsetHeight - 2;
                                    target.style.height = '0px';
                                }" />

                            <%-- Expand from 0px to the appropriate size while fading in --%>
                            <Parallel Duration=".2">
                                <FadeIn />
                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx1')._height" />
                            </Parallel>
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <%-- Collapse down to 0px and fade out --%>
                        <Parallel Duration=".4">
                            <FadeOut />
                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx1')._height" EndValue="0" />
                        </Parallel>
                    </OnHide>
                            </Animations>
                        </ajaxToolkit:AutoCompleteExtender>
                    </td>
                </tr>
                <tr>
                    <td class="tbltdForQuote">
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label runat="server" ID="lblFrom" Text="Drop-off Location e.g.E1 (Postcode)"
                            CssClass="lblForQuote"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:TextBox ID="txtFrom" AutoPostBack="true" runat="server" autocomplete="off" CssClass="txtBoxForQuote" />
                        <ajaxToolkit:AutoCompleteExtender runat="server" BehaviorID="AutoCompleteEx" ID="AutoCompletetxtFrom"
                            TargetControlID="txtFrom" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList"
                            MinimumPrefixLength="1" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20"
                            CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"
                            CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :"
                            ShowOnlyCurrentWordInCompletionListItem="true">
                            <Animations>
                    <OnShow>
                        <Sequence>
                            <%-- Make the completion list transparent and then show it --%>
                            <OpacityAction />
                            <HideAction Visible="true" />

                            <%--Cache the original size of the completion list the first time
                                the animation is played and then set it to zero --%>
                            <ScriptAction Script="
                                // Cache the size and setup the initial size
                                var behavior = $find('AutoCompleteEx');
                                if (!behavior._height) {
                                    var target = behavior.get_completionList();
                                    behavior._height = target.offsetHeight - 2;
                                    target.style.height = '0px';
                                }" />

                            <%-- Expand from 0px to the appropriate size while fading in --%>
                            <Parallel Duration=".2">
                                <FadeIn />
                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
                            </Parallel>
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <%-- Collapse down to 0px and fade out --%>
                        <Parallel Duration="1">
                            <FadeOut />
                            <Length PropertyKey="hight" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
                        </Parallel>
                    </OnHide>
                            </Animations>
                        </ajaxToolkit:AutoCompleteExtender>
                    </td>
                </tr>
                <tr>
                    <td class="tbltdForQuote">
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button runat="server" ID="btnQuoteSubmit" Text="Get Quote >>" UseSubmitBehavior="false"
                            CssClass="QuoteButton" OnClick="btnQuoteSubmit_Click" CausesValidation="false" />
                    </td>
                </tr>
                <tr>
                    <td style="float: right">
                        <asp:HyperLink runat="server" ID="HyLogin" Text="Login to your account >>"></asp:HyperLink>
                    </td>
                </tr>
            </table>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

I found the answer after long search. Basically autocompleteextender not working in user control. because they use webmethod and it's only working on web page not user control

Answer 2

There are two things you can try. 1. Set the AutoPostBack="True" property in your button declaration. Or if that doesn't work, 2. Take the button out of the update panel.