By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,610 Members | 1,957 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,610 IT Pros & Developers. It's quick & easy.

jQuery Modal dialog form

P: 15
I'm new to developing in jQuery, so I'm probably doing this wrong. I'm loading a form into a modal dialog box and I'm trying to assign a click event to the button in the form, but I can't seem to get anything to happen. Below is the code. Thanks in advance.

jQuery:
Expand|Select|Wrap|Line Numbers
  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 Main Page
Expand|Select|Wrap|Line Numbers
  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 code for main page builds table above adding links that jQuery attaches click events to. The links look something like this:
<a id="form999999" href="SubForms/Order_02_Form_01.aspx?lineNumber=999999">Service Description</a>

.ASPX Form code
Expand|Select|Wrap|Line Numbers
  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 code mainly just generates the options for the dropdown list.
Jun 17 '08 #1
Share this Question
Share on Google+
1 Reply


P: 15
I updated the code so the load call matches the full number of parameters for the method. As such, the links no longer carry a get value. Below is the updated jQuery code:

Expand|Select|Wrap|Line Numbers
  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.  
Jun 17 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.