CODEWITHSUNDEEP
jquery
geoffs3310
geoffs3310

Reputation: 14008

call back function for jQuery post

I have the following code:

$('#country-list').change(function() {
    country = $('#country-list').val();

    $('td').fadeOut("slow", function() {
        $.post("/gsm/findtariff/country:"+country+"/",
        function(data){
            $('#incoming').html(data.incoming);
            $('#national').html(data.national);
            $('#callsToUk').html(data.toUk);
            $('#international').html(data.otherInternational);
            $('#sms').html(data.sms);
        }, "json");
        $('td').fadeIn();
    });
});

So basically when a country is chosen from my drop down box (#country-list) it should fade out all of the tds in my tariff table, change their values with the returned post data, and then fade them back in again. However with my current code the td's are fading back in before their values have been changed. How can I get the fadeIn() function to only execute once all of the data has been set?

Thanks

Upvotes: 0

Views: 147

Answers (2)

Jon
Jon

Reputation: 16728

Move the fadeIn call up one line.

Upvotes: 0

Chinmayee G
Chinmayee G

Reputation: 8117

You should have $('td').fadeIn(); inside your callback function

$('td').fadeOut("slow", function() {
        $.post("/gsm/findtariff/country:"+country+"/",
        function(data){
            $('#incoming').html(data.incoming);
            $('#national').html(data.national);
            $('#callsToUk').html(data.toUk);
            $('#international').html(data.otherInternational);
            $('#sms').html(data.sms);
            $('td').fadeIn();
        }, "json");
    });

Upvotes: 3

Related Questions