关闭动态创建的jQuery-ui对话框

Question

I am creating a user information edit dialog that fetches edit-user information using $.post but I'm unable to close this dialog since dialog wasn't initialized using any HTML element.

I am trying $('#editUser').dialog('close') but it won't work.

Here is the main body:

<div id='userInfo'>
<div class='user'>
    <span class='userId'>1</span>
    <span class='userName'>John</span>
</div>
<div class='user'>
    <span class='userId'>2</span>
    <span class='userName'>Jane</span>
</div>

and here is the script used to create the dialog:

$(function() {
$('.user').click(function() {
     var uid = $(this).find('span.userId').html();
    $post('/e-val/user/edit.php', {id: uid}, function(html) {
       $(html).dialog();
    });
});

$('body').on('click', '#closeEditDialog', function() {
   $('#editUser').dialog('close')
});
});

The dialog opens up fine as expected but isn't closing as it should.

This is the HTML for the dialog as returned by the ajax script.

<div id='editUser'>
<table>
    <tr>
        <td>Username</td>
        <td><?php echo $user['name'] ?></td>
    </tr>
    <tr>
        <td>Email</td>
        <td><?php echo $user['email'] ?></td>
    </tr>
    <tr>
        <td colspan='2'>
<input type='button' id='closeEditDialog' value='close' />
</td>
    </tr>
</table>
</div>

What can I do to close it? I can use $('#editUser').remove() to remove the dialog, but I need to close it not remove it.

Answer 1

var mydialog;
$(function() {
$('.user').click(function() {
     var uid = $(this).find('span.userId').html();
    $post('/e-val/user/edit.php', {id: uid}, function(html) {
       mydialog = $(html);
       mydialog.appendTo('body');
       mydialog.dialog();
    });
});

$('body').on('click', '#closeEditDialog', function() {
   mydialog.dialog('close')
});
});

Answer 2

You might need to insert that html into your DOM before creating your dialog.

$("body").append(html);
$("#editUser").dialog();

Well at least if your dialog shows up this way, there is nothing preventing it from closing, you're using the same selector.

EDIT

Also, do not forget that .dialog() will initialize the widget, try not calling it more than once. Using .dialog("open") instead.

Best would be even to already add the dialog's div into your html, and then append your server side code in it to dynamically update the content of the dialog.

Answer 3

$('#editUser').dialog('close') won't work because you've never used $('#editUser') to initialize the dialog , so you cannot use it either to close it, You need to use the same handler that was used to create it.

As answered here by Gil & Trinh : Just add the dialog content to the DOM first and then initialize the dialog:

$post('/e-val/user/edit.php', {id: uid}, function(html) {
   $(html).appendTo('body');
   $('#editUser').dialog( {autoOpen: false} );
});

autoOpen: false will prevent the dialog from opening by itself and it can be opened using $('#editUser').dialog('open') anytime.