Confirm Jquery UI Dialog Prompt on Enter Key

问题:

I've tried the techniques suggested in the following stack answer to no luck:

Submit jQuery UI dialog on <Enter>

Something must be off with my code. On login, I have a disclaimer that pops up to warn the user that the information found within the site is confidential. I would like it so that to continue, all the user has to do is hit the enter key. Here is my original code (I've included a browser check):

  $("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": function (e) {
                    $("#loginForm").unbind('submit').submit(),
                    $(this).dialog("close"),
                    $("#loginForm").submit();
                    $("#btnLogin").click();
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            }

        })
    }
    else {
        $("#dialog-browser")
        .dialog({
            resizable: false,
            height: 220,
            width: 480,
            modal: true,
            buttons: {
                "Close": function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            }
        })
    };
});

Now here is my code with the keyup commands:

$("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": function (e) {
                    $("#loginForm").unbind('submit').submit(),
                    $(this).dialog("close"),
                    $("#loginForm").submit();
                    $("#btnLogin").click();
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            },
  HERE>>>      open: function() { 
                $("#dialog-confirm").keypress(function(e) { 
                  if (e.keyCode == $.ui.keyCode.ENTER) { 
                    $("#loginForm").unbind('submit').submit(),
                    $(this).dialog("close"),
                    $("#loginForm").submit();
                    $("#btnLogin").click(); 
                  } 
                }); 
              } 
        })
    }
    else {
        $("#dialog-browser")
        .dialog({
            resizable: false,
            height: 220,
            width: 480,
            modal: true,
            buttons: {
                "Close": function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            }
        })
    };
});

This unfortunately is not working for me and I can't for the life of me figure out why? If anyone can see where the issue is, I'd be extremely grateful!

Thanks!!

回答1:

I put this aside for most of the day and just revisited it. I got it working! Here's my code:

$("#loginForm").submit(function (e) {
    e.preventDefault();

    if ($.browser.msie) {
        $("#dialog-confirm")
        .dialog({
            resizable: false,
            height: 300,
            width: 550,
            modal: true,
            buttons: {
                "Continue": {
                    text: "Continue",
                    id: "btnContinue",
                    click: function (e) {
                        $("#loginForm").unbind('submit').submit(),
                        $(this).dialog("close"),
                        $("#loginForm").submit();
                        $("#btnLogin").click();
                    }
                },
                Cancel: function (e) {
                    e.preventDefault();
                    $(this).dialog("close");
                }
            },
            open: function () {
                $(document).keydown(function (event) {
                    if (event.keyCode == 13) {
                        $("#btnContinue").click();
                    }
                });
            }
        })
    }

Essentially, I assigned the button in my dialog an ID value, and instead of $("#dialog-confirm").keydown I used $(document).keydown. Since the function is set only after the dialog opens, it won't necessarily affect the rest of my page. Inside of the keydown function, I have it hitting the continue button of which I call out by ID.

Thanks for the help everyone.

回答2:

Try using this:

$("#dialog-confirm").keydown(function (event) {
        if (event.keyCode == 13) {
            // Submit it
        }
    });

回答3:

If you don't have any elements in the dialog that will get focus (i.e: input elements), you can try the approach suggested in this question: jquery-ui Dialog: Make a button in the dialog the default action (Enter key)