Function Doesn't Work When Called Within Object

Question

I have the following code:

// auto_suggest.js
function AutoSuggest(textboxElem, resultElem, url) {
    this.textboxElem = textboxElem;
    this.resultElem  = resultElem;
    this.url         = url;
    this.registerEvent();
}

AutoSuggest.prototype = {
    registerEvent: function() {
        this.textboxElem.onkeyup = this.getSuggestions;
    },
    getSuggestions: function() {
        // This doesn't work either: this.loadResponse("some data");
        $.get(this.url, { text: this.textboxElem.value }, this.loadResponse);
    },
    loadResponse: function(data) {
        // Not called
        this.resultElem.innerHTML = data;
    }
};

// suggest.html
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="auto_suggest.js" type="text/javascript"></script>

<script>
$(function() {
    var suggest = new AutoSuggest(document.getElementById("suggest"), 
                                  document.getElementById("result"), 
                                  "result.txt");
        // This DOES work: suggest.loadResponse("123");
});
</script>

<input type="text" id="suggest" /><br>
<div id="result"></div>

The function loadResponse refuses to be called from within the object, but from the outside it is fine. What could be the problem?

I don't understand the problem. suggest.loadResponse("123"); should work from outside the object, this.loadResponse("123"); from within.... — Chris Baker
– Chris Baker, Commented Jun 9, 2011 at 18:10

lonesomeday · Accepted Answer · 2011-06-09 18:12:18Z

3

The AJAX callback (AutoSuggest.loadResponse) is, by default, passed the jqXHR object as its context (this value). You need to override this by passing the context option to $.ajax. Replace your $.get function with this:

$.ajax({
    url: this.url,
    type: 'GET',
    data: { text: this.textboxElem.value },
    success: this.loadResponse,
    context: this
});

This makes jQuery set this to the correct value.

answered Jun 9, 2011 at 18:12

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user113716 Over a year ago

+1 Alternatively, you could use $.proxy(). $.get(this.url, { text: this.textboxElem.value }, $.proxy(this,"loadResponse"));

moteutsch · Accepted Answer · 2011-06-12 10:51:53Z

0

The code

this.textboxElem.onkeyup = this.getSuggestions;

should be

var t = this;
this.textboxElem.onkeyup = function() {
    t.getSuggestions();
}

answered Jun 12, 2011 at 10:51

moteutsch

3,8334 gold badges31 silver badges35 bronze badges

Collectives™ on Stack Overflow

Function Doesn't Work When Called Within Object

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related