CODEWITHSUNDEEP
htmljqueryajaxlaraveltwitter-bootstrap
ThiTle
ThiTle

Reputation: 35

jQuery button don't change its class instantly because of AJAX call

When my button is clicked,I want to change it's class instantly,but it seems that the ajax call is not letting it to happen.It's happening 3-4 seconds later.Why?I tested with alerts and it's ok.

the button:

    $('#myButton').click(function() {
        alert("ok");//it will alert instantly
        $('#myButton').removeClass().addClass("btn btn-success"); //here, this code is running after 3-4 secs
    });

ajax call:

 $('button').click(function() {
     ...some code...
     $.ajax({
            async: false,
            type: 'POST',
            dataType: 'json',
            url: myUrl,
            data: myValue,
            success: function(data) {
                setTimeout(function() { 
                    img.src = img.src;
                }, 10);
            }

        })

}

Without the ajax call it works

Upvotes: 0

Views: 47

Answers (1)

David
David

Reputation: 218818

Remove this:

async: false

Adding that makes the asynchronous operation artificially synchronous, blocking everything else from happening in the browser. You're probably even getting a warning about deprecation in your browser's development console.

Never use async: false. Keep asynchronous operations asynchronous.

Upvotes: 1

Related Questions