CODEWITHSUNDEEP
javascriptjquery
GorillaApe
GorillaApe

Reputation: 3641

Javascript access object variables from functions

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);
    });

Upvotes: 1

Views: 4362

Answers (3)

karim79
karim79

Reputation: 342635

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

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

Upvotes: 2

Dan Davies Brackett
Dan Davies Brackett

Reputation: 10071

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"
    }
}

Upvotes: 4

user113716
user113716

Reputation: 322492

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);

Upvotes: 1

Related Questions