Question

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() {
                $.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";
                        }
                    }
                });
            }
        }
    });

Answer 1

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

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