1

我需要像模态对话框一样打开一个页面。我在网上找到了一个例子，但它不起作用。

在主页中，我有以下代码：

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

当我单击按钮时，我需要打开下面的页面。我收到一个错误，告诉我无法识别元素 $。我不知道元素面板到底是谁。我必须添加一个面板控件，但是在哪里？

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

有人可以帮我处理这段代码，让它工作吗？谢谢

4

5 回答 5

0

您需要添加 jquery lib 引用。在页面顶部：

 <script src="http://code.jquery.com/jquery-1.8.2.min.js"/>
于 2012-10-31T09:47:50.717 回答
0

考虑在您正在使用的 jQuery 代码上方的页面上添加jQuery 脚本引用。

另外，添加参考jQuery UI

下载 jQuery

于 2012-10-31T09:47:59.000 回答
0

看起来您正在尝试使用 JQuery 将页面内容加载到面板中，但如果我正确阅读了您的代码，您可能没有包含 JQuery 库，您需要在<head>您的 html 代码中包含这行代码。您还在使用 JQueryUI 对话框，并且需要引用 JQueryUI 库

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

编辑：我还注意到您正在使用 JQuery UI 中的对话框，请确保您也参考 JQuery UI 工具包

编辑：已将您的代码剥离到 jsFiddle：http: //jsfiddle.net/EhPk7/1/ 这似乎对我有用

于 2012-10-31T09:50:46.650 回答
0

包括 jQuery。更改这一行 -> $panel = $('#' + panelID); 到 -> $panel = $('#div1'); 看看它是否有效。

于 2012-10-31T09:53:29.863 回答
0

jQueryUI 对话框上有一个名为 modal 的布尔属性/设置，这将创建一个模态类型的对话框。

我自己用这个：

d.dialog({  
            autoOpen: true,
            closeOnEscape: false,
            closeText: '',
            modal: true,
            draggable: false,
            resizable: false,
            width: (window.document.width * 0.75),
            dialogClass: 'popup loading',
            title: 'title'),

        });

当您将此类功能包装在

$(document).ready(function() { 

})

它应该在 DOM 准备好时弹出..

于 2012-10-31T10:06:00.163 回答