jQuery UI modal problem

I'm trying to bind a keypress ("enter") to trigger a function in a jQuery modal object. In the code below, I want $(this).dialog("login") to fire when the keypress event is detected. However it seems that I'm unable to call self.dialog("login"). Am I looking at this the wrong way?

      $("#login-dialog").dialog({
        autoOpen: false,
        height: 250,
        width: 350,
        modal: true,
        open: function() {
            var self = $(this);
            $("#login-dialog").load("/accounts/login/", function() {
                $("#id_username").focus()
                .keypress(function(event) {
                    if (event.which == 13) {
                        event.preventDefault();
                        self.dialog("login");
                    }
                });
            });
        },

        buttons: {
            close: function() {
                $(this).dialog("close");
            },

            login: function() {
    开发者_Python百科            $.ajax({
                    type: "POST",
                    url: "/accounts/login/",
                    data: $("#login-form").serialize(),
                    success: function(data) {
                        var errors = $(data).find("#login-error").val();
                        if (errors) {
                            $("#error-message").replaceWith("<p class='error'>" + "Your username and password didn't match" + "</p>");
                        } else {
                            window.location = "/builder";
                        }
                    }
                });
            }
        }
    });

---

A quick work around for your problem, inside "keypress" function use the following code

$("#login-dialog").dialog("option").buttons.login();

---

I would attach a handler to the onsubmit event of the login form. With this handler, call the login function with the appropriate field values (prevent default on the event so form doesn't actually submit).

Now, a nice side effect of this is that pressing ENTER when on the form, that handler will get called. This approach also degrades a bit better and makes all your code more portable.

Personally, I use a plugin that you just pass a form element into that will send it via ajax using all the form attributes and input elements.