How can i use $this inside ajax function?

Question

so here's my problem:

I have these two rows with an image and the button to confirm

what i want is that when i click in that button, the other button don't behave like the one that is being clicked.

when i click (i also don't want that the loading on both of them happen)

how it ends

what i want

View:

<a id="executarJob1" href="#">
    <img class="jobexecutadoimg1" src="{{ URL::to('/icons/donetarefa.png') }}">
    <img class="jobexecutadogif1" width="25" height="18" src="{{ URL::to('/icons/loading.gif') }}">
</a>
<img class="jobexecutadoimg2" src="{{ URL::to('/icons/donetarefacomplete.png') }}">

<a id="executarJob2" href="#">
    <img class="jobexecutadoimg1" src="{{ URL::to('/icons/donetarefa.png') }}">
    <img class="jobexecutadogif1" width="25" height="18" src="{{ URL::to('/icons/loading.gif') }}">
</a>
<img class="jobexecutadoimg2" src="{{ URL::to('/icons/donetarefacomplete.png') }}">

My code with ajax:

$(document).ready(function () {

    $(".jobexecutadoimg2").hide();
    $(".jobexecutadogif1").hide();

    $("#executarJob1").on('click', function () {
        $.ajax('{{route("executar",$lnd->id_demanda)}}',
            {
                beforeSend: function (carregando) {
                    $('.jobexecutadoimg1').html(carregando).hide();
                    $('.jobexecutadogif1').html(carregando).show();
                },
                success: function (finalizado) {
                    $('.jobexecutadoimg2').html(finalizado).slideDown('slow').show()
                    $('.jobexecutadoimg1').html(finalizado).hide();
                    $('.jobexecutadogif1').html(finalizado).hide();
                }
            });
    });
});

Image names to let you guys know which one is being handled

jobexecutadoimg1 = Blue button
jobexecutadoimg2 = Green button (done)
jobexecutadogif1 = Gif button (loading)

How can i use $this inside my ajax? Thanks.

Possible duplicate of [$(this) inside of AJAX success not working](https://stackoverflow.com/questions/6394812/this-inside-of-ajax-success-not-working) — Andrew, Aug 20 '18 at 15:54
have you tried `$(' #executarJob1 .jobexecutadoimg1').html(carregando).hide();` — Abdou, Aug 20 '18 at 15:55
you can also pass the id as the parameter to the callback function in order to reuse the function code — Abdou, Aug 20 '18 at 15:57

score 1 · Answer 1 · answered Aug 20 '18 at 15:47

$("#executarJob1").on('click', function () {
    //you can declare it here
    var _this = this;
    $.ajax('{{route("executar",$lnd->id_demanda)}}',
        {
            beforeSend: function (carregando) {
                //you can use it here like _this
                console.log(_this);
                $('.jobexecutadoimg1').html(carregando).hide();
                $('.jobexecutadogif1').html(carregando).show();
            },
            success: function (finalizado) {
                $('.jobexecutadoimg2').html(finalizado).slideDown('slow').show()
                $('.jobexecutadoimg1').html(finalizado).hide();
                $('.jobexecutadogif1').html(finalizado).hide();
            }
        });
});

score 1 · Accepted Answer · answered Aug 20 '18 at 16:02

I don't think you need to use this in order to make it to work

try :

$(document).ready(function () {

$(".jobexecutadoimg2").hide();
$(".jobexecutadogif1").hide();

function flipImgs(id)
{

    $.ajax('{{route("executar",$lnd->id_demanda)}}',
        {
            beforeSend: function (carregando) {
                $(id +' .jobexecutadoimg1').html(carregando).hide();
                $(id +' .jobexecutadogif1').html(carregando).show();
            },
            success: function (finalizado) {
                $(id +' .jobexecutadoimg2').html(finalizado).slideDown('slow').show()
                $(id +' .jobexecutadoimg1').html(finalizado).hide();
                $(id +' .jobexecutadogif1').html(finalizado).hide();
            }
        });
}
//you can create a loop for the folowing code
$("#executarJob1").on('click', flipImgs("#executarJob1") );
$("#executarJob2").on('click', flipImgs("#executarJob2") );
}

This works flawless, thanks a lot! I managed to solve what i was doing wrong backthen, thank you. — Rickson, Aug 20 '18 at 17:02

How can i use $this inside ajax function?

2 Answers2