Onclick and $(this) in java/jq function

Question

Really simple question. Why doesn't

<div class="plus-button" onclick="voteUp(' . $postid . ')" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>

work with

<script type="text/javascript">
function voteUp(postid){
        var postid = postid;
        $(this).siblings('.minus-button').removeClass('disliked');    
        $(this).toggleClass('liked');

        $.ajax({
            type:"POST",
            url:"php/votesystem.php",
            dataType : 'html',
            data:'act=like&postid='+postid,
            success: function(data){
                $('.plus-button').html(data);
                alert("Liked with id "+postid);
            }
        });
}

</script>

The div line works fine. The problem is that $(this) in the java/jq script is not recognized as a specific div class.

I have tried using voteUp(this) and didn't get it to work. Also tried using

var postid = $(this).data('postid');

but my alert msg then says undefined id instead of whatever id it should be.

possible duplicate of [JavaScript "this" keyword](http://stackoverflow.com/questions/3127429/javascript-this-keyword) — CBroe, Sep 01 '14 at 06:43
you need to use `onclick="voteUp.call(this, ' . $postid . ')"` — Arun P Johny, Sep 01 '14 at 06:46
Yes of course. It's defined several times in a php while loop. — Sindre Sørensen, Sep 01 '14 at 06:47
You have a very simple issue - the postid needs to be quoted if it is not a number - also no need to use inline onclick as you can see from my post. I fail to see why you chose to complicate things with .call(this... — mplungjan, Sep 01 '14 at 07:05

mplungjan · Answer 1 · 2014-09-01T07:06:29.917

0

Remove the onclick and use jQuery to get the postid

$(function() {
  $(".plus-button").on("click",function() {
    var postid = $(this).data("postid");
    // $(this) is now the div clicked
    $(this).siblings('.minus-button').removeClass('disliked');    
    $(this).toggleClass('liked');
    .
    .

edited Sep 01 '14 at 07:06

answered Sep 01 '14 at 06:53

mplungjan

169,008
28
173
236

Did that before I changed it to onclick. Onclick resolved the issue though. – Sindre Sørensen Sep 01 '14 at 08:11
I do not understand your comment. Use the event handling of jQuery instead of inline onclick and your problem is solved. It is the recommended way and you even save bandwidth by not having the onclick on each div – mplungjan Sep 01 '14 at 08:15

score -1 · Accepted Answer · answered Sep 01 '14 at 06:58

instead of just calling voteUp( #postId) use the call method so voteUp.call(this, #postID);

<div class="plus-button" onclick="voteUp.call(this, ' . $postid . ')" data-postid="' . $postid . '" name="like">+ ' . $voterow['totalupvotes'] . '</div>

what you basically do here is that you change the context of the function or the "this" variable from the function prototype to the div dom object. more can found in the documentation below :)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Complicating a very simple thing here. Still an issue with the quotes. — mplungjan, Sep 01 '14 at 06:59

Onclick and $(this) in java/jq function

2 Answers2