Javascript access object variables from functions

Question

function init_exam_chooser(id,mode)
{
    this.id=id;
    this.table=$("#" + this.id);

    this.htmlRowOrder="<tr>" + $("#" + this.id + " tbody tr:eq(0)").html() + "</tr>";
    this.htmlRowNew="<tr>" + $("#" + this.id + " tbody tr:eq(1)").html() + "</tr>";
    $("#" + this.id + " tbody tr").remove();

    //Arxikopoiisi
    var rowNew=$(this.htmlRowNew);

    rowNew.find("input[type='text']").eq(0).autocomplete({
        source: function (req,resp)
        {

            $.ajax({
                url: "/medilab/prototypes/exams/searchQuick",
                cache: false,
                dataType: "json",
                data:{codeName:req.term},
                success: function(data) {
                    resp(data);
                }
            });

        },
        focus: function(event,ui)
        {
            return false;
        },
        minLength :2

    });

    rowNew.find("input[type='text']").eq(1).autocomplete({
        source: function (req,resp)
        {

            $.ajax({
                url: "/medilab/prototypes/exams/searchQuick",
                cache: false,
                dataType: "json",
                data:{name:req.term},
                success: function(data) {
                    resp(data);
                }
            });

        },
        focus: function(event,ui)
        {
            return false;
        },

        minLength :2
    });
    rowNew.find("input[type='text']").bind( "autocompleteselect", function(event, ui) {
        alert(htmlRowOrder);
        var row=$(htmlRowOrder);

        $(table).find("tbody tr:last").before(row);
        alert(ui.item.id);
});
    rowNew.appendTo($(this.table).find("tbody"));


//this.htmlRowNew

}

The problem is at ,how i can access htmlRowOrder? I tried this.htmlRowOrder and didnt work.... Any ideas??

rowNew.find("input[type='text']").bind( "autocompleteselect", function(event, ui) {
            alert(htmlRowOrder);
            var row=$(htmlRowOrder);

            $(table).find("tbody tr:last").before(row);
            alert(ui.item.id);
    });

Dan Davies Brackett · Accepted Answer · 2010-04-26 23:49:59Z

4

Your issue is that this is not what you think it is inside your event handlers. Most jQuery event handlers run in the context of the element on which the event was triggered; what that means is that inside the event handler, this is the element on which the event was triggered.

You can solve this problem either by waiting for the next revision of JavaScript, which will have Function.prototype.bind baked in, or by setting a reference to your scope object outside the event handler and referring to it inside, similarly to patrick's answer.

function(){
    var instance = this;
    this.foo = "abc123";
    $('someselector').click(function(ev){
        this.foo; //causes an error; foo is now the element matching 'someselector'
        instance.foo; //this returns "abc123"
    }
}

answered Apr 26, 2010 at 23:49

Dan Davies Brackett

10.1k2 gold badges36 silver badges55 bronze badges

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

Comments

karim79 · Accepted Answer · 2010-04-26 23:57:17Z

2

Here's a reasonably thorough explanation of the this keyword:

http://www.quirksmode.org/js/this.html

answered Apr 26, 2010 at 23:57

community wiki

karim79

Comments

user113716 · Accepted Answer · 2010-04-26 23:48:26Z

1

You could define the variable outside the function.

var rowNew;

function init_exam_chooser(id,mode) {
    ...
    rowNew=$(this.htmlRowNew);
    ...
}

rowNew...

Of course, you will have to call the function before rowNew will reference the value you want to work with.

I used a different variable, but the principle is the same.

Or, you could have your function return the value you want.

function init_exam_chooser(id,mode) {
    // Do stuff
    return myVariable;
}

var anotherVariable = init_exam_chooser(id,mode);

edited Apr 26, 2010 at 23:48

answered Apr 26, 2010 at 23:42

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

Javascript access object variables from functions

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related