$(this) in javascript

Question

I'm having a problem with using this in js. I have a function that uses this like this:

var refreshRequesterStar = function() {
    $(".rating").raty({
        score: function() { return $(this).attr('data-rating'); },
        readOnly: function() { return $(this).attr('data-readonly'); },
        halfShow: true
    });
};

The rating div is as follow:

<div class="rating" data-readonly="false" data-rating="3.0" style="cursor: default; width: 100px;" title="not rated yet">
<div class="rating" data-readonly="false" data-rating="0.0" style="cursor: default; width: 100px;" title="not rated yet">

This is called by this function:

$("body").ajaxComplete(function(){
      refreshRequesterStar();
      $(".time_to_expire").each(function(){
            setCountDown(this);
      })
      $('select').chosen();
});

I was able to set the score value but I cannot set the readOnly value. When I debugged using firebug, I found that the first this pointed to the div but the second this pointed to window. Where I have been wrong? Note: I don't know much about JavaScript.

More info: I was using raty http://www.wbotelhos.com/raty with rails.

possible duplicate of JavaScript "this" referce to wrong object and javascript 'this' scope in jQuery. — Rob W
– Rob W, Commented Jun 22, 2012 at 7:47
btw, this is not pure javascript. From the looks and the use of $, i would say it's jQuery. Nevertheless, this and scope are a tricky thing in JS, especially for programmer with a more traditional background — cypherabe
– cypherabe, Commented Jun 22, 2012 at 7:49
It's actually jQuery. I'm sorry that I haven't add the jquery tag. Since it's jquery,I don't think this question is a duplicate. — thd
– thd, Commented Jun 22, 2012 at 7:52
You have data-readOnly instead of data-readonly in here: return $(this).attr('data-readOnly'); and the attribute is data-readonly. Check it out! — Angel
– Angel, Commented Jun 22, 2012 at 7:55
not offering this as an answer because I'm not sure and my jQuery is rusty...but shouldn't .attr('data-readOnly') match data-readonly="false" (different cased o) ? — cypherabe
– cypherabe, Commented Jun 22, 2012 at 7:55

Salman Arshad · Accepted Answer · 2012-06-22 08:13:36Z

3

The documentation and examples indicate that the parameter score and readOnly are supposed to be numeric and boolean, not callback functions. You might want to re-write your code this:

$(".rating").each(function() {
    // inside the function, this refers to the .rating element being iterated
    $(this).raty({
        score:    parseFloat($(this).attr('data-rating')), // see note #1
        readOnly: $(this).attr('data-readonly') == "true", // see note #2
        halfShow: true
    });
});

.attr() returns a string; parseFloat() function is used to convert a string e.g. "2.5" into the number 2.5
== "true" returns boolean true if the attribute value is equal to "true"; returns false in all other cases

Ref:

edited Jun 22, 2012 at 8:13

answered Jun 22, 2012 at 7:53

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

Baz1nga Over a year ago

not a big fan of the unary operator suggestion given here and will also violate jslint validation.. Rather cast it like this: Number($(this).attr('data-rating');

Collectives™ on Stack Overflow

$(this) in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related