Why doesn't my event fire the first time?

Question

$(document).ready(function () {
    $('.raj').click(function () {
        if (!$(this).hasClass('already')) {

            $('.infos').html('');

            $('.infos').hide("fast");

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "ggg/hhh/rrr.php",
                success: function (msg) {
                    $('.infos').html(msg['ats']);
                    arr = msg['valid'];
                }
            });

            $('.infos').show("slow");

            if (arr == 1) {
                $(this).css("cursor", "default");
                $(this).addClass('already');
                $(this).animate({
                    opacity: 0.1
                }, 1000);
            }
        }
    })
})

When I click an element with class raj (it's an image), nothing happens. Only once it is clicked a second time does my event seem to fire. Why is this happening?

edit: this part is f*cked up:

if(arr == 1)
{
    $(this).css("cursor", "default");
    $(this).addClass('already');
    $(this).animate({
        opacity: 0.1
    }, 1000);
}

But msg['valid'] is really always 1, so I do not get it.

Answer 1

try running the if(arr==1) statement inside your ajax callback (the success function)

Answer 2

You know that your "arr" is set in the post function, and that is executed after you test....

Your ajax-request is not synchronous, you only configure the browser that you want to do an ajax-request, but you never know when it will be executed.

That's why it works the second time, since then the ajax-request has been executed.

Answer 3

I am wondering shouldn't it be like this?

$(document).ready(function() { 
    $('.raj').click(function(){
        var thisObj = $(this);
        if(!$(this).hasClass('already'))
        {
            $('.infos').html('');
            $('.infos').hide("fast");
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "ggg/hhh/rrr.php",
                success: function(msg) {
                    $('.infos').html(msg['ats']);
                    arr = msg['valid'];
                    $('.infos').show("slow");

                    if(arr == 1) {
                        thisObj.css("cursor", "default");
                        thisObj.addClass('already');
                        thisObj.animate({
                            opacity: 0.1
                        }, 1000);
                    }
                }
            });         

        }
    })            
})

It seems like that because of the somehow hard to read indention it was misplaced.

Edit:

Additional info: The ajax call is asynchronous. That means, that arr is not set to 1 the first time, but the second time it is because the callback was triggered already (my only explanation for this)

Answer 4

Everything from $('.infos').show("slow"); onwards runs after the Ajax request has been sent, but before the response has been received and thus before the success function has run.

This means that arr isn't set the first time, and is only set the second time because you have made it a global.

Have everything you need to happen in response to the data coming back from the server happen inside the success function, and don't forget to use the var keyword to keep your variables local.

Answer 5

best way is to have firebug and have break point and check how the flow. you can easlily resolve with this approach.

If that is not working , try click operation with live , so that you won't be having any binding problems.

Answer 6

You should add your f-cked part in 'success' property of AJAX request. In other hand arr equals 0 first time.

        var that = $(this);

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "ggg/hhh/rrr.php",
            success: function (msg) {
                $('.infos').html(msg['ats']);
                arr = msg['valid'];

                $('.infos').show("slow");

               if (arr == 1) {
                   that.css("cursor", "default");
                   that.addClass('already');
                   that.animate({
                     opacity: 0.1
                   }, 1000);
               }

            }
        });