locked
Issue with modalpopupextender When Using in a a Web Form with master Page RRS feed

  • Question

  • User1769015664 posted

    The following code works fine when it is in a web form, but, it doesn't work if I have it on a form with master Page. I get a Null reference error on the highlighted line below.

    <link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
    <style type="text/css">
     .ModalPopupBG
    {
        background-color: #666699;
        filter: alpha(opacity=50);
        opacity: 0.7;
    }
    
    .HellowWorldPopup
    {
        min-width:200px;
        min-height:150px;
        background-color:burlywood;
        border-width: 3px;
        border-style: solid;
        border-color: brown;
    }
    .PopupHeader
    {
        background:green;
        background-color:navy;
        color:yellow;
    }
    </style>
    <script>
        function onModalOk()
        {
            document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').innerText; 
            document.getElementById("TextBox3").innerText = $("#ddlEmp option:selected").text();
        }
        </script>
    
      <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
    
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    
            <asp:button id="Button1" runat="server" text="Button" />
    
            <ajaxToolkit:modalpopupextender id="ModalPopupExtender1" runat="server" 
                OnOkScript="onModalOk();"
    	        cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
    	        targetcontrolid="Button1" popupcontrolid="Panel1" 
    	        popupdraghandlecontrolid="PopupHeader" drag="true" 
    	        backgroundcssclass="ModalPopupBG">
            </ajaxToolkit:modalpopupextender>
    
            <asp:panel id="Panel1" style="display: none" runat="server">
    	        <div class="HellowWorldPopup">
                    <div class="PopupHeader" id="PopupHeader">People Search</div>
                <div class="popup_Body">
                    <p>Enter you name:
                        <asp:textbox id="TextBox1" runat="server"  AutoCompleteType="Disabled"></asp:textbox>
                        
                    </p>
                    <p>
                        <asp:Label ID="lblCompany" runat="server" Text="Company:"></asp:Label>
                        <asp:DropDownList ID="ddlEmp" runat="server" AutoPostBack="true">
                            <asp:ListItem Text="Company1" Value="1"></asp:ListItem>
                              <asp:ListItem Text="Company2" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                    </p>
                </div>
                    <div class="Controls">
                        <input id="btnOkay" type="button" value="Done" />
                        <input id="btnCancel" type="button" value="Cancel" />
    		        </div>
                 </div>
    
            </asp:panel>

    Wednesday, May 3, 2017 8:14 PM

Answers

  • User-707554951 posted

    Hi NJ2,

    Try to use the following code:

       <script type="text/javascript" >
          function onModalOk()
        {       
           document.getElementById("<%=TextBox2.ClientID %>").innerText =$("#<%=TextBox1.ClientID %>").val();
           document.getElementById("<%=TextBox3.ClientID %>").innerText = $("#<%=ddlEmp.ClientID %> option:selected").text();
        }    
      
        </script>

    Full working example as below:

    in master page:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Test master page.master.cs" Inherits="CaseTest.Test.Test_master_page" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>       
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>       
        <asp:ContentPlaceHolder ID="head" runat="server">
    
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <h3> Issue with modalpopupextender When Using in a a Web Form with master Page</h3>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
         
            </asp:ContentPlaceHolder>
        </div>
        </form>
    </body>
    </html>
    

    in content page:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Test/Test master page.Master" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="CaseTest.Test.WebForm6" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    
    <style type="text/css">
     .ModalPopupBG
    {
        background-color:red;
        filter: alpha(opacity=50);
        opacity: 0.7;
    }
    
    .HellowWorldPopup
    {
        min-width:200px;
        min-height:150px;
        background-color: burlywood;
        border-width: 3px;
        border-style: solid;
        border-color: brown;
    }
    .PopupHeader
    {
        background:green;
        background-color: brown;
        color:yellow;
    }
    </style>
          <script type="text/javascript" >
          function onModalOk()
        {       
           document.getElementById("<%=TextBox2.ClientID %>").innerText =$("#<%=TextBox1.ClientID %>").val();
           document.getElementById("<%=TextBox3.ClientID %>").innerText = $("#<%=ddlEmp.ClientID %> option:selected").text();
        }    
      
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
          <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
    
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
    
            <asp:button id="Button1" runat="server" text="Button" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        </asp:UpdatePanel>
            <ajaxToolkit:modalpopupextender id="ModalPopupExtender1" runat="server" 
                 OnOkScript="onModalOk()"
    	        cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
    	        targetcontrolid="Button1" popupcontrolid="Panel1" 
    	        popupdraghandlecontrolid="PopupHeader" drag="true" 
    	        backgroundcssclass="ModalPopupBG">
            </ajaxToolkit:modalpopupextender>
    
            <asp:panel id="Panel1" style="display: none" runat="server">
    	        <div class="HellowWorldPopup">
                    <div class="PopupHeader" id="PopupHeader">People Search</div>
                <div class="popup_Body">
                    <p>Enter you name:
                        <asp:textbox id="TextBox1" runat="server"  AutoCompleteType="Disabled" Text=""></asp:textbox>
                        
                    </p>
                    <p>
                        <asp:Label ID="lblCompany" runat="server" Text="Company:"></asp:Label>
                        <asp:DropDownList ID="ddlEmp" runat="server"  >
                            <asp:ListItem Text="Company1" Value="1"></asp:ListItem>
                              <asp:ListItem Text="Company2" Value="2"></asp:ListItem>
                        </asp:DropDownList>
                    </p>
                </div>
                    <div class="Controls">
                        <input id="btnOkay" type="button" value="Done" />
                        <input id="btnCancel" type="button" value="Cancel" />
    		        </div>
                 </div>
    
            </asp:panel>
        
    </asp:Content>
    

    Output screenshot as below:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 4, 2017 4:13 AM