CODEWITHSUNDEEP
jqueryasp.net
Farhan
Farhan

Reputation: 2575

How to close dialog box which is opened by jQuery?

I have a webpage in which I open a dialog box, which shows another webpage. When I click on the submit button on this child webpage, it is loaded in the browser window.

Here is the whole synopsis:

On the parent page, I have a div which loads the child.

<div id="divMyDialog" title="Child Dialog Title">
</div>

In a jQuery file, I have the following:

$("#divMyDialog").dialog({
    autoOpen: false,
    bgiframe: true,
    width: 800,
    height: 400,
    modal: true,
    draggable: false,
    resizable: false
    });

function OpenDialog(FirstID, SecondID) {
    $("#divMyDialog").dialog("open").load("ChildPage.aspx?FirstID=" + FirstID+ "&SecondID=" + SecondID);
}

Now, once I click on an asp:button in ChildPage.aspx (after a database action), I want ChildPage.aspx to show an alert and then close. Instead, what is happening is that it shows the alert correctly, and then loads ChildPage.aspx in the browser.

For the alert, I have this in the OnClick event for that asp:button:

Page.ClientScript.RegisterStartupScript(this.GetType(), "showalert", "<script>CloseMyDialog();</script>");

To close ChildPage.aspx dialog, I have this:

<script type="text/javascript">
    function CloseMyDialog() {
        parent.$.fn.colorbox.close();
        return false;
    }
</script>

Please let me know if you need any more clarification. I have already tried many things, but so far none worked correctly.

Thanks.

Upvotes: 1

Views: 3069

Answers (5)

skynet
skynet

Reputation: 1

ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "closedialog", "$(function(){$('#dialog').dialog('close');});", True)

Upvotes: 0

jlrvpuma
jlrvpuma

Reputation: 271

You must load child page into an iframe. You can use fancybox:

$(".my-link").fancybox({'type':'iframe'});

http://moleskinformatico.blogspot.com/2011/11/llamar-funcion-de-ventana-padre-desde.html

Or you can do this:

 $(".my-link").click(function(){
 e.preventDefault();
 $this = $(this);
 $('<iframe id="site" src="' + this.href + '" />').dialog({
    width: 800,
    height: 400,
    modal: true

 });//dialog
});//click

http://blogs.antartec.com/desarrolloweb/2010/05/usando-jquery-dialog-con-iframe/

html:

<a hre="childPage.html" class="my-link">show-dialog</a>

Upvotes: 1

Jonathan Cook
Jonathan Cook

Reputation: 1

You have to stop the submit process of the button. This can be done by returning false on the onclick() button function.

Upvotes: 0

Niels
Niels

Reputation: 49919

You are loading the content, which does not mean it's an iFrame, you are loading the content of the page into #divMyDialog. So you don't have to do parent.$.fn. Also if you want to close the dialog you can do something like:

$("#divMyDialog").dialog("close");

And close all dialogs

$(".ui-dialog-content").dialog("close");

Upvotes: 3

kmp
kmp

Reputation: 10865

This closes a jQuery dialog:

$("#divMyDialog").dialog('close')

Upvotes: 2

Related Questions