Skip to content

Instantly share code, notes, and snippets.

@JavaScriptDude

JavaScriptDude/jquery_dialog_focus_test.html

Last active February 1, 2022 02:24
Download ZIP

Revisions

  1. JavaScriptDude revised this gist Feb 1, 2022. 1 changed file with 37 additions and 37 deletions.
    74 changes: 37 additions & 37 deletions jquery_dialog_focus_test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,14 +16,14 @@

    $( function() {
    $( "#dialog-confirm1" ).dialog({
    height: "auto",
    width: 400,
    position: { my: "center", at: "top", of: window },
    focus: function dialog1_focus(){
    _called()
    $("#btCancel1").focus()
    },
    buttons: [{
    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()}
    @@ -38,40 +38,40 @@

    $( 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
    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.removeEventListener("focusin", focus_in_orig)

    // this.parentNode.addEventListener("focusin", function dialog2_focusin(event){
    // _called()
    // // debugger
    // // focus_in_orig(event)
    // })
    // 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
    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()}
    this.parentNode.focus()
    },
    buttons: [{
    text: "Ok",
    id: "btOk2",
    click: function ok2_click() {_called()}
    },{
    text: "Cancel",
    id: "btCancel2",
    click: function cancel2_click() {_called()}
    text: "Cancel",
    id: "btCancel2",
    click: function cancel2_click() {_called()}
    }]
    });
    });
  2. JavaScriptDude created this gist Feb 1, 2022.
    90 changes: 90 additions & 0 deletions jquery_dialog_focus_test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,90 @@
    <!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>