Multiple Instances of single Autocomplete UserControl with HiddenFields in ASP .NET conflict

Question

I have a problem with my usercontrol when used twice in the same page. Following is my Locations usercontrol.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCLocations.ascx.cs" Inherits="UCLocations" EnableTheming="true" %>
<script type="text/javascript">
    $(function () {
        GetLocations();
    });
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        GetLocations();
    });
    function GetLocations() {
        $("[id$=txtLocation]").autocomplete({
            source: function (request, response) {
                AjaxCallSession("<%= ResolveUrl("~/CompanyControls/WebMethods.aspx/GetLocationsFiltered") %>", request.term, $("[id$=hfSession]").val(), response)
            },
            select: function (e, i) {
                $("[id$=hfLocation]").val(i.item.val);
            },
            minLength: 1
        });
        }
</script>
<asp:TextBox ID="txtLocation" runat="server" Visible="false"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server"/>
<asp:HiddenField ID="hfSession" runat="server"/>
<asp:Button ID="btnAddLocation" runat="server" Text="Add" OnClick="btnAddLocation_Click" Visible="false" />
<br />
<br />
<asp:GridView ID="grvLocations" runat="server" OnRowDeleting="grvLocations_RowDeleting" AutoGenerateColumns="false"
    DataKeyNames="Value" Visible="false">
    <Columns>
        <asp:BoundField DataField="Value" />
        <asp:BoundField DataField="Text" HeaderText="Location" />
        <asp:CommandField ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Content/Images/Delete.jpg" />
    </Columns>
</asp:GridView>

Following is the page where i am using my usercontrol.

<%@ Page Language="C#" CodeFile="Test.aspx.cs" Inherits="Test" MasterPageFile="~/UI/HomePage.master" %>

<%@ Register Src="~/CompanyControls/UCLocations.ascx" TagPrefix="uc1" TagName="UCLocations" %>


<asp:Content ContentPlaceHolderID="PageContent" runat="server">
    <div class="row">
        <div class="col-md-12 form-inline">
            <table class="table table-sm">
                <tr>
                    <td>
                        <uc1:UCLocations runat="server" ID="lc" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <uc1:UCLocations runat="server" ID="lc2" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</asp:Content>

Problem is everytime GetLocationsFiltered method is called, hfsession of first usercontrol is only being passed. How to resolve this conflict.

Making ClientIDMode to static didn't work (problem remains same, first hfsession gets passed), Also accesing control like $('#<%= hfSession.ClientID %>').val() also didn't work (Only second UC works, first one stopped working completely). Anyother suggestions.

Ajax Functions is as follows.

function AjaxCallSession(url, prefix, sessionkey, response) {
    $.ajax({
        url: url,
        data: "{ 'prefix': '" + prefix + "', 'sessionkey': '" + sessionkey + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function (r) {
            response($.map(r.d, function (item) {
                return {
                    label: item.split('|')[0],
                    val: item.split('|')[1]
                }
            }))
        },
        error: function (r) {
            alert(r.responseText);
        },
        failure: function (r) {
            alert(r.responseText);
        }
    });
}

Answer 1

Finally found the answer.

My Code didn't work due to the following issues.

1. Name conflict, as both the User Control's Jquery functions have same name, only the last rendered usercontrol is getting attached to the jquery autocomplete function, resolved this by adding <%= this.ID %> to my Jquery functions in user controls.

2. Control names conflicts, resolved this isuue by accessing the controls in my JQuery script by using clientID like this $("#<%=txtLocation.ClientID%>")

My final Usercontrol code is as follows.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCLocations.ascx.cs" Inherits="UCLocations" EnableTheming="true" %>
<script type="text/javascript">
    $(function () {
        GetLocations<%= this.ID %>();
    });
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        GetLocations<%= this.ID %>();
    });
    function GetLocations<%= this.ID %>() {
        $("#<%=txtLocation.ClientID%>").autocomplete({
            source: function (request, response) {
                AjaxCallSession("<%= ResolveUrl("~/CompanyControls/WebMethods.aspx/GetLocationsFiltered") %>", request.term, $('#<%= hfSession.ClientID %>').val(), response)
            },
            select: function (e, i) {
                $('#<%= hfLocation.ClientID %>').val(i.item.val);
            },
            minLength: 1
        });
        }
</script>
<asp:TextBox ID="txtLocation" runat="server" Visible="false"></asp:TextBox>
<asp:HiddenField ID="hfLocation" runat="server" />
<asp:HiddenField ID="hfSession" runat="server" />
<asp:Button ID="btnAddLocation" runat="server" Text="Add" OnClick="btnAddLocation_Click" Visible="false" />
<br />
<br />
<asp:GridView ID="grvLocations" runat="server" OnRowDeleting="grvLocations_RowDeleting" AutoGenerateColumns="false"
    DataKeyNames="Value" Visible="false">
    <Columns>
        <asp:BoundField DataField="Value" />
        <asp:BoundField DataField="Text" HeaderText="Location" />
        <asp:CommandField ShowDeleteButton="True" ButtonType="Image" DeleteImageUrl="~/Content/Images/Delete.jpg" />
    </Columns>
</asp:GridView>