Multiple ModalPopupExtenders on one page, each with javascript

Hello all gurus in the area of ASP.NET AJAX and JavaScript!

Here's the deal: I have a user control (ascx) that currently contains a help Button and a ModalPopupExtender showing a Panel. The idea is that the user clicks the button and the help info is presented in a modal popup on top of the page, with another button to close it.

The help info can very well be larger than the window, so I have to resize the modal popup on show. When the control is coded as below, the Panel is resized initially, however; if the parent page has a validation error and is resent to the client, the javascript on top never executes.

Here's the control markup:

<script type="text/javascript">
// Adjust for popup y = 130 and a small gap.
var myAdjustedHeight = getPageHeight() - 150;
if (document.getElementById('<% =pnlPopUp.ClientID %>')) {
  document.getElementById('<% =pnlPopUp.ClientID %>').style.height = myAdjustedHeight;
  document.getElementById('<% =pnlScroll.ClientID %>').style.height = myAdjustedHeight - 20;
}
</script>
<asp:button id="btnHelp" runat="server" text="Help" />
<asp:updatepanel i开发者_高级运维d="upPopUp" runat="server">
    <contenttemplate>
        <asp:panel id="pnlPopUp" runat="server" width="600">
            <div class="header" style="float: left;">
             Help
            </div>
            <asp:button id="btnClose" runat="server" text="Close" style="float: right; padding-bottom: 3px;" />
            <asp:panel id="pnlScroll" runat="server" scrollbars="Vertical" style="clear: both;">
                <asp:gridview id="grv" runat="server" autogeneratecolumns="true" showheader="false" gridlines="None" cellspacing="2" cellpadding="2">
                </asp:gridview>
            </asp:panel>
        </asp:panel>
    </contenttemplate>
</asp:updatepanel>
<ajaxtoolkit:modalpopupextender id="popUpExtender" 
  runat="server" backgroundcssclass="modalBackground" okcontrolid="btnClose" 
  targetcontrolid="btnHelp" popupcontrolid="pnlPopUp" x="100" y="130" />

(The GridView is filled with data in the Page_Load using a predefined DataSet in a basic fashion.)

I have tried to add this:

function pageLoad() {
    document.getElementById('<% =popUpExtender.ClientID %>').add_shown(adjustHeight);
}

(where adjustHeight() is a function containing the code from the top) but when it fires I get null back for the ModalPopupExtender - and indeed it never seems to be included into the markup sent down the wire.

BTW, I need to add at least two instances of this help button to present help info for several elements on the page. Hence, I can't use the BehaviorID property of the ModalPopupExtender, since it is piped straight out to the page and I get an id collision.

So, how do I fix this? Am I to move the ModalPopupExtender to the Page or can I solve this within the ascx control? If anyone has an idea on how to fix this, I would appreciate it.

---

Use this in your pageLoad:

$find('<% =popUpExtender.ClientID %>');

add_shown wouldn't exist for the HTML element, which document.getElementById returns.