jquery array push not working properly inside ajax success

Question

I am trying to push a div id into an array.Array push is working good bofore ajax call.But when i use push inside ajax success first push is taken place when i click on the second element.that is

array operation when with below code( array push inside success)

first click on id="1"  --- resuting array []
second click on id="2"  --- resulting array [1]
second click on id="3"  --- resulting array [1,2]

my code

$(document).ready(function() {

    var count = 0;
    var vPool = '';
    arr = [];
    seat = [];
    var totalseat = '<?php echo $sumofseat; ?>';
    var date = ' <?php echo $new_date; ?>';
    $('.custom_checkbox').click(function() {
        pressed = true;
        var prev = $(this).attr('class');
        var arrid = $(this).attr('id');
        var seats = $(this).attr('title');
        count = $('.selected').length;
        if (prev == 'custom_checkbox') {

            //arr.push(arrid);
            //seat.push(seats);
            $.ajax({
                url: "seat_manipulation.php",
                dataType: 'json',
                data: '&operation=save&seat=' + arrid + '&guid=<?php echo $guid; ?>&date=' + date,
                type: "POST",
                context: this,
                success: function(data) {

                    if (data.status == 'SAVED') {
                        $(this).toggleClass('selected');
                        $('#count').slideDown();
                        $('#selecte_seat').show();
                        $('#count').html(count + ' Seats selected');
                        alert(arrid);
                        //if(jQuery.inArray(arrid,arr) == -1) {
                        arr.push(arrid);


                        //}
                        //if(jQuery.inArray(seats,seat) == -1) {
                        seat.push(seats);
                        //}
                    } else {
                        alert("Seat already been used.Please select another");
                    }

                }
            })

        }
    });
});

am i wrong..or this is how its suposed to work ?? Thanks in advance

The more pertinent information would be where you use that array ? — adeneo, Sep 07 '12 at 09:28

score 5 · Answer 1 · edited May 23 '17 at 11:56

5

You need to configure you're Ajax with "async:false" ,because there is a Race Condition thing ,so block the code while you're manipulating Array's.

Se this question.

edited May 23 '17 at 11:56

Community

1
1

answered Sep 07 '12 at 10:49

Rosmarine Popcorn

10,761
11
59
89

This is exactly what I needed - if you're using the response OUTSIDE of the success ajax function, you need async: false. – Jimbo Oct 05 '12 at 14:38
This worked for me as well. I had a var set outside scope of the ajax call success method and was not able to .push a value from inside to the outside variable. Once I set this to "async:false", it worked. – moto_geek Jul 24 '17 at 03:58

score 3 · Answer 2 · answered Sep 07 '12 at 09:18

3

The AJAX call you are making is asynchronous (by definition...), meaning that the actual function you are defining in $('.custom_checkbox').click is already finished before the success function is called... When you click on the next div (e.g. div 2) then the success function of the first click may or may not have already been called...

Could this be the problem?

answered Sep 07 '12 at 09:18

Daniel

471
5
28

Well, right now you are alerting before the push, so it makes complete sense that the current "push" has not yet taken place.. – Daniel Sep 07 '12 at 09:39

jquery array push not working properly inside ajax success

array operation when with below code( array push inside success)

2 Answers2