ModalPopupExtender as a Status Box

Question

I have a ModalPopupExtender that I simple want to use as a Status Popup for when there is a long running background tasks.

<script language="javascript" type="text/javascript">
    function ShowInfoPopup(Caption, Message) {
        $find("<%= tcPopUpCaption.ClientID %>").innerHTML = Caption;
        $find("<%= tcPopUpMessage.ClientID %>").innerHTML = Message;
        $find("<%= mpe.ClientID %>").Show();
    }
</script>

<asp:LinkButton runat="server" ID="btnPopup" />
<asp:Panel ID="pnlInfoPopup" runat="server" Style="display: none;"
           Width="350px" CssClass="InfoPopup_Panel">
    <asp:Table ID="Table1" runat="server" CssClass="InfoPopup_Layout"
               Style="margin-bottom: 0px">
        <asp:TableRow CssClass="InfoPopup_ActionRow">
            <asp:TableCell BorderStyle="None">
                <asp:Button ID="btnClose" runat="server" Text="x"
                            ToolTip="Close" BorderStyle="Outset"
                            UseSubmitBehavior="false" OnCommand="doCommand"
                            CommandName="ClosePopUp" />
            </asp:TableCell>
        </asp:TableRow>
        <asp:TableHeaderRow Style="border-bottom: thick solid white">
        <asp:TableHeaderCell ID="tcPopUpCaption" Width="100%"
                                  BorderStyle="None" runat="server"
                                  Text="Popup Caption" />
        </asp:TableHeaderRow>
        <asp:TableRow>
        <asp:TableCell Width="50%" BorderStyle="None" runat="server"
                            ID="tcPopUpMessage" ClientIDMode="Static"
                            Text="Popup Message" />
        </asp:TableRow>
    </asp:Table>
</asp:Panel>
<asp:ModalPopupExtender ID="mpe" runat="server" PopupControlID="pnlInfoPopup"
                        BackgroundCssClass="mpeBackground" DropShadow="true"
                        TargetControlID="btnPopup" />

<asp:Button ID="btnS" runat="server" Text="Send" OnCommand="doCommand"
            CommandName="send" UseSubmitBehavior="false" Width="100px"
            Height="45px" ClientIDMode="Static"
            OnClientClick="ShowInfoPopup('Please wait...', 'Sending...')" />

<asp:Button ID="btnL" runat="server" Text="Load" OnCommand="doCommand"
            CommandName="load" UseSubmitBehavior="false" Width="100px"
            Height="45px" ClientIDMode="Static"
            OnClientClick="ShowInfoPopup('Just a sec...', 'Loading...')" />

When the user hits either one of the buttons (this is just an example scenario), it shows the popup with the relavant caption and message, and then does the normal Postback to execute the (long) task.

However, in the "ShowInfoPopup" script, the $find for the caption and message fail as it cannot find the controls, it returns NULL.

Any suggestions welcome please.

Answer 1

Use $get instead of $find to get reference on DOM element. $find should be used only for getting reference on client javascript objects.