jquery dialog close on asp.net button click

Question

i have a aspx page called A which is using a master page. Page A has a link button, on link button click i want to open a jquery dialog loading with aspx called B. this works fine for me. I have a asp.net cancel button oenter code heren page B, on cancel button click i want to close the jquery dialog and stay on page A. in my code the jquery dialog is getting closed but it reloads the page B in the browser.

Master page

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="jQueryTest.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <script src="../javascript/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="../javascript/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>

    <link href="/css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
    $(document).ready(function () {
        var mydiv = $("#dialog").dialog({   
            autoOpen: false,
            resizable: false,
            height: 700,
            width: 900,
            modal: true            
        });        
        mydiv.parent().appendTo(jQuery("form")); 


        });

        function showPanel(){
        var mydiv = $("#dialog")
        // Load the content using AJAX
        mydiv.load('/WebForm1.aspx');
        // Open the dialog        
        mydiv.dialog('open');

        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

default.aspx(page A)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" MasterPageFile="~/Site1.Master"
    Inherits="jQueryTest._Default" %>

<asp:Content ID="contect1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div>
        <asp:LinkButton ID="lnkChangePwd" Text="Click" OnClientClick="showPanel();return false;"
            runat="server"></asp:LinkButton>
    </div>
    <div id="dialog" style="width: 60%; height: 45%" title="Change password">
    </div>   

</asp:Content>

webform1.aspx(Page B)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>

    <script src="../javascript/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="../javascript/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>

    <link href="/css/ui-lightness/jquery-ui-1.8.22.custom.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">



    $(document).ready($(function () {
     $("#<%=Button1.ClientID %>").bind("click", function (event) {
    $("#dialog").dialog("close");    

});

}));

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        this is webform 1
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>
</html>

krawl · Accepted Answer · 2012-08-08 16:45:55Z

2

Something like this has worked for me...

Page that displays the dialog...

<html>
<head>
    ...link js files here...
</head>
<body>
    <div id="deleteDialog"></div>
</body>
</html>

Page that is the contents of the dialog...

<html>
<head>
    ...link js files here...
</head>
<body>
    <input type="submit" value="Close" id="uxCloseDialog" />
</body>
</html>

jquery to show and close the dialog...

var deleteDialog;

deleteDialog = $("#deleteDialog").dialog({
    autoOpen: false,
    resizable: false,
    width: "auto",
    modal: true
});

$(".button-delete-24").click(function () {
    var id = $(this).attr('data-id');
    deleteDialog.empty();
    deleteDialog.load("/myDialogPage.aspx"
        , function () {
            $("#uxCloseDialog").click(function () {
                deleteDialog.dialog("close");
                return false;
            });
        });
    deleteDialog.dialog("open");
    return false;
});

I do use jQuery UI so I am not sure if there is extra functionality available to me or not.

answered Aug 8, 2012 at 16:45

krawl

3991 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vijay Over a year ago

the dialog gets closed , but it still reloads the same page.

Timoteo Brasil · Accepted Answer · 2012-08-08 17:48:10Z

0

Try using window.parent:

window.parent.jQuery("#dialog").dialog('close');

answered Aug 8, 2012 at 17:48

Timoteo Brasil

983 silver badges12 bronze badges

1 Comment

Vijay Over a year ago

the dialog gets closed , but it still reloads the same page.

Collectives™ on Stack Overflow

jquery dialog close on asp.net button click

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related