Question

I’m trying to learn Prototype, so I threw together a simple Log-in page, with username and password fields, and a Log-in button.

I have a controller class, where I want to put all of my onclick functions.

function Controller()
{
    this.logIn = function(){
        this.username = Field.getValue("username");
        this.password = Field.getValue("password");

        this.logInResults = function (response){
            alert(response.responseText);
        }

        new Ajax.Request("../../php/tis/LogIn.php",
            {
                method:'get',
                parameters: {username: this.username, password: this.password},
                onComplete: this.logInResults
            });
    }
}

Yet, when I click the button that has the LogIn function attached, the HTTP request is sent, but returns an empty response string. When I manually follow the link to the php page, it’s there, and functions as intended.

Firebug shows the following:

GET http://localhost/AJAXSeedOrder/php/tis/LogIn.php?username=User%20Name&password=
Firebug cannot find _firebugConsole element true Window tis?username=User+Name
Firebug cannot find _firebugConsole element true Window tis?username=User+Name
Firebug cannot find _firebugConsole element true Window tis?username=User+Name

I’m completely at a loss – any help would be appreciated.

Answer 1

Well, it turns out that my problem was in the Event.observe call that I used to bind controller.logIn to the form submit button. Invoking LogIn through the observe call would make the AJAX request, and then reload the page – which would happen faster then the webserver would return my request.

That was the reason for why the requests would return empty response strings.