Jquery AJAX calls in a loop

Question

In my app, a displays available timeslots (for appointment). I want to add a class 'taken' to the slots () which are already taken. For this I wrote the following code.

$("td").each(function(){

    var send = $(this).text();

    $.ajax({
        url:'ajax/check-availability.php',
        context: this,
        data:{"slot":send},
        dataType:'json',
        type:'get',
        success: function(result){

            console.log(result);

            if (result.status === "taken") {
                $(this).addClass('taken');

            };

        }
    });

});

It's supposed to perform an ajax call, and if the result for a slot is 'taken', add the class 'taken' to corresponding . It does the ajax call part, but adds the class to all td elements in the table, not just the taken ones.

the check-availability.php, returns 'taken' when called it in browser but nothing happens. Also, when the condition is changed into result.status === "notTaken", all the s are added the class 'taken'

How do I fix this?

can you add a alert/logging stmt in the if class to see whether it is working — Arun P Johny, Feb 26 '15 at 05:50
this not get after ajax call save this then use that variable after ajax .... — Affan, Feb 26 '15 at 05:53
@ArunPJohny, I did. I'm getting notTaken as response for all slots. But when called the check-availability.php file on browser, it gives 'taken' for the one slot which is already in database, and notTaken for the ones which are not. — Aneeez, Feb 26 '15 at 05:59
I think the problem is there are too many white spaces around the 'slot'. ( var send = $(this).text(); ) . Removed them and problem solved. Thank you all. — Aneeez, Feb 26 '15 at 06:09

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

$("td").each(function(){
var that = this;
var send = $(this).text();

$.ajax({
    url:'ajax/check-availability.php',
    context: this,
    data:{"slot":send},
    dataType:'json',
    type:'get',
    success: function(result){

        console.log(result);

        if (result.status === "taken") {
            $(that).addClass('taken');

        };

        }
    });

});

see this for more reference: $(this) inside of AJAX success not working

Ajax jquery success scope

edited May 23 '17 at 12:06

Community

1
1

answered Feb 26 '15 at 05:47

rsudip90

799
1
7
24

1

since the `context: this` is set the problem should be something else – Arun P Johny Feb 26 '15 at 05:51

score -1 · Answer 2 · answered Feb 26 '15 at 05:47

-1

instead of success, try using .done()

example

`
 $.ajax({
        url:'ajax/check-availability.php',
        context: this,
        data:{"slot":send},
        dataType:'json',
        type:'get'
    }).done(function(result) {
console.log(result);
            if (result.status === "taken") {
                $(this).addClass('taken');

            };
        });
`

answered Feb 26 '15 at 05:47

Pa3k.m

994
2
7
22

This didn't change anything. – Aneeez Feb 26 '15 at 06:00

Jquery AJAX calls in a loop

2 Answers2