Home/ Questions/Q 8758029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T14:26:41+00:00

I need to open a page like a modal dialog .I find an exemple

  • 0

I need to open a page like a modal dialog .I find an exemple on net but it doesn’t work.

In the main page I have this code:

 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
     <asp:Button Text ="Add New Course"  runat="server" ID="btnAddCourse" OnClientClick="showPanel('dialog');return false;"/>
      <script type="text/javascript">
            function showPanel(panelID) {
                $panel = $('#' + panelID);
                $.ajax({
                    url: "/AddNew.aspx",
                    type: "GET",
                    dataType: "html",
                    async: false,
                    data: { "param": "abcd"
                    },
                    success: function (obj) {
                        // obj will contain the complete contents of the page requested
                        // use jquery to extract just the html inside the body tag
                        $content = $(obj).find('body').html();
                        // then update the dialog contents with this and show it
                        $panel.html($content);
                        $panel.dialog();
                    }
                });
            }
    </script>
<div id="dialog">
</div>
</asp:Content>

When I click the button I need to open the page below .I receive an error that tell that element $ is not recognized.I don’t know exactly who is element panel .Must I add a panel control ,but where ?

     <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AddNew.aspx.cs" Inherits="WebApplicationDialog.AddNew" %>

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Add New Course </title>
 </head>
<body>
<form  >
<div id="div1">
<table>
<tr><td colspan="3"> <asp:Label ID="lblCourse" runat="server" Text="Add New Course"></asp:Label></td></tr>
<tr><td colspan="3"> </td></tr>
<tr>
   <td style="width:40%"> <asp:Label ID="lblName" runat="server" Text="Course Name" ></asp:Label></td>
   <td style="width:20%"> </td>
   <td style="width:40%"> 
       <input id="txtName" type="text" />
    </td>
</tr>
<tr>
   <td style="width:40%"> <asp:Label ID="lblDescription" runat="server" Text="Description" ></asp:Label></td>
   <td style="width:20%"> </td>
   <td style="width:40%">
      <input id="txtDescription" type="text" />

   </td>
</tr>
<tr><td colspan="3" style="float:right">
<input value ="Save"   id="btnSave" type="submit"  /> </td></tr>
</table>
</div>

</form>
</body>
</html>

Can somebody help me with this code ,to make it works ?
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like you are trying to use JQuery to load a page content into a panel but if I’m reading your code right you may not have included the JQuery library, you need to include this line of code in the <head> of your html code. You are also using JQueryUI dialog and will need to reference the JQueryUI library

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    For Example

    <head>
    <title>Page Title</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<head>

    EDIT: I also notice you are using the dialog, which is in JQuery UI, pleasse make sure you reference JQuery UI toolkit as well

    EDIT: Have stripped your code into jsFiddle: http://jsfiddle.net/EhPk7/1/
    this seems to work for me

    • 0