CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
imperialx
imperialx

Reputation: 681

How to close jQuery Dialog within the dialog?

How to close jQuery Dialog within the dialog without using the close button?

Inside the Dialog is a simple form request. If a successful submission occurs, then the UI dialog automatically closes and refreshes the parent page:

<script type="text/javascript">
    $(document).ready(function () {
        $("#form-dialog").dialog({
            autoOpen: true,
            modal: true,
            width: 200,
            draggable: true,
            resizable: true
        });
    });
</script>

<div id="form-dialog" title="Form Submit">
    <form action="default.aspx" method="post">
        <input type="text" name="name" value=" " />    
        <input type="submit" value="submit" />

        <a href="#" id="btnDone">CLOSE</a>

        <script type="text/javascript">
        $(document).ready(function () {
            $("#btnDone").click(function () {
                $(this).dialog('close');
            });
        });
        </script>
    </form>
</div>

Upvotes: 68

Views: 204882

Answers (14)

Malik Ismail
Malik Ismail

Reputation: 1

$("#IDOFDialog").hide()

Upvotes: 0

Nik
Nik

Reputation: 1

It helped me:

$(".ui-dialog-titlebar-close").trigger('click');

Upvotes: 0

Mauro Bilotti
Mauro Bilotti

Reputation: 6232

If you're using jconfirm the way of closing it programatically is the following:

jconfirm.instances[0].close();

Upvotes: 0

kurdtpage
kurdtpage

Reputation: 3221

Using $(this).dialog('close'); only works inside the click function of a button within the modal. If your button is not within the dialog box, as in this example, specify a selector: 

$('#form-dialog').dialog('close');

For more information, see the documentation

Upvotes: 2

Vladimir Miroshnichenko
Vladimir Miroshnichenko

Reputation: 1295

better way is "destroy and remove" instead of "close" it will remove dialog's "html" from the DOM

$(this).closest('.ui-dialog-content').dialog('destroy').remove();

Upvotes: 1

Marco
Marco

Reputation: 3641

After checking all of these answers above without luck, the folling code worked for me to solve the problem:

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

Maybe this will be also a good try if you seek for alternatives.

Upvotes: 5

Der_Meister
Der_Meister

Reputation: 5007

Close from iframe inside a dialog:

window.parent.$('.ui-dialog-content:visible').dialog('close');

Upvotes: 15

redsquare
redsquare

Reputation: 78667

You need

$('selector').dialog('close');

Upvotes: 19

Michel Ayres
Michel Ayres

Reputation: 5985


        $(document).ready(function () {
            $("#form-dialog").dialog({
                autoOpen: true,
                modal: true,
                width: 200,
                draggable: true,
                resizable: true,
                buttons: {
                    "Close": function () {
                        $("#idDialog").dialog("close");
                    }
                }
            });
        });

This will make you a button to close. you can also call the function close 

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

in some function to do this. or even in a button/a

< a href="javascript:void(0);" id="btnDone"   
                              onClick="$("#idDialog").dialog("close");">CLOSE</a>

EDIT: you need this to include your dialog into form:

open: function (type, data) {
            $(this).parent().appendTo($("form:first"));
        }

Upvotes: 0

ndrix
ndrix

Reputation: 1241

$(this).parents(".ui-dialog-content").dialog('close')

Simple, I like to make sure I don't:

  1. hardcode dialog #id values.
  2. Close all dialogs.

Upvotes: 8

Shan
Shan

Reputation: 61

Adding this link in the open 

$(this).parent().appendTo($("form:first"));

works perfectly.

Upvotes: 0

Bart
Bart

Reputation: 505

replace one string to

$("#form-dialog").dialog('close');

$(this) here means another object $("#btnDone")

 <script type="text/javascript">
    $(document).ready(function () {
        $("#form-dialog").dialog({
            autoOpen: true,
            modal: true,
            width: 200,
            draggable: true,
            resizable: true
        });
    });
</script>


<div id="form-dialog" title="Form Submit">
<form action="default.aspx" method="post">
<input type="text" name="name" value=" " />    
<input type="submit" value="submit" />

<a href="#" id="btnDone">CLOSE</a>

<script type="text/javascript">
$(document).ready(function () {
    $("#btnDone").click(function () {
 //I've replaced next string
 // $(this) here means another object $("#btnDone")
  $("#form-dialog").dialog('close');
    });
});
</script>

</form>
</div>

Upvotes: 3

Kunal
Kunal

Reputation: 709

Try This

$(this).closest('.ui-dialog-content').dialog('close');

It will close the dialog inside it.

Upvotes: 70

Jason
Jason

Reputation: 52523

you can close it programmatically by calling 

$('#form-dialog').dialog('close')

whenever you want.

Upvotes: 73

Related Questions