Question

I am trying to activate a modal popup using ajaxtoolkit. I’m trying to show the popup with javascript. however, the javascript does not recognize the element ALTHOUGH that in the dynamic page created everything seems fine and the <%=PleaseWaitPopupModal.ClientID %> is correctly translated to the right name of the corresponding panel.

Does anyone has an idea why the x var in the javascript function is null????

These pieces of code lye inside a child page (i.e. they have a masterpage, so I an forced to use the %= thing).

function btnSendClientClick() {
    var x = document.getElementById("<%=PleaseWaitPopupModal.ClientID %>");
    x.show();



<asp:Button ID="btnSend" runat="server"
OnClientClick="btnSendClientClick()" OnClick="btnSend_Click"
CausesValidation="true" Text="send" />

<asp:Button ID="btnStam3" runat="server" Text="" Style="display: none;" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="PleaseWaitPopupModal" TargetControlID="btnStam3"
    PopupControlID="pnlPleaseWait" BackgroundCssClass="modalBackground" DropShadow="false"
    RepositionMode="RepositionOnWindowScroll">
</ajaxToolkit:ModalPopupExtender>

<asp:Panel ID="pnlPleaseWait" runat="server" Style="display: none;">
    <div style="margin: auto;">
        Please wait...
    </div>
</asp:Panel>

any help is appreciated. thanks in advanced.

Answer 1

Use the $find() method, like so:

$find('PleaseWaitPopupModal').show();

and

$find('PleaseWaitPopupModal').hide();

The other thing you may have to do is set a BehaviourID:

BehaviourID="PleaseWaitPopupModal"