Last active
February 1, 2022 02:24
-
-
Save JavaScriptDude/4baebc87978317fd01a64b4ca2337109 to your computer and use it in GitHub Desktop.
jQuery UI Dialog - Button Focus Tests
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>jQuery UI Dialog - Focus Test</title> | |
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> | |
<script src="https://code.jquery.com/jquery-3.6.0.js"></script> | |
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js" integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
<script> | |
function funcName(f){var s = f.toString(), m = s.match("^\\s*function\\s*(\\S*)\\s*\\((.*)\\)");if (m.length > 1) return m[1];return null;} | |
function _called(){console.log(funcName(arguments.callee.caller) + "() called: ")} | |
$( function() { | |
$( "#dialog-confirm1" ).dialog({ | |
height: "auto", | |
width: 400, | |
position: { my: "center", at: "top", of: window }, | |
focus: function dialog1_focus(){ | |
_called() | |
$("#btCancel1").focus() | |
}, | |
buttons: [{ | |
text: "Ok", | |
id: "btOk1", | |
click: function ok1_click() {_called()} | |
},{ | |
text: "Cancel", | |
id: "btCancel1", | |
click: function cancel1_click() {_called()} | |
}] | |
}); | |
}); | |
$( function() { | |
$( "#dialog-confirm2" ).dialog({ | |
height: "auto", | |
width: 400, | |
position: { my: "center", at: "bottom", of: window }, | |
focus: function dialog2_focus(){ | |
_called() | |
$("#btOk2").focus() | |
}, | |
open: function dialog2_open(event, ui){ | |
_called() | |
// return | |
// var focus_in_orig = (jQuery._data(this.parentNode, "events")["focusin"].pop()).handler, t=this | |
// this.parentNode.removeEventListener("focusin", focus_in_orig) | |
// this.parentNode.addEventListener("focusin", function dialog2_focusin(event){ | |
// _called() | |
// // debugger | |
// // focus_in_orig(event) | |
// }) | |
console.table(jQuery._data(this.parentNode, "events")) | |
console.table(jQuery._data(this, "events")) | |
// debugger | |
this.parentNode.focus() | |
}, | |
buttons: [{ | |
text: "Ok", | |
id: "btOk2", | |
click: function ok2_click() {_called()} | |
},{ | |
text: "Cancel", | |
id: "btCancel2", | |
click: function cancel2_click() {_called()} | |
}] | |
}); | |
}); | |
setTimeout(()=>{ | |
setTimeout(()=>{$("dialog-confirm1").focus()}, 1000) | |
setTimeout(()=>{$("dialog-confirm2").focus()}, 2000) | |
}, 2000) | |
</script> | |
</head> | |
<body> | |
<div id="dialog-confirm1" title="~ dialog title ~"><p>~ dialog body ~</p></div> | |
<div id="dialog-confirm2" title="~ dialog title ~"><p>~ dialog body ~</p></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment