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

 
jQuery(document).ready(function()

{

    jQuery("a[@id*=form]").click(function()

    {

        jQuery("#dialog").dialog({

            modal: true,

            autoOpen: false,

            width: 600,

            dialogClass: "flora",

            overlay: {opacity: 0.5, background: "black"}

        });

        jQuery("#dialog").load(jQuery(this).attr("href") + " form[@id*=order] fieldset",setFormClick());

        jQuery("#dialog").dialog("open");

        return false;

    });
 
    function setFormClick()

    {

        jQuery('#dialog input[@id*=update]').click(function()

        {

            alert("It works");

        });

    }

}

.ASPX Main Page

Expand|Select|Wrap|Line Numbers

 
<%@ Page Language="C#" AutoEventWireUp=true CodeFile="Order_02_ServiceAdmin.aspx.cs" Inherits="_Default" %>

<?xml version="1.0" encoding="iso-8859-1"?>

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

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <link href="/custom/applications/appStyles.css" rel="stylesheet" type="text/css" media="screen" />

        <link rel="stylesheet" href="/custom/applications/jquery.ui-1.5/themes/flora/flora.dialog.css" type="text/css" media="screen" />

        <script type="text/javascript" src="/custom/applications/jquery.ui-1.5/jquery-1.2.6.js"></script>

        <script type="text/javascript" src="/custom/applications/jquery.ui-1.5/ui/ui.core.js"></script>

        <script type="text/javascript" src="/custom/applications/jquery.ui-1.5/ui/ui.dialog.js"></script>

        <script type="text/javascript" src="javascript/Order_02_functions.js"></script>

    </head>

    <body>

        <form id="Order_02" runat="server">

                <div id="dialog"></div><!--Form inserted here-->

                <!--Irrelevant code here-->

        <div style="float: left; width: 40%; height: 100%;">

            <fieldset style="overflow: auto">

                <legend>Selected Services</legend>

                <asp:table ID="servicesSelected" runat="server" Caption="No Services Selected" EnableViewState="false">

                    <asp:tableheaderrow CssClass="eth">

                        <asp:tableheadercell>

                            Service (Click to input details)

                        </asp:tableheadercell>

                        <asp:tableheadercell>

                        </asp:tableheadercell>

                        <asp:tableheadercell>

                            Status

                        </asp:tableheadercell>

                        <asp:tableheadercell>

                            Notes

                        </asp:tableheadercell>

                    </asp:tableheaderrow>

                </asp:table>    

            </fieldset>

        </div>

                <!--Irrelevant code here-->

         </form>

    </body>

</html>

.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

 
<%@ Page Language="C#" AutoEventWireUp=true CodeFile="Order_02b_Form_01.aspx.cs" Inherits="_Default" %>

<?xml version="1.0" encoding="iso-8859-1"?>

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

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <link href="/custom/applications/appStyles.css" rel="stylesheet" type="text/css" media="screen" />

    </head>

    <body>

        <form id="order01" runat="server">

            <fieldset id="01" class="generalFieldsetStyle">

                <legend></legend>

                <p>

                        <label for="t01_COUNTY"><span class="importantText" >*</span>County:&nbsp;</label>

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

                         <label for="t01_STATE_PROVINCE">

                             <span class="importantText">*</span>State:&nbsp;

                         </label>

                        <asp:dropdownlist id="t01_STATE_PROVINCE" runat="server">

                            <asp:listitem value="" Text=""></asp:listitem>

                            <asp:listitem value="NY" Text="NY"></asp:listitem>

                        </asp:dropdownlist>

                        <span id="reqState" style="color: red; visibility: hidden">Please select a state</span><br/>

                        <input id="update01" name="update01" type="button" value="Update" />

                </p>

            </fieldset>

       </form>

    </body>

</html>

.cs code mainly just generates the options for the dropdown list.

Jun 17 '08 #1

Subscribe Post Reply

49837

mikeh3275

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

 
jQuery(document).ready(function()

{

    jQuery("a[@id*=form]").click(function()

    {

        var lNum = $(this).attr("id");

        lNum = lNum.substring(4, lNum.length);

        jQuery("#dialog").dialog({

            modal: true,

            autoOpen: false,

            width: 600,

            dialogClass: "flora",

            overlay: {opacity: 0.5, background: "black"}

        });

        jQuery("#dialog").load(jQuery(this).attr("href") + " form[@id*=order] fieldset", {lineNumber: lNum}, setFormClick());

        jQuery("#dialog").dialog("open");

        return false;

    });
 
    function setFormClick()

    {

        jQuery('#dialog input[@id*=update]').click(function()

        {
 
            alert("It works");

        });

    }

});

Jun 17 '08 #2

Similar topics

Submit form from modal dialog

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

ASP / Active Server Pages

how to submit the form data to a modal dialog window?

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

Javascript

Can I display a modal dialog form with mdiparent?

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

C# / C Sharp

Modal Dialog - This Almost Works

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

ASP.NET

Problem displaying modal dialog boxes

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

C# / C Sharp

Modal Dialog in ASP.Net

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

ASP / Active Server Pages

oForm.Close() vs this.Close() in a modal dialog.

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

C# / C Sharp

TransModal modal dialog project : beta testing

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

Javascript

jquery dialog form

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() {...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

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

General