Multiple Instances of ASP.NET UserControl with query Autocomplete on same page

Question

I'm quite new to jquery and javascript programming in general so please be patient.

I have an ASP.NET web user control (region.ascx) that contains an instance of the jquery autocomplete plugin. The jquery code (i have cutoff the code for brevity) is this:

$(function () {
    initializerRegion();
});

var prmInstance = Sys.WebForms.PageRequestManager.getInstance();

prmInstance.add_endRequest(function () {
    //you need to re-bind your jquery events here 
    initializerRegion();
});

function initializerRegion() {

    $($get('<%= autoRegion.ClientID %>')).autocomplete({
        source: function (request, response) {..........................

The control works fine when there is only one instance of the control on an asp.net page. I have a situation where I have two separate user controls (Org.ascx and Place.ascx) that each have an instance of region.ascx that are on a single asp.net page, therefor i end up with 2 instances of the above code. When this is the case only the last instance (for place.ascx) is initialized correctly and works. The other instance (org.ascx) doesn't do anything.

I think I may be able to get around this by putting the Initializer code above into each of the controls that needs it, essentially getting rid of my region.ascx control. I have a feeling that if I do this and make the names of the initializer functions unique it may work.

My question is: Am I doing this correctly? Is there a way around this?

Answer 1

The problem in your code is that prmInstance variable and initializerRegion function declared in global execution context. So the last control overrides initializerRegion function definition. To fix this you may wrap all your code in self called function like below:

(function () {
    var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
    prmInstance.add_endRequest(function () {
        //you need to re-bind your jquery events here 
        initializerRegion();
    });

    var initializerRegion = function () {
        $('#<%= autoRegion.ClientID %>').autocomplete({
            source: function (request, response) {
                //......
            },
            //......
        });

        $(function () {
            initializerRegion();
        });
    })();

This code works well for me:

ascx:

<script type="text/javascript">
    (function () {
        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();
        prmInstance.add_endRequest(function () {
            initialize();
        });

        var initialize = function () {
            $("#<%= TextBox1.ClientID %>").on("keyup", function () {
                alert(this.value);
            });
        };

        $(function () {
            initialize();
        });
    })();
</script>
<asp:TextBox runat="server" ID="TextBox1" />

aspx:

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:WebUserControl2 runat="server" ID="ucWebUserControl2" />
        <asp:Button Text="Click Me" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <uc:WebUserControl2 runat="server" ID="WebUserControl1" />
        <asp:Button Text="Click Me" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

Answer 2

The code

$(function () {
    initializerRegion();
});

Is the root of your problem. This translates to $document.Ready() which can be handled only once. So instead of having this region at your user control level, it should always be at page level. In the mentioned scenario you have two instances of the same user control, but instead of that if you had two separate user controls with the similar initialization, your code would have still failed.

Place the above code in the page in which the user controls are added and your code should work fine.

Let me know whether this works for you or not.

Answer 3

you can use jquery instead of asp.nettoolkit autocomplete and it will allow you use as many automplete that you want

<script type="text/javascript">
    $(function () {
        $("#txtBoxWord").autocomplete({
            source: function (request, response) {

                $.ajax({
                    url: "AutoComplete.asmx/GetCompletionList",
                    data: "{ 'prefixText': '" + request.term + "','count':'10',contextKey:" + comboboxLang.GetSelectedIndex() + " }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        $(".ui-autocomplete").css("width", "340px");
                        if (comboboxLang.GetSelectedIndex() == 0) {
                            $(".ui-autocomplete").css("direction", "ltr");
                        }
                        if (comboboxLang.GetSelectedIndex() == 1) {
                            $(".ui-autocomplete").css("direction", "rtl");
                        }
                        response($.map(data.d, function (item) {
                            return {
                                value: item
                            };
                        }));
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 1

        });
    });
</script>

and this is a good example
Three different way of using jquery autocomplete with asp.net