dynamically loaded Jquery dialog does not close on click of a button

Question

0.00/5 (No votes)

See more:

, +

Hi all,

I have my calling page as below :

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication2.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <%--<link rel="Stylesheet" href="Content/DialogBox.css" />--%>
    <style type="text/css">
        .ui-dialog {
            position: fixed;
            padding: .2em;
            width: 300px;
            overflow: hidden;
            border: solid;
        }

        .ui-widget-overlay {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            background: #aaaaaa /*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png) /*{bgImgUrlOverlay}*/ 50% /*{bgOverlayXPos}*/ 50% /*{bgOverlayYPos}*/ repeat-x /*{bgOverlayRepeat}*/;
            opacity: .3;
            filter: Alpha(Opacity=30) /*{opacityOverlay}*/;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.17.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('<div id="dialogDiv"></div>').load('WebForm1.aspx').appendTo('body');
            $('#dialogDiv').dialog({
                resizable: false,
                height: 140,
                modal: true,
                autoOpen: true,
                draggable: false,
                title: "This new idiot dialog",
                create: function () {
                    $(".ui-dialog-titlebar-close").hide();
                },
                buttons: {
                    "ok": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

    </form>
</body>
</html>

And my dynamically loaded page(webForm4.aspx in this case) as below :

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebApplication2.WebForm4" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script language="javascript" type="text/javascript">

        function bindEvent() {
            var text = $('#inittext').val();
            if (text.length < 3) {
                alert("Enter atleast 3 characters");
            }
            else {
                $('#dialogDiv').dialog('close');
            }
        }


    </script>
</head>
<body>
    <div id="content">
        <table width="100%">
            <tr>
                <td align="center">Acknowledgement (Enter Initials):
                    <input id="inittext" type="text" value="" style="width: 40px;" maxlength="3" />
                    <input id="btnContinue" type="button" value="done" style="width: 40px;" onclick="bindEvent()" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

I want to close the dialog box by clicking 'done' button which is generated in above code But the problem is the 'done' button click event is never fired. Can anyone please help me?

Also there is an html text box in webform4.aspx. How do I get the value of that text box in calling page?

P.S. -> I can change contents of webForm4.aspx hence it is necessary that dialog be closed by button on webForm4.aspx

Posted 16-Jul-13 19:16pm

Pratik Gaikwad

Updated 17-Jul-13 8:46am

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 17-Jul-13 2:19am

Do you see any error on console tab of FireBug in FireFox?

Pratik Gaikwad 17-Jul-13 14:08pm

I tried in Chrome but no error in console.

Parwej Ahamad 18-Jul-13 21:41pm

I put your sample code in fiddle, it's working fine:
http://jsfiddle.net/5MQKn/

Yes you can access, put your method bindEvent() to Webform2.aspx. Because when you are loading webform4 then your envent is not binding.

Pratik Gaikwad 19-Jul-13 1:19am

How do I put bindEvent in WebForm2? as I said, the contents of the WebForm4 can be modified on the fly, I wont know the Id's of the new elements, hence I can not put bindEvent in webForm2. Is there any way I can call bindEvent(still keeping it in webForm4) from WebForm2 after dialog or webform4 is loaded or something like that?

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)