Multipul instance of user control on same page

Question

I have a user control using Ajax dropdownextender ans asp control. I want to stop drop-down panel from colsing when user check any check box from panel. For that i use this java-script code

var DDE;
//Onload event set droparrow visibility to true
function DropDownExtender1_pageLoad() {
    
    DDE = $find('<%= DDE.ClientID%>');
    DDE._dropWrapperHoverBehavior_onhover();
    $get('<%= DropPanel.ClientID%>').style.width = $get('<%= txtDisplay.ClientID%>').clientWidth;

    if (DDE._dropDownControl) {
        $common.removeHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
    }
    DDE._dropDownControl$delegates = {
        click: Function.createDelegate(DDE, ShowMe),
        contextmenu: Function.createDelegate(DDE, DDE._dropDownControl_oncontextmenu)
    }
    $addHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);

    //dropdown arrow key allways visible.
    $find('<%= DDE.ClientID%>').unhover = doNothing;
    $find('<%= DDE.ClientID%>')._dropWrapperHoverBehavior_onhover();

    //Maintain scroll position
    var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
    document.getElementById('<%= divGrid.ClientID%>').scrollTop = h.value;

}

//do nothing on arrow key hover
function doNothing() { }

//Ragister onload event
Sys.Application.add_load(DropDownExtender1_pageLoad);

//Ragister on page load
function ShowMe() {
    DDE._wasClicked = true;
}

This works fine when i use only one instance of my control on aspx page. But when i use more then 1 instance on same page.At that time all things work fine except visibility of control.At that time when user clicks on any check box it hides the panel. But the last control of the form work perfectly fine. I mean to say that script is overwintered by the last control.

Can any one tell me what should i do in this case.

Answer 1

Finally i got a solution for this problem.I were removed global variable and changed function ShowMe name to ShowMe<%=this.ClientID%> and also update ShowMe<%=this.ClientID%> in delegate.And it works.

Updated Code

function DropDownExtender1_pageLoad() {
    var DDE;
    
    DDE = $find('<%= DDE.ClientID%>');
    DDE._dropWrapperHoverBehavior_onhover();
    $get('<%= DropPanel.ClientID%>').style.width = $get('<%= txtDisplay.ClientID%>').clientWidth;

    if (DDE._dropDownControl) {
        $common.removeHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);
    }
    DDE._dropDownControl$delegates = {
        click: Function.createDelegate(DDE, ShowMe<%=this.ClientID %>),
        contextmenu: Function.createDelegate(DDE, DDE._dropDownControl_oncontextmenu)
    }
    $addHandlers(DDE._dropDownControl, DDE._dropDownControl$delegates);

    //dropdown arrow key allways visible.
    $find('<%= DDE.ClientID%>').unhover = doNothing;
    $find('<%= DDE.ClientID%>')._dropWrapperHoverBehavior_onhover();

    //Maintain scroll position
    var h = document.getElementById('<%= hfScrollPosition.ClientID%>');
    document.getElementById('<%= divGrid.ClientID%>').scrollTop = h.value;
}

//do nothing on arrow key hover
function doNothing() { }

//Ragister onload event
Sys.Application.add_load(DropDownExtender1_pageLoad);

//Ragister on page load
function ShowMe<%=this.ClientID %>() {
    var DDE = $find('<%= DDE.ClientID%>');
    DDE._wasClicked = true;
}