0

I've got the following code which mostly works, until the seventh line.

function update(){
    $( ".gauge" ).each(function() {
        var thisElement = $( this ).attr('id');
        var thisID = thisElement.slice(13);
        $.post("https://example.com/subsystems/gauges/updateGauges.php", { ID: thisID }, function(result){
            alert('results are ' + result);
            $( this ).attr('src', result);
        });
    });
}

Essentially, I have a number of gauges that need to periodically update to reflect new data. The update() function runs on a timer. The timer works. The part that gleans the ID used by the database from the element's ID attribute works. The part that connects to the server-side PHP code works. When this runs, the alert pops up the correct image file that is supposed to replace the old image file.

The problem is that I'm not able to get $( this ).attr('src', result) to change the src attribute of the gauge image that's represented in this iteration of the loop. Note that the number of gauges on the page and the id values for the gauges is dynamic - there's no fixed list of the gauge elements.

I don't understand why I can use $( this ).attr('id') to get the value of the id attribute not I can't use $( this ).attr('src', result) to set the src attribute from within the same iteration.

I've already done several searches but I'm drowning in a sea of results that are just how to grab the results and use them in different cases; I can't find anything specific that uses "this"

Any advice is welcome; thanks in advance.

EDIT Thanks to the comments, I was able to get this solved. I used this extra line of code just before the .post statement

let $this = $(this);

Then I changed the function that handles results to this

$this.attr('src', result);

And it works! Thanks to the commenters for their help!

Eric Brockway
  • 101
  • 10
  • 1
    Take a look at what `this` resolves to in the post callback function. In JS `this` is late-binding. – Dave Newton Dec 17 '21 at 15:34
  • 1
    *Generally*, when you enter a new function scope, `this` will be changed to be relevant to that function scope, not the outer scope. Keep a record of `this`, eg `let $this = $(this); ... $.post... function() { $this.attr...` – freedomn-m Dec 17 '21 at 15:39
  • Thank you both! @freedomn-m - Your advice allowed me to solve the problem and now it works! – Eric Brockway Dec 17 '21 at 15:49
  • 1
    On your fix, your second line is essentially `$( $( this ) )` - once you have a jquery object you don't need to re-wrap it in `$( )` – freedomn-m Dec 17 '21 at 15:57
  • Thanks @freedomn-m I have updated my solution to reflect this more elegant solution. – Eric Brockway Dec 17 '21 at 16:18
  • Please post the solution as an answer, not as part of the question. Your first answer wasn’t an answer; it just said it was resolved. (Although technically this is a dupe question.) – Dave Newton Dec 17 '21 at 19:46
  • Does this answer your question? [$(this) inside of AJAX success not working](https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) – Don't Panic Dec 17 '21 at 21:37

0 Answers0