Dialog doesn't properly close when initiated by focus
Question
I wish to open a dialog when an input is focused upon. It used to work perfectly, but I must have upgraded jQuery and/or jQueryUI, and now FF doesn't remove the modal and IE doesn't even close the dialog box. Please see http://jsbin.com/EdupOgE/2/ for a live example. As shown in my example, it does work fine using click, but not focus. Why is this happening and how do I fix it? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready( function() {
$("#id_focus").focus(function(){$("#dialog").dialog("open");});
$("#id_click").click(function(){$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
modal : true,
buttons : [{text : 'CANCEL',click : function() {$(this).dialog("close");}}]
});
});</script>
</head>
<body>
None: <input type="text" value="" />
Click: <input id="id_click" readonly="readonly" value="PORTLAND OR 97232" />
Focus: <input id="id_focus" readonly="readonly" value="PORTLAND OR 97232" />
<div id="dialog" title="Title"></div>
</body>
</html>
2 answers
solution1
5 ACCPTED 2013-09-04 21:10:17
You can just add $("#id_focus").blur(); to the focus function like so:
$(document).ready(function () {
$("#id_focus").focus(function () {
$("#id_focus").blur(); // Important bit
$("#dialog").dialog("open");
});
$("#id_click").click(function () {
$("#dialog").dialog("open");
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: [{
text: 'CANCEL',
click: function () {
$(this).dialog("close");
}
}]
});
});
From the API Documentation :
Focus
Upon opening a dialog, focus is automatically moved to the first item that matches the following:
- The first element within the dialog with the autofocus attribute
- The first :tabbable element within the dialog's content
- The first :tabbable element within the dialog's buttonpane
- The dialog's close button
- The dialog itself
While open, the dialog widget ensures that tabbing cycles focus between elements within the dialog itself, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog.
Upon closing a dialog, focus is automatically returned to the element that had focus when the dialog was opened.
emphasis on that last bit is mine
So if focus is returned to #id_focus after the dialog is closed it should be trying to reopen the dialog immediately after it's been closed... I imagine that no good can come from this circular functionality and it's likely the cause of your troubles...
solution2
0 2013-09-09 06:44:06
$(document).ready(function () {
$("#id_focus").onfocus(function () {
$("#id_focus").blur();
$("#dialog").dialog("open");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.