jQuery UI Dialog doesn't get closed

Question

I've got a rather confusing problem with jQuery UI Dialog. The issue is that the default close button of the jQuery dialog is not working as it should! But when I click the side areas of the button, it gets closed. Below is the code used to init the dialog.

$("#divGuestDetails").dialog('open');

Nothing else. I tried binding a click event to the dialog after the init process. The code is below.

$('#divGuestDetails').find('.ui-dialog-titlebar-close').bind('click',function(){
    $('#divGuestDetails').dialog('close');
})

The versions of jquery core and ui is as following.

Jquery core : 1.3.2 Jquery ui : 1.7.2

if this is a know issue please guide me on how to fix it.

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;">
<span class="ui-dialog-title" id="ui-dialog-title-divGuestDetails" unselectable="on" style="-moz-user-select: none;">Guest Details</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-moz-user-select: none;"><span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span></a>
</div>

Above is the runtime html elements and as I checked ui-dialog-titlebar-close is bound with the default close call. But when I check on the click event, it is actually fired from the span that is inside of the <a> tag. what can I do to fix this problem.

http://stackoverflow.com/questions/366854/jquery-ui-dialog-box-close-function — Asif, Dec 02 '13 at 09:48
@Jai : At this current moment I'm unable to update since the entire application is tightly coupled with the jQuery version. But we are working on migrating! — Imesh Chandrasiri, Dec 02 '13 at 09:54
chances are the jquery ui css version may not be right?? http://stackoverflow.com/questions/14588267/jquery-ui-modal-form-close-button-display-position — wilsonrufus, Dec 02 '13 at 10:02

wilsonrufus · Answer 1 · 2013-12-02T09:50:07.173

0

var guestDetails = $("#divGuestDetails").dialog('open');

guestDetails.dialog('close'); // use this anywher to close it

$('#divGuestDetails').find('.ui-dialog-titlebar-close').bind('click',function(){
    guestDetails.dialog('close');
})

edited Dec 02 '13 at 09:50

answered Dec 02 '13 at 09:47

wilsonrufus

449
1
5
14

I used this method too! but it dint work! I'll update the question! – Imesh Chandrasiri Dec 02 '13 at 10:11

jQuery UI Dialog doesn't get closed

1 Answers1