How can I replace an image based on result of ajax request?

Question

I'm making a bingo style game. I generate cards with images in each cell. When a cell is clicked I want to change the cell image based on the response to an ajax call. I have tried many variations of the following code without success:

$(document).ready(function () {
    
    $('img').click(function (event) {
        var src = $(this).attr("src");
        var id = $(this).attr("id");
        var ref = src +' ' + id;
        if(src == 'cards/cardon.gif') return false;

        $.ajax({ 
            url: "checkBingo.php",
            type: "POST",
            data:{"ref":ref},
            success: function (response) {
                alert(response);
                if(response.indexOf('Strike') != -1) $(this).attr('src', 'images/cross.png'); 
                else if (src != 'images/bingo.jpeg') $(this).attr('src', 'cards/cardon.gif');
            }       
        })  
        return false;
   })            
});

I know the response contains 'Strike' but neither of the images is being set. Please help

I've tried many variations including setting a var based on response.indexOf('Strike') != -1) and then swapping the images outside the ajax call

Answer 1

In your success callback, the context (i.e. the value of this) has changed, and does not refer to the image element you would like to update anymore.

To work around this, there are two options:

Cache the image reference

In the outer scope, cache the image reference and reuse it in your callback:

$(document).ready(function () {
    $('img').click(function (event) {
        var $img = $(this);
        var src = $img.attr("src");
        var id = $img.attr("id");
        var ref = src +' ' + id;
        if (src == 'cards/cardon.gif') return false;

        $.ajax({ 
            url: "checkBingo.php",
            type: "POST",
            data:{"ref":ref},
            success: function (response) {
                alert(response);
                if(response.indexOf('Strike') != -1) $img.attr('src', 'images/cross.png'); 
                else if (src != 'images/bingo.jpeg') $img.attr('src', 'cards/cardon.gif');
            }       
        })  
        return false;
   })            
});

Use an arrow function with lexical scoping

If your environment allows you to use arrow functions (which have lexical scoping, preventing the value of this to change), you can use an arrow function to define your callback:

$(document).ready(function () {
    $('img').click(function (event) {
        var src = $(this).attr("src");
        var id = $(this).attr("id");
        var ref = src +' ' + id;
        if (src == 'cards/cardon.gif') return false;

        $.ajax({ 
            url: "checkBingo.php",
            type: "POST",
            data:{"ref":ref},
            success: (response) => {
                alert(response);
                if(response.indexOf('Strike') != -1) $(this).attr('src', 'images/cross.png'); 
                else if (src != 'images/bingo.jpeg') $(this).attr('src', 'cards/cardon.gif');
            }       
        })  
        return false;
   })            
});