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

$('#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.