locked
Error Passing Value from a Modal Popup in ascx RRS feed

  • Question

  • User1769015664 posted

    The following code works fine if it is in an aspx form but it returns a NULL reference for innertext error if it is in an ascx form:

    <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>
    

    Monday, May 15, 2017 11:21 PM

Answers

  • User-271186128 posted

    Hi NJ2,

    I get the following error on line

    document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').innerText; 

    0x800a138f - JavaScript runtime error: Unable to set property 'innerText' of undefined or null reference

    Since, the TextBoxes are in the User Control, if you using F12 developer tools to check the elements, you can see the ID has changed.

    To prevent this behavior, you could set the ClientIDMode to "Static", code as below:

        <script type="text/javascript">
            function onModalOk() {
                document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').value;
                document.getElementById("TextBox3").innerText = $("#ddlEmp option:selected").text();
            }
        </script>
    
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
           <asp:TextBox ID="TextBox2" ClientIDMode="Static" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" ClientIDMode="Static" runat="server"></asp:TextBox>
    
            <asp:button id="Button1" runat="server" text="Button" />
    
            <asp:modalpopupextender id="ModalPopupExtender1" runat="server" 
                OnOkScript="onModalOk();"
    	        cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
    	        targetcontrolid="Button1" popupcontrolid="Panel1" 
    	        popupdraghandlecontrolid="PopupHeader" drag="true" 
    	        backgroundcssclass="ModalPopupBG">
            </asp: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" ClientIDMode="Static" runat="server"  AutoCompleteType="Disabled"></asp:textbox>
                        
                    </p>
                    <p>
                        <asp:Label ID="lblCompany" runat="server" Text="Company:"></asp:Label>
                        <asp:DropDownList ID="ddlEmp" ClientIDMode="Static" 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>

    Also, you could also use JQuery class selector to find the elements, instead of using ID selector.

    Besides, by the way, I suggest you check your code, I'm not sure why you set the AutoPostBack property to true on the DropDownList. In my code, I remove this property. And, I use the following code to get/set textbox value. It works well on my side.

            function onModalOk() {
                document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').value;
                document.getElementById("TextBox3").innerText = $("#ddlEmp option:selected").text();
            }

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 16, 2017 8:30 AM

All replies

  • User1769015664 posted

    I get the following error on line

    document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').innerText; 

    0x800a138f - JavaScript runtime error: Unable to set property 'innerText' of undefined or null reference

    Tuesday, May 16, 2017 4:37 AM
  • User-271186128 posted

    Hi NJ2,

    I get the following error on line

    document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').innerText; 

    0x800a138f - JavaScript runtime error: Unable to set property 'innerText' of undefined or null reference

    Since, the TextBoxes are in the User Control, if you using F12 developer tools to check the elements, you can see the ID has changed.

    To prevent this behavior, you could set the ClientIDMode to "Static", code as below:

        <script type="text/javascript">
            function onModalOk() {
                document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').value;
                document.getElementById("TextBox3").innerText = $("#ddlEmp option:selected").text();
            }
        </script>
    
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
           <asp:TextBox ID="TextBox2" ClientIDMode="Static" runat="server"></asp:TextBox>
            <asp:TextBox ID="TextBox3" ClientIDMode="Static" runat="server"></asp:TextBox>
    
            <asp:button id="Button1" runat="server" text="Button" />
    
            <asp:modalpopupextender id="ModalPopupExtender1" runat="server" 
                OnOkScript="onModalOk();"
    	        cancelcontrolid="btnCancel" okcontrolid="btnOkay" 
    	        targetcontrolid="Button1" popupcontrolid="Panel1" 
    	        popupdraghandlecontrolid="PopupHeader" drag="true" 
    	        backgroundcssclass="ModalPopupBG">
            </asp: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" ClientIDMode="Static" runat="server"  AutoCompleteType="Disabled"></asp:textbox>
                        
                    </p>
                    <p>
                        <asp:Label ID="lblCompany" runat="server" Text="Company:"></asp:Label>
                        <asp:DropDownList ID="ddlEmp" ClientIDMode="Static" 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>

    Also, you could also use JQuery class selector to find the elements, instead of using ID selector.

    Besides, by the way, I suggest you check your code, I'm not sure why you set the AutoPostBack property to true on the DropDownList. In my code, I remove this property. And, I use the following code to get/set textbox value. It works well on my side.

            function onModalOk() {
                document.getElementById("TextBox2").innerText = document.getElementById('TextBox1').value;
                document.getElementById("TextBox3").innerText = $("#ddlEmp option:selected").text();
            }

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 16, 2017 8:30 AM
  • User1769015664 posted

    Thanks!

    Tuesday, May 16, 2017 2:15 PM