jQuery模式对话框

  • 时间:
  • 分类: Python

我是在jQuery中进行开发的新手,所以我可能这样做是错误的.我正在将一个表单加载到一个模式对话框中,并试图为该表单中的按钮分配一个Click事件,但似乎无法使任何事情发生.以下是代码.先谢谢你.
JQuery:

选择 | 换行 | 行号
  1. jQuery(document).ready(function()
  2. {
  3.     jQuery("a[@id*=form]").click(function()
  4.     {
  5.         jQuery("#dialog").dialog({
  6.             modal: true,
  7.             autoOpen: false,
  8.             width: 600,
  9.             dialogClass: "flora",
  10.             overlay: {opacity: 0.5, background: "black"}
  11.         });
  12.         jQuery("#dialog").load(jQuery(this).attr("href") + " form[@id*=order] fieldset",setFormClick());
  13.         jQuery("#dialog").dialog("open");
  14.         return false;
  15.     });
  16.  
  17.     function setFormClick()
  18.     {
  19.         jQuery('#dialog input[@id*=update]').click(function()
  20.         {
  21.             alert("It works");
  22.         });
  23.     }
  24. }
  25.  

.aspx主页

选择 | 换行 | 行号
  1. <%@ Page Language="C#" AutoEventWireUp=true CodeFile="Order_02_ServiceAdmin.aspx.cs" Inherits="_Default" %>
  2. <?xml version="1.0" encoding="iso-8859-1"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.         <link href="/custom/applications/appStyles.css" rel="stylesheet" type="text/css" media="screen" />
  8.         <link rel="stylesheet" href="/custom/applications/jquery.ui-1.5/themes/flora/flora.dialog.css" type="text/css" media="screen" />
  9.         <script type="text/javascript" src="/custom/applications/jquery.ui-1.5/jquery-1.2.6.js"></script>
  10.         <script type="text/javascript" src="/custom/applications/jquery.ui-1.5/ui/ui.core.js"></script>
  11.         <script type="text/javascript" src="/custom/applications/jquery.ui-1.5/ui/ui.dialog.js"></script>
  12.         <script type="text/javascript" src="javascript/Order_02_functions.js"></script>
  13.     </head>
  14.     <body>
  15.         <form id="Order_02" runat="server">
  16.                 <div id="dialog"></div><!--Form inserted here-->
  17.                 <!--Irrelevant code here-->
  18.         <div style="float: left; width: 40%; height: 100%;">
  19.             <fieldset style="overflow: auto">
  20.                 <legend>Selected Services</legend>
  21.                 <asp:table ID="servicesSelected" runat="server" Caption="No Services Selected" EnableViewState="false">
  22.                     <asp:tableheaderrow CssClass="eth">
  23.                         <asp:tableheadercell>
  24.                             Service (Click to input details)
  25.                         </asp:tableheadercell>
  26.                         <asp:tableheadercell>
  27.                         </asp:tableheadercell>
  28.                         <asp:tableheadercell>
  29.                             Status
  30.                         </asp:tableheadercell>
  31.                         <asp:tableheadercell>
  32.                             Notes
  33.                         </asp:tableheadercell>
  34.                     </asp:tableheaderrow>
  35.                 </asp:table>    
  36.             </fieldset>
  37.         </div>
  38.                 <!--Irrelevant code here-->
  39.          </form>
  40.     </body>
  41. </html>
  42.  

主页的.cs代码构建上面的表格,添加jQuery将点击事件附加到的链接.这些链接如下所示:
服务描述
.aspx表单代码

选择 | 换行 | 行号
  1. <%@ Page Language="C#" AutoEventWireUp=true CodeFile="Order_02b_Form_01.aspx.cs" Inherits="_Default" %>
  2. <?xml version="1.0" encoding="iso-8859-1"?>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5.     <head>
  6.         <link href="/custom/applications/appStyles.css" rel="stylesheet" type="text/css" media="screen" />
  7.     </head>
  8.     <body>
  9.         <form id="order01" runat="server">
  10.             <fieldset id="01" class="generalFieldsetStyle">
  11.                 <legend></legend>
  12.                 <p>
  13.                         <label for="t01_COUNTY"><span class="importantText" >*</span>County:&nbsp;</label>
  14.                         <asp:textbox ID="t01_COUNTY" runat="server" MaxLength="30"/><span id="reqCounty" style="color: red; visibility: hidden">Please enter the name of the county</span><br/>
  15.                          <label for="t01_STATE_PROVINCE">
  16.                              <span class="importantText">*</span>State:&nbsp;
  17.                          </label>
  18.                         <asp:dropdownlist id="t01_STATE_PROVINCE" runat="server">
  19.                             <asp:listitem value="" Text=""></asp:listitem>
  20.                             <asp:listitem value="NY" Text="NY"></asp:listitem>
  21.                         </asp:dropdownlist>
  22.                         <span id="reqState" style="color: red; visibility: hidden">Please select a state</span><br/>
  23.                         <input id="update01" name="update01" type="button" value="Update" />
  24.                 </p>
  25.             </fieldset>
  26.        </form>
  27.     </body>
  28. </html>
  29.  

.cs代码主要只是生成下拉列表的选项.

# 回答1


我更新了代码,以便Load调用匹配该方法的全部参数.因此,这些链接不再带有GET值.以下是更新后的jQuery代码:

选择 | 换行 | 行号
  1. jQuery(document).ready(function()
  2. {
  3.     jQuery("a[@id*=form]").click(function()
  4.     {
  5.         var lNum = $(this).attr("id");
  6.         lNum = lNum.substring(4, lNum.length);
  7.         jQuery("#dialog").dialog({
  8.             modal: true,
  9.             autoOpen: false,
  10.             width: 600,
  11.             dialogClass: "flora",
  12.             overlay: {opacity: 0.5, background: "black"}
  13.         });
  14.         jQuery("#dialog").load(jQuery(this).attr("href") + " form[@id*=order] fieldset", {lineNumber: lNum}, setFormClick());
  15.         jQuery("#dialog").dialog("open");
  16.         return false;
  17.     });
  18.  
  19.     function setFormClick()
  20.     {
  21.         jQuery('#dialog input[@id*=update]').click(function()
  22.         {
  23.  
  24.             alert("It works");
  25.         });
  26.     }
  27. });
  28.  
  29.  

标签: Javascript

添加新评论