$(this) not working on click when using bootstrap

Question

I'm using the glyphicons from twitter's bootstrap. When a user posts a status update, I want other users to be able to like, dislike or favorite that post. After they have liked the post, I want the color of the glyphicon to change so that they know they've pushed the button. From other stack overflow posts, I've found ways to do this without jQuery. But I want to use jQuery to accomplish it. Currently, when I use $(this).toggleClass(tst) to add the color I want, the color doesn't change. I know my ajax is working because database is updated based on the specific post that I clicked.

The strange thing is, if I use $("#liked").toggleClass(tst), the color does change, but only on the first post that uses the #liked id. I've tried using, toggleClass, addClass, removeClass/addClass .css and also calling the $(this).toggleClass(tst) inside and outside of the function. It all comes down to the same thing: When I use this it doesn't change colors. How can I (using jQuery) to target the specific liked button so that I can change its class.

echo "<a id='liked' href='#' <span class='glyphicon glyphicon-thumbs-up'></span> </a>";

Here is the css from twitter's bootstrap

.glyphicon-thumbs-up:before{
    content:"\e125"; 
    color: #7f8c8d; 
    opacity: 0.7;
}

.glyphicon-thumbs-up.tst:before{
    content:"\e125"; 
    color: green; 

}

here is my jQuery

$(".glyphicon").click(function() {

   var socialButton = $(this).attr('id');

   //traverse the dom up until I get to this post's text. Get the text from the post
        var thisPost = $(this).parent().parent().text();

   //get the user name of the post
   var user = $(this).parent().parent().parent().text();



    $.ajax({
        type: "POST",
        dataType: "json",
        url: "socialbuttons.php", 
    data: { 
          button: socialButton,
          post: thisPost,
          postAuthor: user
        },
        success: function(data) {
           $( this ).toggleClass("tst");
              alert("success")//this works
           //$("#liked").toggleClass("tst"); //works, but only on first post

        }
    })

    })

sir correct your HTML..It's nbot generating valid HTML A tag — K.K.Agarwal, Jun 20 '14 at 12:36
@K.K.Agarwal what's wrong with the html? How I should I write it? — jonjon, Jun 20 '14 at 12:41

score 2 · Answer 1 · answered Jun 20 '14 at 12:29

In the success callback you're referencing the wrong this; you can fix it by passing it via $.ajax():

$.ajax({
    type: "POST",
    dataType: "json",
    context: this, // <--- added
    url: "socialbuttons.php", 
    data: { 
        button: socialButton,
        post: thisPost,
        postAuthor: user
    },
    success: function(data) {
        $( this ).toggleClass("tst");
        alert("success")//this works
    }
});

score 2 · Accepted Answer · answered Jun 20 '14 at 12:30

You need to preserve that object because in ajax success $(this) refers to ajax only(not the current clicked element)

$(".glyphicon").click(function () {
    var socialButton = $(this).attr('id');
    //traverse the dom up until I get to this post's text. Get the text from the post
    var thisPost = $(this).parent().parent().text();
    //get the user name of the post
    var user = $(this).parent().parent().parent().text();
    var obj = $(this);

    $.ajax({
        type: "POST",
        dataType: "json",
        url: "socialbuttons.php",
        data: {
            button: socialButton,
            post: thisPost,
            postAuthor: user
        },
        success: function (data) {
            obj.toggleClass("tst");
            alert("success") //this works
                //$("#liked").toggleClass("tst"); //works, but only on first post

        }
    })

})

score 2 · Answer 3 · edited May 23 '17 at 11:45

You're using the wrong "this" in the success handler - it points to the global window object (or might point to some object related to the ajax request in this case, but anyway). Learn to use the "that = this" pattern from here.

Also, you can write this.id instead of $(this).attr('id'). Oh, and use .closest() instead of cascaded .parent()s. Or even better, $('.dunno-the-classname').on('click', '.glyphicon', function () { ... }); - lookup the jQuery docs for the second parameter of .on().

score 1 · Answer 4 · answered Jun 20 '14 at 12:30

1

Add this to your click function:

var icon = $(this);

And instead of

$(this).toggleclass("tst");

use

icon.toggleClass("tst");`

answered Jun 20 '14 at 12:30

v42

1,415
14
23

$(this) not working on click when using bootstrap

4 Answers4