getJSON only returning a HTMLCollection

Question

I'm trying to create an email-validity (that is, check against database if email doesn't already exist) function using getJSON (sort of like the jquery.ui.autocomplete ). However, the data received from the callback seems to be just the site header of the current page, not the page the InitSource-function calls to. (This I've checked, and is correctly being called).
Can someone please tell me what is going wrong, why am I getting a HTMLCollection and not the correct JSON ?

This is the code:

$.fn.Functions = {
    InitSource: function () {   
        $.getJSON(this.source, { term: this.getTerm() }, this.response(data));
    },  
    onChange: function () {   
        this.InitSource();
    },  
    response: function (data) {   
        alert(data.result);
    },  
    getTerm: function () {   
        var key = $('.' + this.selector).val();
        if (key.length > 0) return key;
    }   
};

The this.source is a relative path: /EmailCheck.aspx .
And returns a single value: {"result" : "true"} .

Can someone please tell this rookie why he's getting completely the wrong data in the callback?

Answer 1

You are calling the function and then sending the return value to the getJSON call. Use the function name without a parameter to send the function reference instead of calling it.

As you are using a method, you need to use proxy so that it is called with the context of your object:

$.getJSON(this.source, { term: this.getTerm() }, $.proxy(this.response, this));