Same JavaScript for multiple instances of user control not working

Question

I am using a user control in my website which performs the functionality of auto complete textbox. I have used JavaScript for the keydown and onfocus client events. This is the code:

<script language="JavaScript" type="text/javascript">
function TriggeredKey(e) {
    var keycode;
    if (window.event) keycode = window.event.keyCode;
    if (keycode == 9) {
        document.getElementById("<%=pnlSearch.ClientID %>").style.visibility = 'hidden';
        document.getElementById("<%=pnlSearch.ClientID %>").style.display = 'none';
    }
    else {
        document.getElementById("<%=hdfkey.ClientID %>").value = keycode;
    }
    _dopostback();
}


function pasteIntoInput(el) {
    var text = document.getElementById("<%=txtSearch.ClientID %>").value;
    if (typeof text != "undefined" && text != "") {
        el.focus();
        el.value = el.value;
        if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
            var val = el.value;
            var selStart = el.selectionStart;
            el.value = val.slice(0, selStart) + val.slice(el.selectionEnd);
            el.selectionEnd = el.selectionStart = selStart + text.length;
        }
        else if (typeof document.selection != "undefined") {
            el.focus();
        }
    }
}

When I use a single instance of this control in my aspx page it works fine but when I use more than one instances in my aspx page the JavaScript of all of the controls is overwritten by the last instance of the control in my page and no other control works.

Answer 1

Here's how I've dealt with problems like this in the past...

A block like this goes in an external js file referenced in the control ascx.

    function UserControl() {
    }

    UserControl.prototype = {       
        DoStuff : function() {
                var x = this.clientID; 
                window.alert(this.pnlSearchClientID);
            },
        TriggeredKey : function(e) {
                var keycode;
                if (window.event) keycode = window.event.keyCode;
                if (keycode == 9) {
                    document.getElementById(this.pnlSearchClientID).style.visibility = 'hidden';
                    document.getElementById(this.pnlSearchClientID).style.display = 'none';
                }
                _dopostback();
            },
        pasteIntoInput : function() {
            var text = document.getElementById(this.txtSearchClientID).value;
        }
    };

A block like this goes in the ascx file:

<script type="text/javascript">
    function UserControl<%=this.ClientID%>() {
        this.pnlSearchClientID = <%=pnlSearch.ClientID%>;
        this.txtSearchClientID = <%=txtSearch.ClientID%>;
    }
    UserControl<%=this.ClientID%> = UserControl.prototype;

</script>

And then in the page including the user control:

<script type="text/javascript">
    var inst1 = new UserControl<%=instance.ClientID %>();  
    inst1.DoStuff();
</script>

The idea is that you have a base class with the functionality you need, shared across all instances of the user control. Then a derived class per instance of the user control, with a new constructor setting properties for all of the instance-specific date (ie the ids of the controls composing the user control). The base class references these properties. The derived class is named using the ClientID of the user control, making it unique on the page.

I don't have access to an asp.net ATM so there are probably errors in here...