473,396 Members | 1,722 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

jQuery Modal dialog form

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

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

Similar topics

2
by: martin de vroom | last post by:
Hi, I have a web page that opens a modal dialog (client side) in the following manner onclick="window.showModalDialog('/dialog.asp',null,'dialogHeight: 200px; dialogWidth: 400px; dialogTop:...
2
by: Matt | last post by:
I want to know how to submit the form data to a modal dialog window? The following is page1.asp, and when the user clicks submit button, it will post the form data to page2.asp by opening a new...
1
by: VM | last post by:
Is it possible to display a form as a modal dialog box where it's is not a top-level form? If I include it as a top-level form, I won't be able to access all the MDI children through it (by using...
10
by: Guadala Harry | last post by:
I have a modal dialog that currently does all of the following except item 4. 1. lets users select a graphic from a list of thumbnails (and when selected, displays the full-size image in a...
4
by: mpreston | last post by:
I'm following the example from the MSDN library on how to create modal dialog boxes in C#, but something isn't working properly. If I create a modal dialog box and show it using ShowDialog(), the...
0
by: sskala | last post by:
Hi, Hope you might have seen the new version of yahoo mail. When you click an attachment in your mail, it pops up a window which shows the progress of SCAN. The user won't be able to close it or...
1
by: dan.c.roth | last post by:
oForm.Close() vs this.Close() in a modal dialog. oFrom.Close() calls Form.Dispose() but this.Close() ,say in the click event of the Form, does not. I can think of the reason for this but is...
11
by: VK | last post by:
In the continuation of the discussion at "Making Site Opaque -- This Strategy Feasible?" and my comment at http://groups.google.com/group/comp.lang.javascript/msg/b515a4408680e8e2 I have...
3
pradeepjain
by: pradeepjain | last post by:
hii.. i use cope like this <td><a href='/login.php' id="view-user" >Pradeep</a></td> and defauly jquery dialog code <script type="text/javascript"> $(function() {...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.