Using $(this) inside a jQuery AJAX callback

Question

I have been all over Stack Overflow looking for a solution and none seem to work.

I cannot seem to figure out the issue. I have a button inside a <td> and on clicking it I want to make an AJAX call to update a database and upon success of that AJAX call I want to update the class of the <td> to mark the button as clicked.

I have tried var that = this; in the function. I've tried context: this, in the callback.

        function setScoreA(event,candidate,rubric,category,score){
            var author = document.getElementById("author").value;
            if(author != ""){
                    $.ajax({
                            context: this,
                            type: "POST",
                            url: "stressBoardUpdate.php",
                            data: "candidate="+candidate+"&category="+category+"&score="+score+"&author="+author,
                            success: function(){
                                    $(that).parent('td').siblings().removeClass('isScore');
                                    $(that).parent('td').addClass('isScore');
                            }
                    });
            }else{
                    alert("Author must contain something...");
            }
         }

Here is how the function would get invoked.

<input type="button" "="" value="5" onclick="setScoreA('Stress Board','Y235','Stress Board Rubric','Handled Stress','5');">

Answer 1

onclick="setScoreA does not set this to the element clicked but rather to window. The way you are using it. The way you are using it, I'm not sure that you could actually get a reference to the element. Instead of using onclick, you should bind an event listener (which you can do with jQuery anyway):

$("input").on("click", function () {
    setScoreA(this, 'Stress Board','Y235','Stress Board Rubric','Handled Stress','5');
});
function setScoreA(element, ...
    /* snip */
    context: element

If you really wanted to stick with this for some reason, you could use:

setScoreA.call(this, 'Stress Board' ...

Answer 2

First of all, make use data attributes in your code and setup a common .click() listener

HTML:

<input type="button" class=".button-group" data-event="Stress Board" data-candidate="Y235" data-rubric="Stress Board Rubric" data-category="Handled Stress" data-score="5">

jQuery:

$(".button-group").click(function() {
    // Do something
});

Also, I presume you are dynamically generating many buttons. The code above could be improved having only 1 click listener for the whole table, rather setting up a click listener for each item.

$("#wrapper").on("click", "input", function() {

    var event = $(this).data("event");
    var candidate = $(this).data("candidate");
    var rubric = $(this).data("rubric");
    var category = $(this).data("category");
    var score = $(this).data("score");

    setScoreA(this, event, candidate, rubric, category, score);

});

JSFIDDLE DEMO

Resources:

• .data()
• .click()
• .on()