Answered by:
Issue with modalpopupextender When Using in a a Web Form with master Page

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