locked
ModalPopupExtender :TypeError: Cannot read property 'show' of null RRS feed

  • Question

  • User-375223641 posted

    Hello, I'm trying to show a popup ModalPopupExtender  from Javascript when clicks a button

    function GetDropDownData() {
       document.getElementById("<%=ModalPopupExtender1.ClientID%>").show(); 
        return false;
    }
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server" DropShadow="false"
    PopupControlID="pnlPopup" TargetControlID="btnCat" BackgroundCssClass="modalBackground" OkControlID="btnOK" >
    </cc1:ModalPopupExtender>
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none" >
    <div id="divheader" style="background-color:White;width:100%;">
    <iframe src="Catalog.aspx" style='height: 400px; width: 400px' scrolling='no' frameborder='0'></iframe><br />
    <asp:Button ID="btnOK" runat="server" EnableTheming="True" EnableViewState="False" Text="OK" Width="40px" />
    </div> 
    </asp:Panel>

    but it gives me Javascript runtime error

    TypeError: Cannot read property 'show' of null

    It works on another page but I don't know what is wrong here.

    Thank you

    Sunday, December 21, 2014 10:56 AM

Answers

  • User2103319870 posted

    elshorbagy

    document.getElementById("<%=ModalPopupExtender1.ClientID%>").show();

    Try accessing the modalpopupextender control using the find method instead of using document.getElementById like given below

      <script type="text/javascript">
            function GetDropDownData() {
            //Access the modal popup extender like given below
               $find("<%=ModalPopupExtender1.ClientID%>").show();
                return false;
            }
        </script>

    Refer this link for more details Show ModalPopupExtender in Javascript

    Another option is to use the BehaviourId in modal popupextender to access controls

     <script type="text/javascript">
            function GetDropDownData() {
            //Access the modal popup extender like given below
                $find("mpe").show();
                return false;
            }
        </script>

    You can find more details here

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 21, 2014 11:40 AM
  • User61956409 posted

    Hi elshorbagy,

    Thanks for your post.

    You could access the Modal Popup from Client Side using the ASP.Net ScriptManager $find function via BehaviorID property.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function ShowPopup() {
    
                $find("mpe").show();
    
                return false;
    
            }
    
            function hidePopup() {
                $find("mpe").hide();
    
                return false;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <div>
                <asp:Button ID="btnOpenFromJS" runat="server" Text="OpenFromJS" OnClientClick="return ShowPopup();"/>
                <asp:Button ID="btnOpen" runat="server" Text="Open" />
                <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="mpe" TargetControlID="btnOpen" PopupControlID="Panel1"></asp:ModalPopupExtender>
                <asp:Panel ID="Panel1" runat="server" Style="display: none">
                    Hello World
                <br />
                    <asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="return hidePopup();" />
                </asp:Panel>
            </div>
        </form>
    </body>
    </html>
    

    You could also refer to this article, it will show you how to Show (Open) and Hide (Close) ASP.Net AJAX ModalPopupExtender Modal Popup using JavaScript.

    Hope it will be helpful for you.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 23, 2014 12:25 AM

All replies

  • User2103319870 posted

    elshorbagy

    document.getElementById("<%=ModalPopupExtender1.ClientID%>").show();

    Try accessing the modalpopupextender control using the find method instead of using document.getElementById like given below

      <script type="text/javascript">
            function GetDropDownData() {
            //Access the modal popup extender like given below
               $find("<%=ModalPopupExtender1.ClientID%>").show();
                return false;
            }
        </script>

    Refer this link for more details Show ModalPopupExtender in Javascript

    Another option is to use the BehaviourId in modal popupextender to access controls

     <script type="text/javascript">
            function GetDropDownData() {
            //Access the modal popup extender like given below
                $find("mpe").show();
                return false;
            }
        </script>

    You can find more details here

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, December 21, 2014 11:40 AM
  • User-375223641 posted

    thank you but not working, the same error

    Sunday, December 21, 2014 11:53 AM
  • User61956409 posted

    Hi elshorbagy,

    Thanks for your post.

    You could access the Modal Popup from Client Side using the ASP.Net ScriptManager $find function via BehaviorID property.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function ShowPopup() {
    
                $find("mpe").show();
    
                return false;
    
            }
    
            function hidePopup() {
                $find("mpe").hide();
    
                return false;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
            <div>
                <asp:Button ID="btnOpenFromJS" runat="server" Text="OpenFromJS" OnClientClick="return ShowPopup();"/>
                <asp:Button ID="btnOpen" runat="server" Text="Open" />
                <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="mpe" TargetControlID="btnOpen" PopupControlID="Panel1"></asp:ModalPopupExtender>
                <asp:Panel ID="Panel1" runat="server" Style="display: none">
                    Hello World
                <br />
                    <asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="return hidePopup();" />
                </asp:Panel>
            </div>
        </form>
    </body>
    </html>
    

    You could also refer to this article, it will show you how to Show (Open) and Hide (Close) ASP.Net AJAX ModalPopupExtender Modal Popup using JavaScript.

    Hope it will be helpful for you.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 23, 2014 12:25 AM